전체

회사 프로젝트를 Angular 2에서 Angular 4로 마이그레이션했다. 생각보다 순조로웠고, 번들 크기가 눈에 띄게 줄어들었다.

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

레거시 프로젝트에 Java 8 Stream API를 도입하면서 겪은 시행착오를 정리했다. 특히 for문을 무분별하게 Stream으로 변환하면서 발생한 성능 이슈와 해결 과정을 기록한다.

회사 프로젝트를 Angular 2.4에서 4.0으로 업그레이드했다. 메이저 버전 업그레이드지만 생각보다 순조로웠고, 번들 사이즈가 눈에 띄게 줄어들었다.

10GB 규모의 CSV 파일을 처리하는 배치 작업에서 메모리 부족 문제가 발생했다. Stream API를 활용해 메모리 사용량을 1/10로 줄이고 처리 속도를 개선한 과정을 기록한다.

프로젝트에서 날짜 입력 UI를 구현하다가 Safari와 IE에서 date input이 제대로 동작하지 않는 문제를 발견했다. 폴백 처리와 polyfill을 적용한 해결 과정을 정리한다.

여러 API를 순차적으로 호출하던 코드를 Promise.all로 리팩토링하여 응답 시간을 3초에서 1초로 단축했다. 병렬 처리가 가능한 경우 Promise.all을 활용하면 성능을 크게 개선할 수 있다.

프로젝트 리팩토링 중 reduce를 남용하는 코드를 발견했다. 가독성과 성능 측면에서 reduce가 항상 최선은 아니라는 것을 깨달았고, 적절한 사용 사례를 정리해봤다.

React 16이 정식 출시되면서 내부 재작성된 Fiber 아키텍처를 적용했다. 기존 15.x 버전에서 마이그레이션하며 겪은 이슈와 성능 개선 내용을 정리했다.

프로젝트에서 Flexbox를 본격 도입하면서 IE11 호환성 문제를 여러 건 마주쳤다. 주로 발생한 이슈와 해결 방법을 정리했다.