웹 리스트 성능이 떨어질 때 찾아야 할 것

리스트 성능 문제는 화면만 봐서는 모른다

리스트 페이지가 느리다면 로그와 응답을 함께 봐야 한다. 화면이 느린 건 프론트엔드 문제일 수도 있고, API 응답이 느린 거일 수도 있기 때문이다.

먼저 로그를 봐서 에러가 있는지 확인한다. 브라우저 콘솔에 에러가 없어도 API 로그에는 에러가 있을 수 있다.

원인을 나누는 기준

처음 보이는 증상부터 체계적으로 확인해야 문제를 좁힐 수 있다.

먼저 봐야 할 것:

• API 로그와 응답 시간
• 정상일 때의 로딩 시간과 비교
• 수정한 코드와 그 결과

빌드하고 성능 테스트하기

npm run build

프론트엔드 코드를 수정했다면 빌드해서 제대로 반영되는지 확인한다. 번들 사이즈가 너무 커졌거나 불필요한 재렌더링이 생겼을 수도 있다.

성능 확인 체크리스트

1. 같은 데이터로 증상이 다시 나오는지 확인한다
2. 로그에서 느린 부분을 찾는다
3. 공개 환경에서 실제 로딩 시간을 측정한다

작은 최적화가 쌓이면 눈에 띈다

이번에 성능을 개선했으면 어떤 부분에서 시간을 절약했는지 기록해두자. 다음 성능 개선 때 비교할 수 있다.