JavaScript

Webpack 2에서 3으로 업그레이드하면서 빌드 속도가 오히려 느려지는 문제가 발생했다. Scope Hoisting과 CommonsChunkPlugin 설정을 조정하여 해결한 과정을 기록했다.

ES7에 추가된 Array.includes() 메서드를 프로젝트에 적용하면서 indexOf 비교 패턴을 제거했다. 조건문 가독성이 눈에 띄게 개선되어 코드 리뷰 시간이 단축되었다.

ES2017에 추가된 Object.entries()를 활용해 객체 순회 코드를 개선했다. 기존 Object.keys()와 for-in 방식보다 직관적이고 간결한 코드 작성이 가능했다.

여러 API를 동시에 호출할 때 일부가 실패해도 성공한 결과를 받아야 하는 경우가 있었다. Promise.all의 단점과 이를 보완하는 방법을 정리했다.

개발 환경에서 CORS 문제를 해결하기 위해 webpack-dev-server의 프록시 기능을 설정했다. API 서버와 프론트엔드 서버의 포트가 달라서 발생하는 문제를 간단히 해결할 수 있었다.

API 호출 체이닝 과정에서 발생하는 에러를 추적하기 어려운 문제가 있었다. catch 블록의 위치와 에러 전파 방식을 개선하여 디버깅을 용이하게 만들었다.

API 호출 체이닝 과정에서 발생한 에러가 제대로 처리되지 않는 문제를 겪었다. Promise의 catch 위치에 따른 에러 전파 방식을 정리했다.

여러 API를 순차적으로 호출하면서 응답 시간이 너무 길어지는 문제가 있었다. Promise.all과 Promise.race를 활용해 병렬 처리로 개선한 과정을 기록했다.

API 연쇄 호출 중 발생한 에러가 제대로 처리되지 않아 디버깅에 시간을 낭비했다. Promise 체이닝에서 에러 핸들링을 어떻게 해야 하는지 정리했다.

babel-preset-es2015 대신 babel-preset-env를 도입해 타겟 브라우저에 맞는 polyfill만 포함시켰다. 번들 사이즈가 약 15% 감소했고, 설정도 더 명확해졌다.