Frontend

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

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

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

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

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

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

SPA에서 컴포넌트 destroy 시 구독 해제를 놓쳐 메모리 누수가 발생했다. takeUntil 패턴으로 해결한 과정을 정리했다.

React 16이 정식 릴리즈되면서 내부 아키텍처가 Fiber로 재작성되었다. 기존 Stack 기반 reconciler와 비교하여 실제 프로젝트에 적용하며 체감한 변화를 정리했다.

IE11 지원이 필요한 프로젝트에 CSS Grid를 부분 적용했다. Flexbox 폴백을 준비하면서 얻은 경험을 정리한다.

Webpack 2에서 3으로 업그레이드하면서 빌드 속도가 오히려 느려지는 문제가 발생했다. Scope Hoisting과 CommonsChunkPlugin 설정을 조정하여 해결한 과정을 기록했다.