회원가입 페이지 UI 생성하기
위와 같은 다지인이 목표
기본 입력 틀 갖춘 다음
div 단 복사해서 email, name, password 도 같이 생성
회원가입 버튼 만들기
아이디가 있다면 로그인 페이지로 가게 라우팅
React-Hook-Form
react-hook-form 을 이용한 유효성 체크 렌더링도 효율적으로 되게함.
npm install react-hook-form
useform를 사용하여 from을 관리하는 객체 선언
register : input 관련 함수
handlesubmit : 제출 관련 함수
errors: form 입력값의 유효성 결과값을 저장하는 객체
reset : 제출시 초기화관련 함수
유효성 체크를 위한 객체 생성
유효성 체크 등록
에러가 있을 경우 에러 표시
Axios instance
promise API 를 활용하는 HTTP 비동기 통신 라이브러리이다.
npm install axios --save
vite 에서 환경 변수 사용시 import.meta.env.환경변수이름
회원가입 기능 생성하기
백엔드에서 받아온 데이터를 리덕스 store에 넣어줄 것이기 때문에
action을 dipatch하면 reducer에 전달 되기 전에
비동기 미들웨어을 이용해서 요청을 보내고 그 응답인 response.data 즉 action의 payload를 리듀서가 처리한다.
dispach 생성
비동기 통신 함수 작성
userSlice에 등록
pending은 액션이 아직 실행되지 않았음을 나타냄
fulfilled은 액션이 성공적으로 실행되었음을 나타냄
rejected는 액션이 실패했음을 나타냄.
react toast 사용하기
성공이나 실패시 화면에 진행 로딩 상황 보여주기
npm install react-toastify
register route 생성하기 //백엔드
라우트 생성 후 데이터 베이스에 저장
여기서 아래와 같은 에러 발생.
user is not allowed to do action [insert] on [test.users]
몽고디비 유저 권한 부여 후 해결.
잘 저장 된것을 확인
회원가입 시에 비밀번호 암호화 적용하기
데이터 베이스로 save 하기 이전에 모델 생성 이전에 작성한 pre 로 묶인 작업이 실행된다.
암호화가 된 비밀 번호가 데이터베이스에 저장되는 것을 확인