[앱삼] 8. (fullStack) feature/signUp - validation

1. 아이디어

- id, pw, email, name, aors 의 다섯가지 정보를 받는다.

- id : 5~15자 이상, pw : 특수문자 포함 등의 유효한 형식의 값만 받을 수 있도록 프론트엔드에서 제한을 둔다.

- id와 email은 중복검사 로직을 통해 Axios 요청을 통해 각각 비동기로 프론트엔드에서 검사한다.

- 유효형식과 중복이 없는 것을 확인 한 후 전체를 db생성요청한다. 

- server에서 받은 값 중 id와 email 중복 검사를 한번 더 실행하여 중복값이 존재할 경우 '이미 요청된 처리 입니다.' 라는 에러를 다시 보내주고, 에러로그에 로깅하며, 중복값이 없을 경우 db를 생성하고 201을 응답한다.

 

2. 구현(Frontend - Sign.jsx)

- ID 중복검사, Email 중복검사에 대한 state를 생성한다.

- resMessage는 사용 가능한 값인지 중복값인지를 응답 받은 메시지에서 받아와서 렌더링해주는 state다.

State 생성

 

- id와 email의 input박스는 onChange 시 특별히 중복검사를 다시할 수 있도록 isDuplicated state를 false로 바꾸어주고, resMessage도 리셋해준다.

전에 있던 함수에서 추가한다.

 

- 중복확인 버튼 클릭 시 발생하는 함수이다.

- 서버에서 res.data.stat에 중복값이 있음, 없음에 따라 false와 true를 각각 넣어서 응답해준다.

어우 더러워 리팩토링은 조금 시간이 지나서 해야겠다

 

- submit 버튼 눌렀을 때 작동하는 로직이다.

- 각각의 유효성 검사 결과가 모두 true일 경우 중복검사가 true인지 확인까지 해서 signup 요청한다.

모듈화를 하거나 observer 패턴으로 값들을 감시할 수 있지만 괜히 더 복잡해진다. 지금은 어차피 여기서밖에 안쓰니 생산성을 위해 그대로 둔다.

 

 

3. 구현(Backend - auth.js)

- User.find({$or 연산자를 통해 id와 email 중복이 있는지 검사한다.}) 

throw new Error() 메소드를 사용했었는데, 자꾸 서버가 멈추는 에러가 났다. 전역 에러핸들링 미들웨어 장착 이후에 다시 수정해야겠다.

 

util/getDuplicate.js 

중복 검사해주는 유틸. 아이디와 이메일 중복 검사 버튼에 쓰인다

 

결과는 구현 되었다.

이제 페이지 이동과 jwt 발행 후 cookie based auth 구현, 사용자가 페이지 이동 혹은 댓글/포스트 등의 활동 시 지속적으로 활용할 jwt 검증 시스템 모듈을 양쪽에 구축하고 연결하는 테스트를 진행해야겠다.

성공