React

React 16 베타 버전을 사이드 프로젝트에 적용해봤다. Fiber 아키텍처로 인한 성능 개선이 체감됐고, 에러 바운더리 기능이 유용했다. 프로덕션 적용은 정식 릴리즈 후로 미루기로 했다.

React 16 RC 버전에서 새로 추가된 componentDidCatch 라이프사이클 메서드를 사용해봤다. 기존에 에러가 발생하면 전체 앱이 크래시되던 문제를 해결할 수 있었다.

프로젝트에서 반복되는 인증 로직을 HOC로 추상화했다. Higher-Order Component 패턴을 실제 업무에 적용하면서 얻은 인사이트를 정리한다.

프로젝트에서 인증, 로깅 등 공통 로직이 여러 컴포넌트에 중복되는 문제가 있었다. Higher-Order Component 패턴을 적용해 코드 중복을 제거하고 재사용성을 높인 과정을 정리했다.

React 16 베타를 프로젝트에 적용해봤다. Fiber 아키텍처로 인한 성능 개선이 체감될 정도였고, 특히 애니메이션이 많은 대시보드에서 확연한 차이를 보였다.

React 16이 정식 출시되면서 내부 재작성된 Fiber 아키텍처를 적용했다. 기존 15.x 버전에서 마이그레이션하며 겪은 이슈와 성능 개선 내용을 정리했다.

프로젝트 규모가 커지면서 PropTypes만으로는 타입 안정성이 부족하다고 판단했다. Flow를 도입해 전체 컴포넌트 타입을 정적으로 체크하도록 마이그레이션한 과정을 기록한다.

프로젝트 진행 중 라이프사이클 메서드를 헷갈려서 정리했다. componentWillMount, componentDidMount 등의 호출 순서와 실제 사용 케이스를 기록한다.

프로젝트에서 라이프사이클 메서드를 잘못 사용해 메모리 누수가 발생했다. 각 메서드의 역할과 사용 시점을 정리했다.