상태 목록 조회 성능이 갑자기 느려졌을 때

사용자들이 목록 페이지를 열 때마다 3초 이상 기다린다는 보고가 들어왔다. 어제는 괜찮았는데 갑자기 느려진 거다.

처음엔 그냥 API가 느린 줄 알았는데, 알고 보니 로컬에서만 빨랐다. 배포 환경 데이터가 많아졌거나, 쿼리가 최적화되지 않았거나, 아니면 프론트엔드 렌더링 자체가 문제였다.

로컬과 배포 환경의 데이터량 비교

먼저 각 환경에서 API 응답 시간을 직접 측정해본다. 로컬 개발 서버에서는 빠른데 실제 배포 환경에서는 느린 경우가 대부분이다.

• 로컬 환경: 테스트 데이터가 적으므로 빠르다
• 배포 환경: 실제 데이터 수가 훨씬 많다
• 네트워크: 로컬은 localhost지만, 배포는 실제 네트워크 지연이 있다

성능 측정하기

브라우저 개발자 도구에서 네트워크 탭을 열고 실제 요청을 본다.

npm run build
# 프로덕션 빌드 후 배포 환경에서 테스트
# 모바일 기기에서도 확인 (네트워크 상태 시뮬레이션)

API 응답 시간, 페이로드 크기, 그리고 프론트엔드에서 렌더링하는 데 걸리는 시간을 따로 본다. 둘 중 어디가 병목인지 알아야 한다.

렌더링 성능 확인

React DevTools에서 컴포넌트 렌더링 시간을 측정한다. 리스트 아이템이 1000개라면, 각 아이템을 그리는 데 얼마나 걸리는지 본다.

쿼리와 데이터베이스

서버 로그에서 실제 쿼리 실행 시간을 본다. 특히:

• 필터링이 제대로 작동하는지
• 페이지네이션이 있는지 (있어야 한다)
• 인덱스가 설정됐는지

가장 빠른 해결책들

1. API 응답 자체가 느림: 백엔드 쿼리 최적화 필요
2. 렌더링이 느림: 가상 스크롤(virtual scroll) 도입, memo() 사용
3. 번들 크기: 빌드 결과 검토, 불필요한 라이브러리 제거

이 중 가장 빠르게 테스트할 수 있는 건 프론트엔드 렌더링 최적화다. 모바일 환경에서 느린지 직접 확인해야 한다.

마지막으로, 성능 문제는 원인과 결과를 따로 생각해야 한다. 사용자는 "느리다"고 보고하지만, 실제 원인은 API, 렌더링, 네트워크 중 하나다. 각각을 따로 측정해야 다음 번에 같은 실수를 반복하지 않을 수 있다.