Performance API 썸네일형 리스트형 React 앱에서 브라우저 성능 API 활용하여 로딩 속도 최적화하기 브라우저 Performance API는 React 앱의 실제 사용자 성능(RUM)을 가볍게 수집하고, 병목을 데이터 기반으로 개선하는 데 가장 실용적인 도구입니다. 이 글에서는 핵심 지표를 관측하고 서버로 전송하는 훅과 전환 시간 측정, 리소스 병목 파악, 그리고 그 데이터를 바탕으로 즉시 적용할 수 있는 최적화 방법을 다룹니다.1. 무엇을 왜 측정하나요검색/전환에 직결되는 Core Web Vitals와 네트워크/메인스레드 병목을 측정합니다. 대표 지표는 TTFB(첫 바이트 대기), FCP(첫 콘텐츠 페인트), LCP(가장 큰 콘텐츠 페인트), CLS(누적 레이아웃 이동), Long Task(메인 스레드 정체), 리소스 로딩 시간/용량입니다.2. React에 성능 메트릭 훅 추가아래 훅은 Performa.. 더보기 이전 1 다음