Frontend

회사 프로젝트가 Angular 1.x에서 시작해 2년이 지났다. 최근 React 16 릴리즈를 보며 마이그레이션 가능성을 검토했고, 두 프레임워크의 실질적인 차이를 정리했다.

레거시 API 호출 코드를 Promise 체이닝에서 async/await 패턴으로 전환했다. 코드 가독성이 크게 개선되었고, 에러 핸들링도 훨씬 직관적으로 처리할 수 있게 되었다.

프로젝트의 초기 로딩 시간이 길어지는 문제를 해결하기 위해 Webpack 3의 Code Splitting을 적용했다. CommonsChunkPlugin과 dynamic import를 활용하여 번들 사이즈를 40% 가량 줄일 수 있었다.

React 16에서 새로 도입된 Error Boundary를 프로젝트에 적용했다. 기존에는 컴포넌트 에러가 전체 앱을 중단시켰는데, 이제 에러를 격리하고 fallback UI를 보여줄 수 있게 되었다.

프로젝트 번들 사이즈가 2MB를 넘어가면서 초기 로딩 속도가 심각하게 느려졌다. Webpack의 CommonsChunkPlugin을 제대로 설정해서 vendor와 manifest를 분리한 과정을 정리했다.

Flexbox만으로는 한계가 있던 2차원 레이아웃을 CSS Grid로 해결했다. IE11 지원이 필요한 프로젝트였지만, autoprefixer와 @supports를 활용해 점진적 향상을 적용했다.

회사 프로젝트를 Angular 1.x에서 새로운 프레임워크로 전환하기로 했다. Angular 2+ 대신 React를 선택한 배경과 마이그레이션 전략을 정리했다.

IE11에서 Flexbox를 사용하다 마주친 min-height 버그를 정리했다. 프로덕션 배포 전에 발견해서 다행이었다.

번들 크기가 2MB를 넘어서면서 초기 로딩 속도가 문제가 되었다. Webpack 3의 CommonsChunkPlugin을 사용해 코드 스플리팅을 적용하면서 겪은 시행착오를 정리했다.

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