정렬이 틀렸을 때 빠르게 찾는 법

정렬 버그는 보통 세 군데서 비롯된다. 코드의 정렬 로직이 틀렸거나, 백엔드 쿼리가 잘못되었거나, 배포 환경의 설정이 로컬과 달라서다. 처음부터 세 군데를 다 보려고 하면 오히려 시간이 더 오래 걸린다.

먼저 현재 상태를 정확히 기록하는 것부터 시작한다. 정렬이 어느 칼럼 기준인지, 오름차순인지 내림차순인지, 어디서는 맞는지 어디서는 틀렸는지를 써둔다. 같은 증상이 반복되는지도 중요하다.

빌드해보고 로컬에서 확인

가장 먼저 해야 할 일은 현재 코드를 다시 빌드해보는 것이다.

npm run build

로컬 환경과 배포 환경의 차이 때문에 같은 코드도 다르게 동작할 때가 있다. 빌드 단계에서 뭔가 걸리거나 경고가 나온다면 그걸 먼저 해결하자. 불필요한 수정을 줄일 수 있다.

정상 상태를 정의하기

정렬이 "정상"이라는 것이 정확히 뭔지 정해야 한다. 전체 목록을 가져왔을 때 첫 번째 항목이 뭐고, 마지막이 뭔지 써둔다. 같은 값을 가진 항목들은 어떤 순서로 나오는지도 확인한다. 이렇게 기준을 정해둬야 나중에 결과가 맞는지 빨리 판단할 수 있다.

로그와 실제 응답을 비교

화면에만 의존하지 말고, 브라우저 개발자 도구에서 실제 API 응답을 본다. 응답에서 정렬 순서가 맞는가? 그렇다면 프론트엔드 렌더링 과정에서 뭔가 바뀌었을 가능성이 크다. 응답 자체가 틀렸다면 백엔드 쿼리를 봐야 한다.

수정 후 재확인

한 가지만 고친다. 정렬 칼럼, 정렬 방향, 페이지네이션 등 여러 설정을 한 번에 바꾸면 뭐가 문제인지 알 수 없다. 한 가지 바꿀 때마다 실제 화면, 빌드 결과, API 응답까지 다시 확인한다. 이렇게 하면 다음 번에 비슷한 문제가 나올 때 훨씬 빨리 해결할 수 있다.