🧩 성능 최적화 개요

렌더링 성능 (Rendering Performance)

→ 사용자 상호작용 이후 UI가 얼마나 빠르게 반응하는가

→ 페이지 진입 시 콘텐츠가 얼마나 빨리 보여지는가

브라우저가 DOM을 그리고 UI를 업데이트하는 과정을 최소화하여 사용자 체감 속도 향상

레이아웃 최적화
- 불필요한 DOM 변경 제거
- Flexbox, Grid 등 효율적인 레이아웃 기술 사용
CSS 최적화
- GPU 가속 속성 사용: transform, opacity
- 무거운 속성 애니메이션 제한 (top, margin, height 등)
JavaScript 최적화
- React.memo, useMemo, useCallback으로 리렌더링 방지
- 상태 최소 변경 및 병합 처리

지표	설명	도구
Re-render Count	리렌더링 횟수	React Profiler, why-did-you-render
Render Transaction Time	상태변경 → 렌더 완료까지 시간	Sentry Custom Transaction
CLS(Layout Shift)	화면 요소 흔들림 정도	Web Vitals, Lighthouse
Long Tasks	UI 쓰레드 점유 시간	Chrome DevTools
INP(Interaction to Next Paint)	사용자 입력 → 화면 반응까지 시간	Web Vitals, Sentry, Lighthouse

페이지 진입 시 필요한 자원을 빠르게 불러와 사용자가 콘텐츠를 빠르게 볼 수 있도록 함