페이지네이션 구현 후 배포했을 때 확인할 것

페이지네이션을 새로 구현했거나 변경한 후 배포했다면 로컬과 운영 환경에서 다르게 동작할 수 있다. 페이지 이동이 제대로 안 되거나, 데이터가 중복으로 보이거나, 마지막 페이지에서 에러가 나는 경우들이 있다. 이런 문제들을 빠르게 찾으려면 확인하는 순서를 정해두는 게 효율적이다.

먼저 빌드 결과를 확인한다

페이지네이션 코드가 실제로 번들에 포함되었는지, 빌드 중에 에러가 없었는지를 확인한다.

npm run build

빌드 로그에서 경고나 에러 메시지가 있다면 그것이 문제의 원인일 가능성이 높다. 특히 페이지네이션 관련 상태(state)나 API 호출 부분에서 경고가 나온다면 반드시 확인해야 한다.

정상 상태의 요청/응답과 비교한다

문제가 나는 페이지에서의 요청과 정상 페이지에서의 요청을 나란히 놓고 비교한다. 특히 다음 항목들을 확인한다.

• 페이지 번호 파라미터가 올바르게 전달되는가
• 응답 body의 데이터 개수가 예상과 일치하는가
• 총 페이지 수 정보가 올바르게 돌아오는가

한 항목씩 확인하면 어느 부분에서 문제가 발생하는지 범위를 좁힐 수 있다.

로그와 응답에서 바뀐 부분을 기록한다

문제가 발생했을 때의 로그를 남긴다. 예를 들어 첫 페이지는 정상이지만 두 번째 페이지에서 에러가 나는 경우라면, 두 번째 페이지 요청 시점의 로그를 확인하고 첫 페이지의 로그와 비교한다. 응답 코드나 에러 메시지의 차이를 한 줄로 정리하면 원인 후보가 자연스럽게 줄어든다.

설정 확인: 페이지 크기, 캐시 등

페이지 크기 설정이 로컬과 운영에서 다를 수 있다. 예를 들어 로컬에서는 한 페이지에 10개씩 보이도록 했는데 운영에서는 50개씩 설정되어 있다면, 총 페이지 수가 달라진다.

# 운영 환경의 설정을 확인한다
grep -r "ITEMS_PER_PAGE" /path/to/config

실제 사용자 환경에서 한 번 더 검증한다

로그와 응답이 모두 정상이라고 해서 사용자가 보는 화면이 정상인 것은 아니다. 실제로 공개 URL에서 여러 페이지를 넘어가며 데이터가 올바르게 보이는지, 페이지 이동이 부드러운지를 확인한다.

이 확인 과정을 다음번을 위해 짧게 남긴다

이번에 확인한 빌드 결과, 요청/응답 상태, 설정 차이를 메모로 남겨두면 다음에 페이지네이션 문제가 발생했을 때 빠르게 대응할 수 있다.