테이블 렌더링이 느릴 때 확인하는 디버깅 순서

로컬에서는 잘 돌던 테이블 화면이 배포 후 느려지는 경험은 많을 것 같다. 문제는 원인이 화면 자체일 수도 있고, 데이터 로딩일 수도 있고, 빌드 최적화가 덜 되었을 수도 있다는 점이다. 한 번에 모든 파일을 의심하기보다는 체계적으로 접근하는 게 시간을 절약한다.

먼저 재현 조건 확인하기

"느려졌다"는 말이 정확히 무엇인지부터 명확히 해야 한다. 페이지 로드 시간인지, 스크롤할 때인지, 데이터 필터링 시 인지 확인한다. 같은 환경(브라우저, 네트워크 상태)에서 여러 번 확인해 일관성이 있는지 본다.

빌드 상태 확인

로컬과 운영의 첫 번째 차이는 빌드 최적화다. 변경한 코드가 제대로 번들링됐는지, 코드 스플리팅이 작동하는지 확인해야 한다.

npm run build

빌드 로그에서 경고나 에러가 있는지 본다. 특히 테이블 관련 라이브러리가 정상적으로 번들에 포함됐는지 확인한다.

네트워크와 응답 확인

테이블 데이터를 로드하는 API 호출이 느린 건 아닌지 확인한다. 브라우저 DevTools의 Network 탭에서 응답 시간과 데이터 크기를 본다.

• 응답 코드가 200인지 확인
• 응답 시간이 합리적인 범위인지
• 데이터 크기가 예상과 맞는지

정상 상태 기준 설정

"언제부터 느려졌는지" 아는 것도 중요하다. 최근 배포 전후로 비교하거나, 운영 서버와 스테이징 환경을 비교해본다.

수정 후 검증

원인을 찾았다면 하나씩만 수정한다. 여러 부분을 동시에 고치면 무엇이 진짜 원인인지 구분하기 어렵다. 수정 후에도 처음 재현 조건에서 다시 느려지는지 확인한다.

마지막으로, 작은 확인이 쌓이면 원인은 자연스럽게 드러난다. 관련 기록을 조금이라도 남겨두면 다음 에러는 훨씬 빨리 해결할 수 있다.