- 이메일, 닉네임, 비밀번호, 비밀번호확인 컴포넌트 생성
- 각각의 항목의 상태값을 저장할 수 있는 state생성
- 각각의 항목 필터 상태값 추가 - 에러 체크 (비밀번호 확인, 입력값 확인, 로그인 실패, 성공 등등)
- 로직에서 중복되는 값을 찾아 제거 - 커스텀 훅 생성
- 사용자 정보(로그인 데이터)를 프론트에서 저장하려면 상태관리(SWR, 리덕스 등) 라이브러리를 사용해야한다
리액트에서 제공하는 훅을 조합하여 새로운 훅으로 만듬
devServer: {
...
proxy: {
'/api/': {
target: 'http://localhost:3095',
changeOrigin: true,
ws: true,
},
},
...
},
app.use(
cors({
origin: true,
credentials: true,
})
);
주소가 다를경우 서버에서 만든 cookie값을 프론트에 전달되지 않는데 전달할 수 있는 방법
// get
axios.post('url', { withCredentials: true } );
// post
axios.post('url', { data }, { withCredentials: true } );
프론트에서 항목을 모두 입력하고 회원가입 버튼을 눌러 서버로 api를 요청할때 발생하는 오류
process.env.COOKIE_SECRET가 express-session에 들어가지 않아 발생하는 오류로 .env의 COOKIE_SECRET를 직접 작성