폼 검증 디버깅할 때 먼저 확인할 것

폼 검증 버그를 혼자 개발하면서 고칠 때는 뭔가 작동하지 않는 '느낌'으로 접근하기보다는, 관찰 가능한 증상부터 기록하는 게 훨씬 빠르다.

핵심은 버그를 하나의 덩어리로 보지 말고, 사용자가 보는 화면과 개발자 도구에서 보는 상태를 따로 나눠서 보는 것이다. 폼이 submit 되지 않으면, 먼저 이 중 뭐가 정상이고 뭐가 비정상인지 기록해둬야 다음 확인이 빨라진다.

사용자 화면에서 보이는 증상

먼저 눈에 띄는 현상부터 정리한다. 버튼이 비활성화된 상태인지, 에러 메시지가 떴는지, 아니면 아무 반응도 없는지에 따라 원인 범위가 확 줄어든다.

React 렌더링 상태 확인

사용자는 화면만 보지만, 개발할 때는 몇 가지 더 봐야 한다. 먼저 볼 것들:

• 현재 form state 값
• validation 함수가 어떤 결과를 반환했는지
• 조건부 렌더링이 제대로 작동하는지

# 개발 환경에서 빌드
npm run dev

이벤트 흐름 실제로 따라가기

사용자가 입력하면 어떤 일이 일어나는지 단계별로 확인한다. input 필드에 focus 됐을 때, 값을 입력했을 때, 마우스를 떼고 떠났을 때마다 상태가 어떻게 바뀌는지 로그로 남겨본다.

# 브라우저 콘솔에서 state 변화를 실시간으로 추적

환경 차이 확인

로컬 개발 환경과 프로덕션 빌드에서 폼 검증이 다르게 작동할 수 있다. 특히 build 과정에서 조건문이나 환경 변수가 다르게 적용될 수 있으므로, production 빌드로도 한 번 확인해봐야 한다.

모바일 뷰포트에서도 재현되는지

폼이 데스크톱에서는 잘 작동하지만 모바일에서만 문제가 생기는 경우도 있다. 브라우저 개발자 도구에서 기기별로 테스트하면서 어느 화면에서 증상이 나타나는지 확인한다.

1. 먼저 로컬 개발 환경에서 정확히 같은 조건을 재현해본다.
2. 로그에서 바뀐 값과 기대값을 비교한다.
3. 프로덕션 빌드나 실제 배포 환경에서도 같은 증상이 나타나는지 확인한다.

마지막에 확인해야 할 것

수정한 후에는 단순히 버튼이 눌리는지만 확인하면 안 되고, 실제 데이터가 제대로 전송되는지, 서버 응답이 예상대로 오는지까지 봐야 작업이 끝난다. 각 단계에서 확인한 값을 짧게라도 기록해두면, 비슷한 문제가 나올 때 재사용할 수 있다.