.gif&blockId=743d12a5-f17c-4b91-a76d-8a3aa6fd4c06)
.png&blockId=db39dd87-0c85-417c-b9c4-779658678216)
.png&blockId=d53eb714-6b1e-463d-ba1d-14113e381ac7)
.png&blockId=1dd609bf-9a9e-4c33-a196-df5abfe76109)
3.1.3 회원가입
•
회원가입 페이지에서는 유효성 검사가 로그인 페이지와 조금 다르게 진행됩니다.
•
이메일 주소 또는 비밀번호를 입력하고 입력창에서 포커스를 잃으면 바로 유효성 검사가 진행되고 통과하지 못한 경우 경고 문구가 각 입력창 하단에 표시됩니다.
•
이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우, 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
•
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색 #DBDBDB → 주황색 #F26E22)
•
작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 폼이 나타납니다.
form 유효성 검사
1.
이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우, 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
2.
진행 시점 : 입력창에서 포커스를 잃으면 바로 유효성 검사가 진행되고 통과하지 못한 경우 경고 문구가 각 입력창 하단에 표시됩니다.
3.
다음 버튼 활성화
•
작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며,
•
다음 버튼을 클릭하면 프로필 설정 폼이 나타납니다.
새로 알게된 사실 / 유용한 내용
•
포커스가 아웃될 때 이벤트 종류 → onBlur
•
button 에 disabled 속성이 있었다.
•
document.querySelector 대신 useRef 사용
•
useEffect로 버튼 disabled 속성 관리
•
label에 for 대신 htmlFor 속성 사용할 것 권장
어려웠던 부분
useEffect(() => {
const getMsg = async () => {
setUserData(idInput.current.value)
const res = await axios.post('https://mandarin.api.weniv.co.kr/user/emailvalid', {
"user":{
"email": userData
}
})
setResMsg(res.data)
}
getMsg()
}, [userData, resMsg])
JavaScript
복사
