컴포넌트를 분리했을 때 폼이 불편해지면

폼 컴포넌트를 분리하면서 입력이 래그되거나 값이 제대로 반영되지 않는 경험을 했다. 로컬에서는 눈에 띄지 않지만 배포 후 사용자 피드백을 받으면 문제가 분명해진다.

혼자 개발할 때는 확인한 값과 수정한 값을 따로 기록해야 한다. 그렇지 않으면 무엇이 효과가 있었는지 알 수 없다.

검색해서 온 상황 정리하기

인터넷에서 찾은 해결책도 context가 다르면 도움이 안 될 수 있다. 먼저 내 상황을 정확히 파악하자.

• 모바일 화면 확인
• 정상일 때의 프론트엔드 상태
• 기록할 사항: 명령어 출력, 상태 코드, 설정 변경사항

이벤트 흐름 따라가기

폼 입력이 불편하면 대부분 이벤트 핸들러나 상태 업데이트 흐름에 문제가 있다.

npm run build
# 브라우저에서 모바일 폭과 키보드 입력 흐름을 확인한다

재현과 비교

1. 같은 조건에서 불편함이 반복되는지 확인
2. 로그와 응답에서 변화 정리
3. 공개 환경에서 최종 테스트

다음에 비슷한 증상이 나오면 먼저 현재 값을 기록하고 하나씩 비교하면 된다.