[React] CRA 디폴트 파일인 reportWebVitals

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