배열 필터링이 제대로 안 될 때 확인하는 과정

배열을 필터링하는 로직은 간단해 보이지만, 복잡한 조건이 여러 개 있으면 자주 실수한다. 로컬에서는 테스트하는 데이터가 작아서 괜찮지만, 실제 대량 데이터에서 이상한 결과가 나올 수 있다.

목표 명확히

"필터링 결과가 이상하다"는 것을 구체적으로 정의한다. 결과가 너무 많은가, 너무 적은가, 아예 다른 데이터가 나오는가.

현재 상태 파악

작은 샘플 데이터로 먼저 테스트한다. 5개의 항목만으로 로직이 맞는지 본 후, 실제 데이터로 테스트한다. 로그를 찍어서 필터링 과정의 각 단계를 추적한다.

비교 기준 설정

정상이라고 판단하는 기준을 명확히 한다. 예를 들어 "가격이 10000 이상이고 카테고리가 A인 것"이라면, 손으로 세어봐서 몇 개가 맞는지 확인한다.

설정 확인과 수정 순서

npm run build

빌드했을 때 경고가 없는지 본다. 필터링 로직이 번들에 제대로 포함되는지 확인한다.

수정 순서

필터 조건을 하나씩 추가하거나 제거해서 어디서 문제가 생기는지 찾는다. "가격 필터는 맞는데 카테고리 필터가 이상하다" 같은 식으로 좁혀나간다.

확인 결과

로그와 실제 화면의 결과를 비교한다. 콘솔에서는 맞는 데이터가 나오는데 화면에는 안 보이는 경우도 있다. 그럼 렌더링 부분을 확인해야 한다.

다음 액션

수정 후에도 다양한 케이스에서 테스트한다. 빈 배열, 조건에 맞는 항목이 하나인 경우, 전부 맞는 경우 등 가능한 모든 상황을 본다.

마지막으로 어떻게 고쳤는지 기록해두면, 비슷한 필터링 문제가 생겼을 때 시간을 절약할 수 있다.