전체

프로젝트 번들 크기가 계속 커지면서 초기 로딩 속도가 문제가 되었다. Webpack 3의 CommonsChunkPlugin을 활용해 vendor 코드를 분리하고 캐싱 효율을 높인 과정을 정리했다.

프로젝트의 float 기반 레이아웃을 CSS Grid로 전환했다. IE11 지원 때문에 고민이 있었지만, autoprefixer로 어느 정도 해결할 수 있었다.

프로젝트를 Webpack 2에서 3으로 마이그레이션했다. Scope Hoisting과 ModuleConcatenationPlugin을 적용하며 번들 사이즈를 약 15% 줄일 수 있었다.

레거시 Django 프로젝트를 Python 2.7에서 3.6으로 마이그레이션하는 작업을 진행했다. unicode 처리와 라이브러리 호환성 문제가 주요 이슈였고, 2to3 도구와 six 라이브러리로 점진적 전환을 완료했다.

프로젝트에서 콜백 지옥을 정리하면서 Promise와 async/await를 함께 사용하게 됐다. 두 방식의 차이점과 실제 사용 경험을 정리했다.

IE11 지원 때문에 미뤄두었던 CSS Grid를 드디어 프로젝트에 적용했다. Flexbox 대비 레이아웃 코드가 얼마나 간결해지는지 확인할 수 있었다.

ES6에서 추가된 Array.includes()를 기존 indexOf() 대신 사용하면서 성능 차이가 궁금해졌다. 프로덕션 환경에 적용하기 전 간단히 벤치마크를 돌려봤다.

SPA 프로젝트의 초기 로딩 시간이 5초를 넘어가면서 개선 작업이 필요했다. Webpack 3의 CommonsChunkPlugin과 dynamic import를 활용해 번들 사이즈를 40% 줄였다.

React 16이 정식 릴리즈되면서 파이버 아키텍처가 도입되었다. 새로 추가된 Error Boundary를 실무에 적용하면서 알게 된 내용을 정리했다.

프로젝트 리팩토링 중 콜백 지옥을 Promise 패턴으로 전환하는 작업을 진행했다. 레거시 코드에 남아있던 callback 패턴들을 정리하며 비동기 처리 패턴의 변화를 다시 한번 되짚어봤다.