JavaScript

프로젝트를 Webpack 2에서 3으로 마이그레이션했다. Scope Hoisting과 ModuleConcatenationPlugin을 적용하며 번들 사이즈를 약 15% 줄일 수 있었다.

프로젝트에서 콜백 지옥을 정리하면서 Promise와 async/await를 함께 사용하게 됐다. 두 방식의 차이점과 실제 사용 경험을 정리했다.

ES6에서 추가된 Array.includes()를 기존 indexOf() 대신 사용하면서 성능 차이가 궁금해졌다. 프로덕션 환경에 적용하기 전 간단히 벤치마크를 돌려봤다.

SPA 프로젝트의 초기 로딩 시간이 5초를 넘어가면서 개선 작업이 필요했다. Webpack 3의 CommonsChunkPlugin과 dynamic import를 활용해 번들 사이즈를 40% 줄였다.

프로젝트에서 Promise 체이닝이 복잡해지면서 가독성이 떨어지는 문제가 발생했다. Node 8에서 정식 지원되는 async/await를 도입해 코드를 개선한 과정을 정리했다.

레거시 코드에 중첩된 OR 조건문이 너무 많아 가독성이 떨어졌다. ES7의 Array.includes()를 활용해 간결하게 개선했다.

Node 8 업그레이드 후 프로젝트에 async/await를 본격 도입했다. Promise 체인보다 가독성은 좋아졌지만 에러 핸들링 방식을 통일하는 과정에서 몇 가지 패턴을 정리할 필요가 있었다.

프로젝트 빌드 용량이 2MB를 넘어서면서 초기 로딩 속도가 문제가 되었다. CommonsChunkPlugin을 활용해 vendor와 manifest를 분리하고 번들 크기를 40% 줄인 과정을 정리했다.

babel-preset-env를 도입하면서 번들 크기를 30% 가량 줄일 수 있었다. 타겟 브라우저에 필요한 polyfill만 포함시키는 방식이 꽤 효과적이었다.

Webpack 3에 추가된 ModuleConcatenationPlugin을 프로젝트에 적용했다. 번들 사이즈가 약 15% 감소하고 실행 속도도 개선되었다.