검색 입력이 꼬였을 때 안전하게 디버깅하기

검색 입력 상태 버그는 프론트엔드에서 가장 다루기 까다로운 문제 중 하나다. 문제 범위를 잘못 파악하면 상태 관리, 렌더링, 이벤트 핸들링 등 모든 곳이 의심 대상이 되어버린다. 효율적으로 원인을 찾으려면 체계적인 확인 순서가 필요하다.

먼저 확인할 것: 재현 조건 고정하기

버그가 일어나는 정확한 조건을 기록하는 것부터 시작한다. 모바일 폭에서만 나는지, 특정 입력값에서만 나는지, 처음 로드할 때만 나는지 구분해야 한다.

# 브라우저 개발자 도구의 Device Toolbar에서 모바일 폭 고정
# 같은 조건에서 3번 이상 반복해서 증상 재현 가능한지 확인

렌더링 상태 먼저 점검

상태 값이 올바른데도 화면에 반영되지 않으면 렌더링 조건이 문제일 가능성이 크다. 상태 관리 라이브러리(useState, Redux 등)에서 값을 제대로 가져오는지, 조건부 렌더링 로직이 맞는지 확인한다.

• 현재 상태값: React DevTools로 확인
• 정상 상태: 이전 커밋이나 다른 환경에서의 동작과 비교
• 기록할 것: 상태값, 렌더링된 DOM, 콘솔 에러

이벤트 흐름 추적

onChange, onInput, onBlur 등 검색 입력과 관련된 모든 이벤트를 나열하고 각각 정상 작동하는지 확인한다.

# 콘솔에 직접 입력해서 이벤트 핸들러 테스트
const input = document.querySelector('input[type="search"]');
input.value = 'test';
input.dispatchEvent(new Event('input', { bubbles: true }));

빌드와 실제 동작 검증

개발 환경에서는 정상이지만 빌드 후 다르게 동작하는 경우가 있다. 최적화나 번들링 과정에서 상태 업데이트 로직이 바뀔 수 있다.

npm run build
npm run start  # 프로덕션 빌드 실행

확인 완료 기준

1. 재현 조건을 명확히 설명할 수 있는가
2. 로그와 상태값으로 문제를 추적할 수 있는가
3. 정상 상태와의 차이를 구체적으로 설명할 수 있는가

이 세 가지를 모두 만족하면 원인 파악은 충분히 진행된 것이다. 작은 수정을 하나씩 시도하면서 어느 부분이 문제인지 좁혀나가는 방식이 가장 효율적이다.