전체

React 16.8에서 Hooks가 정식 릴리즈되었다. 기존 프로젝트의 Class Component를 어떻게 전환할지 검토하며, 당장 적용 가능한 부분과 유보할 부분을 정리했다.

동기 방식의 크롤러를 asyncio로 전환하면서 처리 속도를 5배 개선했다. aiohttp와 asyncio.gather를 활용한 동시성 처리 방법을 정리한다.

React 16.8 정식 릴리즈를 앞두고 Hooks API를 검토했다. 기존 Class 컴포넌트 기반 코드베이스에서 Hooks로 전환할지, 어떻게 전환할지 고민한 내용을 정리했다.

프로젝트 규모가 작아 Redux가 과하다고 판단했다. React 16.3에서 정식 도입된 Context API를 활용해 전역 상태를 관리한 경험을 정리했다.

레거시 Angular 프로젝트를 정리하다 RxJS 5에서 6으로 마이그레이션하면서 operator import 방식을 변경했다. pipe 메서드 도입으로 코드 가독성이 크게 개선되었고, 번들 사이즈도 줄어든 경험을 정리한다.

여러 비동기 작업의 성공/실패 여부를 모두 확인해야 하는 요구사항이 생겼다. Promise.all은 하나라도 실패하면 reject되기 때문에 적합하지 않았고, Promise.allSettled를 직접 구현했다.

React 16.7 alpha 버전에서 발표된 Hooks를 실제로 테스트해봤다. 아직 프로덕션에 적용하기엔 이르지만, 클래스형 컴포넌트를 함수형으로 전환할 수 있는 가능성을 확인했다.

반응형 대시보드 레이아웃 구현 중 CSS Grid와 Flexbox를 함께 사용하면서 발생한 아이템 크기 계산 오류를 해결했다. min-width: 0 속성이 핵심이었다.

API 호출을 순차적으로 처리하던 코드를 병렬로 바꾸면서 응답 시간을 절반 이상 줄였다. Promise.all을 활용한 간단한 리팩토링이었지만 효과는 확실했다.

PM2 클러스터 모드로 전환하면서 인메모리 캐시 동기화 문제에 부딪혔다. Redis로 해결했지만, 적용 과정에서 고려해야 할 사항들을 정리했다.