웹 배포 전 배열 필터링 로직 검증하기

웹 애플리케이션을 배포할 때 배열을 다루는 로직에서 자주 버그가 생긴다. 로컬에서는 완벽하게 작동하던 필터가 배포 후 제대로 동작하지 않으면, 몇 가지를 확인해야 한다.

빌드 과정 점검

먼저 프로덕션 빌드를 해본다.

npm run build

dev 모드와 build 모드는 다르다. Dev 모드에서는 소스맵이 있어서 추적이 쉽지만, 프로덕션 빌드에서는 코드가 최소화되고 트리셰이킹으로 일부 코드가 제거될 수 있다. 배열 필터링 함수가 실제로 번들에 포함되는지, 타입 검사가 정상적으로 이루어지는지 확인한다.

환경 차이 확인

로컬 환경과 운영 환경의 설정 차이도 영향을 미친다.

• Node 버전: 로컬과 배포 서버의 Node 버전이 다르면 polyfill 동작이 달라질 수 있다.
• 환경 변수: API 엔드포인트, 캐시 설정 등이 환경마다 다를 수 있다.
• 네트워크: 로컬에서는 API 응답이 빠르지만, 실제 환경에서는 지연이 생겨 비동기 로직이 다르게 작동할 수 있다.

배열 필터링 검증 체크리스트

1. 필터 대상이 정말 배열인지 확인한다. API에서 받은 데이터가 단일 객체일 수도 있다.
2. 필터 함수의 조건문을 다시 읽어본다. off-by-one 에러나 논리 실수가 숨어 있을 수 있다.
3. 빈 배열일 때 동작을 명시적으로 테스트한다. 빈 배열에 필터를 적용했을 때 undefined가 반환되지 않는지 확인한다.
4. 실제 배포 환경의 데이터로 테스트한다. 로컬 mock 데이터와 실제 API 응답이 다를 수 있다.

디버깅 방법

배포 후 문제가 생기면, 브라우저 개발자 도구의 콘솔 탭에서 배열과 필터 결과를 직접 출력해본다.

console.log('원본 배열:', arr);
console.log('필터 결과:', arr.filter(item => condition));

프로덕션 환경에서도 일시적으로 console.log를 추가한 뒤 배포한 후 사용자 콘솔에서 출력을 확인할 수 있다.

마무리

한 번에 여러 코드를 수정하지 않는 것도 중요하다. 필터 로직만 바꿨는데도 다른 부분이 고장 나 보일 수 있기 때문이다. 작은 변경을 하나씩 확인하면서 진행하면 원인을 더 빨리 찾을 수 있다.