To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

https://dev.to/pallymore/clean-up-async-requests-in-useeffect-hooks-90h

프론트엔드 성능 측정

1. 로딩 시간

   • FCP : 첫 요소가 로드 될 때까지 걸리는 시간
   • FMP : 사용자에게 의미있는 첫 요소가 로드 될 때까지 걸리는 시간
   • LCP : 주요 콘텐츠가 로드될 때까지 걸리는 시간

   

   주로 성능 측정 시 로딩 시간으로 LCP를 기준으로 로딩 속도를 측정한다.

   

   화면에서 가장 큰 요소가 렌더되는 시점

   ~2.5 : 좋음

   2.5~4 : 개선 필요

   4~ : 심각함!

   

   여기서 중요한 게, 가장 큰 요소가 계속해서 바뀌면 안 된다.

2. 렌더링 시간

   렌더링 : 60FPS 사람이 느끼기에 가장 자연스럽다고 생각하는 초당 화면 수

   → 한 화면에서 그려지는 시간이 16ms 미만이다.

   

   브라우저 렌더링 과정이 0.16초를 초과한다면? → 성능 개선이 필요함.

3. 메모리 누수

할당된 자원이 제 때 해제되지 않고, 계속해서 메모리에 남아있는 현상을 의미한다.

주요 원인 : 전역변수, 해제되지 않는 타이머와 콜백, 돔 외부에서의 참조, 클로저