12KB 라이브러리로 구현한 React CLS 정밀 측정 및 제로-렌더링 오버헤드 설계

Context

React의 컴포넌트 기반 비동기 렌더링 모델로 인한 불가피한 Cumulative Layout Shift(CLS) 발생 가능성 증대. 기존 PerformanceObserver 수동 구현 방식의 과도한 Boilerplate 코드와 세션 윈도우 계산 로직의 복잡성으로 인한 유지보수 효율 저하.

Technical Solution

• web-vitals 라이브러리와 raw PerformanceObserver를 병행 사용하는 Dual Observer Strategy 채택으로 정교한 CLS 측정 및 실시간 개별 Shift 캡처 구현
• useRef 기반의 Options 객체 관리 패턴을 통한 Stale Closure 문제 해결 및 Observer 재등록 없이 최신 콜백 함수 유지
• 데이터 누적을 위한 entriesRef, sessionWindowsRef 등 Ref-based Mutation 설계로 불필요한 리렌더링을 원천 차단한 제로-렌더링 오버헤드 달성
• useCallback 및 useMemo를 통한 유틸리티 함수 메모이제이션으로 하위 컴포넌트로의 불필요한 렌더링 전파 방지
• Tree-shaking 지원 구조 설계로 개별 훅 임포트 시 번들 사이즈 최소화 및 SSR 호환성 확보

Impact

• 전체 라이브러리 크기 약 12KB (gzipped) 수준의 경량 설계
• Google Core Web Vital 기준 CLS 0.1 이하의 Good 등급 달성을 위한 정밀 진단 환경 구축