전체

레거시 프로젝트를 Python 2.7에서 3.6으로 마이그레이션하면서 겪은 주요 이슈들을 정리했다. unicode 처리와 print 문법 변경이 가장 큰 작업이었고, 의외로 third-party 라이브러리 호환성 문제가 많았다.

API 호출 후 후속 처리가 필요한 경우 Observable 체이닝을 어떻게 구성하는지 정리했다. switchMap, mergeMap, concatMap의 차이를 실제 사용 사례와 함께 기록한다.

여러 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% 가량 줄일 수 있었다.

Node.js 8에서 추가된 util.promisify를 활용해 콜백 기반 API를 Promise로 변환했다. 기존 프로젝트의 복잡한 콜백 체인을 async/await 패턴으로 리팩토링한 과정을 정리했다.