전체

여러 API 호출을 동시에 처리하면서 Promise.all과 Promise.race의 차이를 명확히 이해하게 되었다. 실제 프로젝트에서 마주친 케이스를 정리했다.

React 16.2에서 정식 추가된 Fragment를 프로젝트에 적용했다. 더 이상 wrapper div로 DOM을 오염시키지 않아도 되어 마크업이 깔끔해졌다.

프로젝트의 메인 레이아웃을 Flexbox에서 CSS Grid로 전환했다. IE11 지원 때문에 고민했지만, autoprefixer와 fallback 전략으로 해결했다.

레거시 프로젝트의 div 지옥을 시맨틱 태그로 리팩토링했다. 단순히 태그만 바꿨는데도 스크린리더 호환성과 SEO가 개선되었다.

두 개 이상의 딕셔너리를 병합하는 작업이 필요했다. Python 3.5부터 지원하는 언패킹 연산자를 사용해 깔끔하게 해결했다.

React 16에서 새로 도입된 Error Boundary를 프로덕션에 적용했다. 기존에는 컴포넌트 에러가 발생하면 전체 앱이 크래시됐는데, 이제 에러를 격리해서 처리할 수 있게 됐다.

레거시 float 레이아웃을 Grid와 Flexbox로 전환하는 작업을 진행했다. 각각의 특징을 이해하고 적절히 조합하니 코드가 훨씬 간결해졌다.

Node.js 8이 LTS로 전환되면서 프로젝트에 async/await를 본격적으로 도입했다. Promise 체이닝에서 벗어나면서 코드 가독성은 좋아졌지만, 에러 핸들링과 병렬 처리에서 주의할 점들이 있었다.

Node.js 8 LTS 업그레이드와 함께 콜백 지옥을 async/await으로 전환했다. Promise 체이닝보다 가독성이 크게 개선되었고, 에러 핸들링도 직관적으로 바뀌었다.

번들 사이즈가 2MB를 넘어가면서 초기 로딩 속도가 심각하게 느려졌다. CommonsChunkPlugin과 dynamic import를 활용해 번들을 분리하고 초기 로딩 시간을 40% 단축했다.