2025/07 2

[React/Next.js] 이미지 첨부 시 Yup 유효성 검사로 인해 폼 제출 불가

게시글 등록/수정 폼에서 텍스트 입력은 모두 정상적으로 작동하고 유효성 검사도 잘 수행했다.그런데 '사진 첨부' 버튼을 눌러 이미지를 선택하는 순간, 활성화되어 있던 '등록하기' 버튼이비활성화되면서 폼을 제출할 수 없게 되었다. 이 문제의 핵심 원인은 클라이언트 측 유효성 검사(Validation) 로직에 있었다.더 정확히는, 이미지 미리보기를 위해 사용하는 Data URL과 Yup의 url 검증 규칙 사이의 충돌 때문이었다. 1. 이미지 선택과 Data URL 변환: 사용자가 컴퓨터에서 이미지 파일을 선택하면, 보통 즉시 미리보기를 보여주기 위해FileReader API를 사용한다. 이때 생성되는 것이 바로 data:image/png;base64,... 와 같은 형태의 Data URL이다. con..

[React/Next.js] <button> 태그 속성에 관하여

왜인지 이미지 업로드를 할때 폼 제출이 되는 오류가 있었다. 그 이유를 제미나이의 힘을 빌려 해결하였다. 제미나이가 진단한 오류의 이유는 태그의 속성에 있었다. HTML 의 기본 동작: HTML 태그는 type 속성을 지정하지 않으면 form 내에서 type="submit"으로 동작하는 것이 기본이다.(중요*)결론: 을 클릭하면, 브라우저가 "폼을 제출하라"는 명령으로 인식하여 handleSubmit이 호출되었던 것이다. 해결방법 태그의 type 속성을 type="button"으로 명시적으로 지정한다. // 수정 전 // 수정 후 태그는 괜찮은 이유: 컴포넌트는 img 태그이므로 이 문제와 무관하다.개발 습관 제안: form 태그 안에 있는 을 만들 때는 의도치 않은 제출을 막기 위해 항..