Frontend

React 16 베타를 프로젝트에 적용해보면서 새로 추가된 Error Boundary 개념을 접했다. 기존에는 컴포넌트 렌더링 중 에러가 발생하면 전체 앱이 망가졌는데, 이제는 에러를 격리할 수 있게 되었다.

ES7에 추가된 Array.includes() 메서드를 프로젝트에 적용하면서 indexOf 비교 패턴을 제거했다. 조건문 가독성이 눈에 띄게 개선되어 코드 리뷰 시간이 단축되었다.

Angular 4 프로젝트에서 발생한 메모리 누수 문제를 추적했다. 컴포넌트가 destroy될 때 Observable 구독을 해제하지 않아 발생한 문제였고, 여러 해결 방법을 비교해봤다.

ES2017에 추가된 Object.entries()를 활용해 객체 순회 코드를 개선했다. 기존 Object.keys()와 for-in 방식보다 직관적이고 간결한 코드 작성이 가능했다.

React 16 베타를 프로젝트에 적용해봤다. Fiber 아키텍처로 인한 성능 개선이 체감될 정도였고, 특히 애니메이션 처리가 눈에 띄게 부드러워졌다. 몇 가지 breaking changes가 있어 마이그레이션 과정을 정리했다.

React 16으로 업그레이드하면서 fiber reconciler의 변화를 체감했다. 특히 대량의 리스트 렌더링에서 프레임 드롭이 줄어든 점이 인상적이었다.

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

Angular HTTP 통신에서 Observable 구독 해제를 제대로 하지 않아 메모리 누수가 발생했다. 컴포넌트 라이프사이클에 맞춰 구독을 관리하는 패턴을 정리했다.

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

API 호출 후 후속 처리가 필요한 경우 Observable 체이닝을 어떻게 구성하는지 정리했다. switchMap, mergeMap, concatMap의 차이를 실제 사용 사례와 함께 기록한다.