마이리얼트립 웹사이트 성능 측정 및 최적화 Part 2. 렌더링

마이리얼트립은 웹사이트 성능 최적화를 위해 렌더링 과정에 집중했습니다. 특히 모바일 환경에서의 CPU 성능과 배터리 소모를 고려하여, 60fps를 기준으로 렌더링 성능을 측정하고 개선하는 방법을 다룹니다.

JavaScript 실행, 스타일 계산, 레이아웃, 페인팅, 컴포지팅으로 이어지는 픽셀 파이프라인을 이해하고, React Profiler를 활용하여 불필요한 렌더링을 식별합니다. 최적화 기법으로는 작업 시점 제어, React 렌더링 및 Hooks 최적화 등을 통해 사용자 경험을 향상시키는 것을 목표로 합니다.