리스트 성능이 떨어질 때 확인하는 순서

웹 애플리케이션에서 리스트 렌더링 성능 문제는 사용자 경험에 직접 영향을 미친다. 로컬 개발 환경과 운영 서버의 차이, 데이터량의 차이, 브라우저 캐시 등이 복합적으로 작용한다. 운영 중에는 작은 이상 신호도 빨리 분리해서 봐야 다음 문제로 번지는 것을 막을 수 있다.

사용자가 보는 증상 기록하기

리스트가 느리다는 신고가 들어왔을 때 정확히 어느 부분이 느린지 확인한다. 초기 로드? 스크롤? 페이지 이동? 각각의 원인이 다르기 때문이다.

• 첫 로드 시간
• 스크롤 프레임률
• 페이지 전환 시간
• 특정 작업 후 반응 속도

개발자 도구로 신호 확인

콘솔, 네트워크, 성능 탭에서 의심스러운 부분을 찾는다.

npm run build
# 프로덕션 빌드 후 서버에서 실행하면 로컬과의 차이를 확인할 수 있음

환경 차이 확인

로컬 개발 환경에서는 데이터가 적고 네트워크 지연이 없다. 운영 서버에서는 데이터가 수천 개, 수백만 개일 수 있다. 같은 쿼리라도 결과 크기가 다르면 성능이 다르다.

• 확인할 것: 응답 크기, 렌더링 시간, DB 쿼리 시간
• 비교 기준: 이전 정상 상태와의 차이
• 기록할 것: 로그, 응답 시간, 사용자 수

단계적 개선

성능을 개선할 때 한 가지씩만 변경한다. 무한 스크롤 도입? 가상 스크롤? 페이지 크기 조정? 각 변경의 효과를 측정해야 한다.

# Chrome DevTools Performance 탭에서 성능 프로파일링
# 또는 lighthouse로 성능 점수 확인

완료 기준

1. 증상을 시간과 함께 설명할 수 있는가
2. 로그에서 병목 지점을 찾을 수 있는가
3. 개선 전후 성능을 수치로 비교할 수 있는가

성능 최적화는 추측이 아니라 측정을 기반으로 진행해야 의도하지 않은 버그를 줄일 수 있다.