Frontend

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

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

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

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

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

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

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

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

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

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