검색 UI 응답이 늦을 때 원인 찾기

검색 UI가 늦게 반응하면 바로 코드 수정부터 시작하는 실수를 했다. 먼저 현상을 정확히 파악해야 다음 확인이 빨라진다.

현상 재현하기

우선 문제를 일관되게 재현할 수 있는지 확인한다. 매번 나타나는지, 특정 상황에서만 나타나는지가 중요하다. 캐시가 끼어 있을 수 있으니 개발자 도구를 열고 캐시 비활성화 상태에서 테스트한다.

# 로컬 빌드 후 확인
npm run build
npm run start

브라우저 도구로 보기

Network 탭에서 실제 요청-응답 시간을 본다. "검색" 입력 후 서버 응답까지 걸린 시간이 얼마나 되는지 기록해둔다. 1초 이상이면 서버 문제일 가능성이 높다.

Performance 탭에서 Task 실행 시간도 확인한다. JavaScript 처리에 100ms 이상 걸리면 클라이언트 렌더링 비효율을 의심한다.

로컬과 운영 비교

로컬에서는 빠른데 운영 환경에서만 느리다면 환경 차이를 봐야 한다:

• 데이터베이스 인덱스 상태
• API 서버 리소스 (CPU, 메모리)
• 네트워크 지연 (CDN, DNS, 라우팅)
• 캐시 레이어 동작 여부

각각 따로 테스트해보면서 어디서 시간이 나가는지 점점 좁혀간다.

가장 작은 테스트

검색 결과 데이터가 너무 많으면 느리다. 조건을 더 좁혀서 5개 정도만 반환하게 한 후 다시 테스트한다. 그래도 느리면 원인은 쿼리 자체다. 빨라지면 결과 처리 방식을 봐야 한다.

쿼리 실행 시간도 데이터베이스 도구에서 직접 확인한다.

# 데이터베이스에서 직접 검색 쿼리 실행 시간 측정

기록 남기기

문제를 해결한 후에라도 다음을 기록해둔다:

• 문제 증상 (어디서 늦었는가)
• 원인 (무엇 때문인가)
• 해결 방법 (어떻게 고쳤는가)
• 같은 상황을 다시 만들지 않기 위한 체크 항목

작은 것이라도 남겨두면 다음에 비슷한 문제가 나올 때 훨씬 빨리 처리할 수 있다.