목록 렌더링이 느려졌을 때 해야 할 일

목록이 많아지면 성능 문제가 생긴다

사용자들이 검색해서 들어온 상황이라면 바로 재현 조건부터 잡는 편이 빠르다. 목록 성능이 떨어진 건 사용자가 직접 경험하니까 무시할 수 없다.

사용자가 보는 모습과 개발자가 보는 신호

사용자는 페이지가 느린 것만 안다. 하지만 개발자는 어디가 느린지 알아야 한다. 프론트엔드인지 API인지, 렌더링이 많은 건지 데이터 로딩이 오래 걸리는 건지 파악해야 한다.

먼저 봐야 할 것:

• 사용자가 영향을 받는 범위
• 정상일 때와 느릴 때의 로딩 시간 비교
• 코드 수정과 성능 변화 기록

빌드하고 테스트해보기

npm run build

코드를 수정했다면 반드시 빌드해서 변경사항이 반영되는지 확인한다. 프로덕션 빌드와 개발 빌드는 성능이 다를 수 있으니까.

성능 개선 체크리스트

1. 같은 데이터로 증상이 다시 나오는지 확인한다
2. 로그에서 느린 부분을 찾는다
3. 공개 화면과 빌드 결과를 확인한다

다음 최적화를 위한 기록

이번에 목록 성능을 개선했으면 어떤 부분을 고쳤고 얼마나 빨라졌는지 기록해두자. 다음에 비슷한 문제가 생길 때 처음부터 시작할 필요가 없다.