reportWebVitals.ts

React Typescript 프로젝트 진행 중

위의 에러가 떴다.

node_modules 설치할때 자동으로 생기는 경우도 있고, 그렇지 않은 경우에는 위와 같이 에러가 난다.

[classnames] Could not find a declaration file for module

방법 1.

node_modules 삭제 후 다시 npm install

🚩방법2.

npm i —save-dev @types/seb-vitals

그렇다면, web-vitals는 무엇인가?

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

📌web-vitals

create-react-app에서 기본값으로 제공되는 사용자 경험 메트릭을 캡처하고 측정하는 데 사용되는 타사 라이브러리 라고 한다.

즉, 사용자가 체감 할 수 있는 성능을 수치화한 것이라고 생각하면 이해가 쉬울것같다.