[25] 회원가입 페이지(닉네임입력) 구현

[dev-allenk]

구현사항

• 임시토큰 유효성 검사 api요청
  • 응답에 담긴 provider 값으로 어떤 계정으로 로그인하는지 화면렌더링(ex: 카카오, 페북, 인스타)
  • 토큰 유효하지 않은경우 리디렉트 되는 기능은 미구현
• 클라이언트단 닉네임 유효성 검사
  • 영문 소문자로 시작하는 4~15자 영문 소문자, 숫자, 하이픈, 언더바 가능
  • 공백 불가
  • 현재 가능한 케이스 : 1) only 영문소문자, 2) 영문 소문자 + (숫자, 하이픈, 언더바 조합)
  • 디바운스 처리(300ms)
• 닉네임 중복검사 api요청
  • 클라이언트단 유효성 검사를 통과한 경우만 fetch 요청하여 fetch요청 최소화

참고사항

• git checkout feat/origin/25-signup-page
• 다음 회의 때 닉네임 조합을 어떻게 제한할지 회의해보아요.
• fetch요청을 최소화하기 위해서 클라이언트단 유효성 검사를 넣었는데 지금은 버그가 있어요..
  • 서버 응답이 느려서, '닉네임 가능 여부'를 서버로부터 받기 전에 입력을 다시 시작한 경우, 클라이언트단 유효성검사에서 패스하지 못하면 fetch요청을 취소할 수가 없어서 나중에 온 응답이 화면에 반영 돼요.
  • ex) 1) 유효한 닉네임을 입력한다. 2) fetch 요청을 보낸다. 3) 서버에서 응답 오기전에 입력을 시작한다. 4) 공백포함, 글자수 초과 등 클라이언트 유효성검사에서 fail하는 입력을 한다. 5) fail하는 즉시 안내메시지가 렌더링된다. 6) 이후 서버에서 응답이 오면 사용가능하다고 렌더링된다.
  • 해결방법은 1) 유효성검사를 서버에서만 하도록 하거나, 2) axios나 RxJs 같은 라이브러리를 사용하면 취소가 가능하대요.
  • 라이브러리 사용하는 쪽으로 먼저 살펴볼게요.

해결된 이슈 번호

• resolved #56

[dev-allenk]

닉네임 유효성 검사를 별도 컴포넌트로 분리할걸 그랬네요. 그랬으면 프로필 편집 페이지에서도 쓸 수 있을텐데.. 장소검색 구현하고 리팩할게요.

[dev-allenk]

회원가입기능 테스트를 위해서 여기까지 머지된 거 배포하도록 할게요.