JavaScript

실무에서 대량의 데이터를 처리하다 보니 map, filter, reduce를 체이닝할 때와 for 루프를 사용할 때의 성능 차이가 궁금해졌다. 직접 측정해본 결과를 기록한다.

프로젝트에서 Promise 체이닝 코드를 async/await로 전환했다. 가독성이 확실히 개선되었고, 에러 핸들링도 더 직관적이다. ES2017 스펙이지만 Babel 덕분에 안정적으로 사용 가능하다.

여러 API 호출을 동시에 처리하면서 Promise.all과 Promise.race의 차이를 명확히 이해하게 되었다. 실제 프로젝트에서 마주친 케이스를 정리했다.

번들 사이즈가 2MB를 넘어가면서 초기 로딩 속도가 심각하게 느려졌다. CommonsChunkPlugin과 dynamic import를 활용해 번들을 분리하고 초기 로딩 시간을 40% 단축했다.

프로덕션 빌드 시 번들 사이즈가 2MB를 넘어가면서 초기 로딩 속도가 느려지는 문제가 발생했다. Webpack 3의 코드 스플리팅과 트리 쉐이킹을 적용해 번들 사이즈를 절반으로 줄인 과정을 정리했다.

레거시 API 호출 코드를 Promise 체이닝에서 async/await 패턴으로 전환했다. 코드 가독성이 크게 개선되었고, 에러 핸들링도 훨씬 직관적으로 처리할 수 있게 되었다.

프로젝트의 초기 로딩 시간이 길어지는 문제를 해결하기 위해 Webpack 3의 Code Splitting을 적용했다. CommonsChunkPlugin과 dynamic import를 활용하여 번들 사이즈를 40% 가량 줄일 수 있었다.

프로젝트 번들 사이즈가 2MB를 넘어가면서 초기 로딩 속도가 심각하게 느려졌다. Webpack의 CommonsChunkPlugin을 제대로 설정해서 vendor와 manifest를 분리한 과정을 정리했다.

번들 크기가 2MB를 넘어서면서 초기 로딩 속도가 문제가 되었다. Webpack 3의 CommonsChunkPlugin을 사용해 코드 스플리팅을 적용하면서 겪은 시행착오를 정리했다.

프로젝트 번들 크기가 계속 커지면서 초기 로딩 속도가 문제가 되었다. Webpack 3의 CommonsChunkPlugin을 활용해 vendor 코드를 분리하고 캐싱 효율을 높인 과정을 정리했다.