네번째 주차 목표
1. 프로파일링을 활용한 리엑트 성능 최적화
2. 서스펜스와 에러바운더리를 활용하기
3. 에러 바운더리를 활용한 전역 에러 핸들링
웹 페이지 성능을 확인하는 방법에는 여러가지가 있어요 :)
대표적으로는 아래와 같은 핵심 웹 지표가 있습니다.
핵심 웹 지표란 (Core Web Vital)로 구글에서 만든 지표입니다.
(1) **LCP** (최대 콘텐츠 풀 페인트)
(2) **FID** (최초 입력지 지연)
(3) **CLS** (누적 레이아웃 이동)
(4) **TTFB** (최초 바이트까지의 시간)
(5) **FCP** (최초 콘텐츠 풀 시간)
----------------------------------------------------
이러한 웹 지표를 토대로 페이지의 성능을 확인하는 방법은 여러 종류가 있어요!
(1) React-profiler
(2) 구글 라이트하우스 점수
(3) 네트워크 및 메모리 탭
----------------------------------------------------
위의 방법을 통해서 내가 랜더링한 컴포넌트가 늦게 랜더링되고 있다면 원인을 파악하고
개선을 하는 것이 중요해요! 특히 이미지와 같이 어셋의 크기가 큰 경우라면 레이아웃 시프트에
의하여 UX에 굉장히 좋지 않은 영향을 일으킬 수 있어요!
레이아웃 시프트란?
늦게 로드되는 컨텐츠들로 인해, 먼저 로딩된 컨텐츠가 밀려나는 현상을 이야기합니다.
@reference
ttps://medium.com/wantedjobs/react-profiler를-사용하여-성능-측정하기-5981dfb3d934
https://yohanpro.com/posts/react/리렌더링과-성능
https://wikidocs.net/197632#_2
https://chanmi-lee.github.io/articles/2021-01/website-spped-and-performance-optimization
핵심 웹 지표의 정의와 개선할 수 있는 방안에 대하여 정리해서 README.md에 기록할 것
본인이 지금까지 만든 웹 사이트 중 하나를 배포하고 (페어별 가능)
구글 라이트 하우스 점수를 활용해 웹 지표를 확인하고 가이드에 따라 점수를 개선해보세요.
단, 개선된 항목과 점수는 반드시 블로그에 남겨 후기를 작성하고 링크를 README.md에 기록할 것