Sign-in에 이어 오늘은 드림카카오팀의 따봉도치 갓연성님👍의 Sign-up validation code를 공부해보자!

1. Sign-Up validation는 어떻게 생겼나?

기본적으로 선택사항 4가지, 필수사항 3가지로 나뉘어 있고, 가장 상단에는 전체를 선택 및 해제 할 수 있는 모두 동의 버튼이 있다.

간단해 보이지만 실제로 구현해보려고 하면 생각처럼 쉽게 되지 않는 바로 그런 기능이라고 할 수 있다.

2. Code의 짜임새는 어떤가?

일단 state를 살펴보자.

1. idValue: 가입 시 기입하는 아이디가 저장되는 state다.

2. pwdValue: 가입 시 기입하는 password가 저장되는 state다.

3. pwdCheckValue: pwdCheckValue에 저장된 비밀번호 값과 처음 입력된 pwdValue를 비교하는데 사용된다.

4. nameValue: 닉네임 값이 저장된다.

5. phoneValue: 전화번호 값이 저장된다.

6. idErrorText: id 양식에서 벗어난 값이 입력될 시 표시될 에러메세지다.

7. pwdErrorText: password 양식에서 벗어난 값이 입력될 시 표시될 에러메세지다.

8. isConfirmForm: 휴대폰 번호를 입력하고 인증번호를 받을 수 있는 버튼의 toggle 기능을 컨트롤하는 state다.

9. isModal: 이미 가입이 된 회원 아이디가 입력된 경우 발생하는 이벤트를 관리하는 state다.

state를 살펴 보았으니, 이제 sign-up 기능의 핵심이 되는 함수 몇 가지를 살펴보자.

위 이미지에서 보여지는 validata 함수는 user가 가입단계에서 입력한 idValue, pwdValue, pwdCheckValue의 3가지 state를 사용해 기본적인 validation을 수행하고 캐이스 별로 100, 200, 300, 400으로 지정된 안내메세지를 화면에 렌더링한다.

또 다른 핵심이 되는 함수는 아래 보이는 handleClick 함수다.

errorText 값이 false 일때, 한마디로 user가 기입한 input에 에러가 전혀 존재하지 않을때, 백엔드와 약속한 키값(email, password, name)으로 state에 저장한 id, password, password confirmation 값을 전달한다.

그리고 response로 SUCCESS라는 message 라는 값을 수신하면 sign-in page로 넘어가고 isModal state 값이 false로 유지되면서 id 중복 메세지가 작동하지 않는다.

반면, 만약 errorText 값이 true라면, 함수 내에서 선언한 idPwdStatus 변수값을 erroText에 담겨진 에러메세지로 재할당한다.

3. 느낀점

코딩이 어렵다고 느껴질 때가 있다면 아마 그건 당시 작성중이거나 접하고 있는 코드 그자체 혹은 개념에 익숙하지 않아서 일것이다.

저번 포스트를 통해서 Sign-in validation에 대해서 공부를 좀 해봤다고 Sign-up validation은 조금 더 빠르게 이해가 된 것 같다. 다른듯 비슷한 구석이 많았던 것 같다.

어렵지만 새로운 개념을 배우고 이해했을때 오는 만족감이 역시 큰것 같다.