구글 라이트하우스

    [React] Deep Dive 모던 리액트(32) 웹페이지 성능측정

    이전 글에서 웹페이지의 성능을 판단하기 위해 확인해야 하는 지표들에 대해 알아봤다. 이번 글에서는 지표를 확인하는 서로 다른 방법을 통해 웹페이지의 성능을 객관적으로 파악하는 방법을 알아보자. 1. 애플리케이션에서 확인하기 1. create-react-app cra를 통해 프로젝트를 생성하면 아래와 같은 파일이 생성된다. (src 파일 안에 있다) import { ReportHandler } from 'web-vitals'; const reportWebVitals = (onPerfEntry?: ReportHandler) => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID, ..