배포 전에 정렬 로직이 제대로 작동하는지 확인하기

배포 전 정렬 기준을 검증하지 않으면, 사용자가 보는 목록이 예상과 다르게 정렬된 채로 서비스될 수 있다. 특히 검색해서 들어온 사용자는 원래 목표한 아이템을 찾지 못할 수 있다.

재현 조건 파악

먼저 언제 정렬이 제대로 작동하지 않는지 파악해야 한다.

• 특정 필터를 적용했을 때만 문제가 생기는가?
• 데이터 크기가 일정 이상일 때만 발생하는가?
• 같은 값을 정렬할 때 순서가 뒤바뀌는가?

이런 조건들을 체크하면 원인을 빠르게 좁힐 수 있다.

프로덕션 빌드로 확인

로컬에서 dev 모드로는 잘 보이지만, 실제 배포되는 build 결과에서 문제가 생길 수 있다.

npm run build
npm run start  # 또는 해당 프레임워크의 프로덕션 시작 명령

Production 빌드에서는 최소화와 최적화가 일어나므로, 실제 서비스 환경과 같은 상태로 테스트할 수 있다.

정렬 함수 검토

JavaScript의 sort() 함수를 사용할 때 자주 하는 실수들:

// 잘못된 예: 숫자를 문자열로 정렬
arr.sort();  // 이렇게 하면 "10"이 "2"보다 앞에 온다

// 올바른 예
arr.sort((a, b) => a - b);

비교 함수의 반환값을 확인한다. 음수면 순서 유지, 양수면 순서 변경이다. 깊은 객체 비교가 필요하면, 중첩된 속성도 정확히 접근하는지 확인해야 한다.

실제 데이터로 테스트

Dev 환경의 mock 데이터로는 정상이지만, 실제 API에서 받은 데이터로 테스트하면 버그가 드러날 수 있다. 특히 null 값이나 예상 밖의 데이터 타입이 섞여 있을 때다.

// 안전한 정렬: null 체크 포함
arr.sort((a, b) => {
  const aVal = a?.score ?? 0;
  const bVal = b?.score ?? 0;
  return bVal - aVal;  // 내림차순
});

단계별 검증

1. 원래 증상을 다시 재현한다. 매번 나타나는가, 특정 조건에서만 나타나는가?
2. 로그에서 정렬 전후의 데이터를 비교한다. 어느 부분에서 잘못되었는지 파악한다.
3. 브라우저나 서버 로그에 정렬 함수를 직접 실행해보는 코드를 추가하고, 결과를 확인한다.

마무리

정렬 로직은 작게는 보이지만, 사용자 경험에 큰 영향을 미친다. 배포 전에 충분히 검증하면 배포 후 핫픽스의 부담을 크게 줄일 수 있다.