Frontend

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

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

프로젝트에서 반복되는 인증 로직을 HOC로 추상화했다. Higher-Order Component 패턴을 실제 업무에 적용하면서 얻은 인사이트를 정리한다.

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

float 기반 레이아웃을 Flexbox로 전환하면서 겪은 브라우저 호환성 이슈와 해결 과정을 정리했다. IE10+ 지원 요구사항 때문에 생각보다 조심스러운 작업이었다.

프로젝트에서 인증, 로깅 등 공통 로직이 여러 컴포넌트에 중복되는 문제가 있었다. Higher-Order Component 패턴을 적용해 코드 중복을 제거하고 재사용성을 높인 과정을 정리했다.

IE11 지원 요구사항이 있는 프로젝트에서 CSS Grid를 점진적으로 도입했다. Flexbox fallback과 함께 사용하여 레이아웃 코드를 30% 가량 줄일 수 있었다.

Angular 4로 마이그레이션하면서 HTTP 요청 처리를 Observable로 전환했다. Promise에 익숙했던 팀원들을 위해 실무에서 자주 쓰이는 패턴을 정리했다.

Angular 2에서 4로 업그레이드하면서 번들 사이즈가 예상보다 줄지 않았다. AOT 컴파일과 Tree shaking 설정을 점검하며 30% 가량 용량을 줄인 과정을 정리했다.

React 16 베타를 프로젝트에 적용해봤다. Fiber 아키텍처로 인한 성능 개선이 체감될 정도였고, 특히 애니메이션이 많은 대시보드에서 확연한 차이를 보였다.