reportWebVitals

cra 로 리액트 만들면 있는

reportWebVitals()

reportWebVitals은 React 애플리케이션의 성능 측정을 위한 도구입니다. 이 도구는 개발자가 애플리케이션의 성능 지표를 측정하고 모니터링할 수 있도록 도와줍니다.

React 애플리케이션은 사용자 경험을 개선하기 위해 성능을 최적화해야 합니다. reportWebVitals는 애플리케이션의 성능을 측정하는 데 사용되는 핵심 지표인 LCP(Largest Contentful Paint), FID(First Input Delay), CLS(Cumulative Layout Shift)와 같은 지표를 추적합니다.

LCP(Largest Contentful Paint): 사용자가 페이지를 로드했을 때 가장 큰 콘텐츠가 화면에 표시되는 시간을 측정합니다. 이는 페이지의 로딩 속도를 나타내는 지표입니다.
FID(First Input Delay): 사용자가 페이지와 상호작용하려고 할 때 응답이 얼마나 빠른지 측정합니다. 이는 사용자의 인터랙션에 대한 대기 시간을 나타냅니다.
CLS(Cumulative Layout Shift): 페이지의 레이아웃 안정성을 측정합니다. 페이지가 로드되는 동안 콘텐츠가 얼마나 변화하는지를 나타내며, 사용자의 의도와 다른 움직임은 사용자 경험을 저하시킬 수 있습니다.
reportWebVitals는 이러한 성능 지표를 수집하고 브라우저의 성능 측정 API를 사용하여 측정합니다. 이를 통해 개발자는 애플리케이션의 성능 향상을 위한 최적화 작업을 식별하고 실행할 수 있습니다. 개발 중인 애플리케이션에서 reportWebVitals를 사용하면 성능 측정에 대한 가시성과 디버깅을 향상시킬 수 있습니다.

 

reportWebVitals(console.log);
로 확인하기!

 

 

 

애플리케이션을 실행하고 개발자 도구를 엽니다. (일반적으로 브라우저의 F12 키를 누르면 개발자 도구가 열립니다.)

개발자 도구의 콘솔 탭에서 성능 지표를 확인할 수 있습니다. reportWebVitals 함수에 전달한 콜백 함수에 의해 성능 지표가 출력됩니다.

성능 지표는 LCP, FID, CLS와 해당 지표의 값을 나타내는 메트릭이 포함됩니다. 각 지표는 페이지 로드 중에 발생하는 성능 이벤트에 대한 정보를 제공합니다. 예를 들어, LCP는 가장 큰 콘텐츠가 표시되는 시간을 나타내며, FID는 사용자가 첫 번째 상호작용을 시작한 시점의 응답 시간을 나타냅니다.

reportWebVitals를 사용하면 성능 지표를 실시간으로 모니터링하고, 성능 저하가 발생하는 경우 해당 지표를 기반으로 문제를 식별하고 해결할 수 있습니다.