[React] CRA 디폴트 파일인 reportWebVitals

[React] CRA 디폴트 파일인 reportWebVitals

728x90

CRA로 리액트 프로젝트를 생성하고 index.js 를 보면 맨 밑에 reportWebVitals() 라는 함수를 실행하고 있는 부분이 있다.

이부분은 같은 폴더의 reportWebVitals 파일에서 가져온 함수를 실행하고 있는 것인데

주석 처리된 예 처럼 함수에 console.log를 넣어주면 개발창으로 앱의 퍼포먼스시간들을 분석하여 객체 형태로 보여준다.

// metric(측정도구) 이름

name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB';

// 측정된 현재값 (값이 작을수록 빠른성능을 뜻합니다)

value: number;

// 현재 측정값(current value)과 최신 측정값(last-reported value) 차이

// 첫번째 리포트에서 위 둘값은 항상 같습니다.

delta: number;

// 특정 측정도구를 나타대는 유니크한 ID 값으로 중복되는 값들을 관리할 때 사용된다.

id: string;

// 계산된 측정값들의 내용들이 배열로 나열 된다.

// ex) PerformanceNavigationTiming, LargestContentfulPaint

entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[];

Ref

https://github.com/GoogleChrome/web-vitals/#types

from http://gusehd66.tistory.com/67 by ccl(A) rewrite - 2021-12-27 21:01:04