전체

회사 대시보드 페이지 로딩 속도가 3초 이상 걸려 원인을 분석했다. Django ORM에서 발생한 N+1 쿼리 문제였고, select_related와 prefetch_related로 해결했다.

프로젝트 빌드 용량이 2MB를 넘어서면서 초기 로딩 속도가 문제가 되었다. CommonsChunkPlugin을 활용해 vendor와 manifest를 분리하고 번들 크기를 40% 줄인 과정을 정리했다.

React 16 베타를 실제 프로젝트에 적용해봤다. Fiber 아키텍처로 인한 렌더링 개선과 새로운 에러 바운더리 기능을 테스트했고, 마이그레이션 과정에서 마주친 이슈들을 정리했다.

문자열 ref가 deprecated 되면서 ref 콜백 패턴을 적용했다. 동적으로 생성되는 리스트 아이템에 포커스를 관리하는 과정에서 유용했던 패턴을 정리한다.

React 16으로 업그레이드하면서 새로 추가된 Error Boundary를 프로젝트에 적용했다. 기존에 try-catch로 처리하던 에러 핸들링을 개선하고, 사용자에게 더 나은 에러 UI를 제공할 수 있게 되었다.

babel-preset-env를 도입하면서 번들 크기를 30% 가량 줄일 수 있었다. 타겟 브라우저에 필요한 polyfill만 포함시키는 방식이 꽤 효과적이었다.

React 16 베타 버전에 추가된 Error Boundary를 프로젝트에 적용해봤다. 컴포넌트 에러 처리 방식이 크게 개선되어 사용자 경험 향상에 도움이 될 것 같다.

레거시 Django 프로젝트를 Python 2.7에서 3.6으로 마이그레이션했다. unicode 처리와 라이브러리 호환성 문제가 주요 이슈였다.

Express 미들웨어에서 비동기 에러가 제대로 잡히지 않아 서버가 종료되는 문제가 발생했다. Promise 체이닝과 에러 핸들링 패턴을 정리하며 해결했다.

Webpack 3에 추가된 ModuleConcatenationPlugin을 프로젝트에 적용했다. 번들 사이즈가 약 15% 감소하고 실행 속도도 개선되었다.