Frontend

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

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

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

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

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

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

프로덕션 빌드 시 번들 사이즈가 2MB를 넘어가면서 초기 로딩 속도가 느려지는 문제가 발생했다. Webpack 3의 코드 스플리팅과 트리 쉐이킹을 적용해 번들 사이즈를 절반으로 줄인 과정을 정리했다.

React 16에서 새로 도입된 Error Boundary를 프로젝트에 적용했다. 기존에는 컴포넌트 에러 발생 시 전체 화면이 깨지는 문제가 있었는데, 이를 우아하게 처리할 방법이 생겼다.

회사 프로젝트를 Angular 1.x에서 React 16으로 마이그레이션하기로 결정했다. 번들 크기와 러닝커브, 그리고 채용 시장을 고려한 선택이었다.

IE11에서 flex container의 min-height가 자식 요소에 제대로 적용되지 않는 버그를 발견했다. flex-basis를 사용한 우회 방법으로 해결했다.