React With Typescript Slack Clone Project Section1 - 로그인/회원가입

DW J·2023년 1월 1일
0

project-slack

목록 보기
3/8

회원가입

  1. 이메일, 닉네임, 비밀번호, 비밀번호확인 컴포넌트 생성
  2. 각각의 항목의 상태값을 저장할 수 있는 state생성
  3. 각각의 항목 필터 상태값 추가 - 에러 체크 (비밀번호 확인, 입력값 확인, 로그인 실패, 성공 등등)
  4. 로직에서 중복되는 값을 찾아 제거 - 커스텀 훅 생성
  5. 사용자 정보(로그인 데이터)를 프론트에서 저장하려면 상태관리(SWR, 리덕스 등) 라이브러리를 사용해야한다

커스텀 훅

리액트에서 제공하는 훅을 조합하여 새로운 훅으로 만듬

CORS 오류 해결방법

  1. 프론트엔드
    webapck devServer에서 proxy 설정 사용
    프론트에서 api로 시작하는 요청을 3095(백엔드)에서 보내는거처럼 하는 설정
    같은 localhost일때만 가능 - 실제 서버와 localhost간에는 설정으로 해결되지 않음
devServer: {
	...
    proxy: {
		'/api/': {
			target: 'http://localhost:3095',
			changeOrigin: true,
			ws: true,
		},
	},
    ...
},
  1. 백엔드
    express에서 제공하는 cors 미들웨어 사용
app.use(
	cors({
		origin: true,
		credentials: true,
	})
);

주소가 다를경우 서버에서 만든 cookie값을 프론트에 전달되지 않는데 전달할 수 있는 방법

  • axios의 withCredentials 옵션을 사용해 전달한다
// get
axios.post('url', { withCredentials: true } );

// post
axios.post('url', { data }, { withCredentials: true } );

Error: secret option required for sessions 오류

프론트에서 항목을 모두 입력하고 회원가입 버튼을 눌러 서버로 api를 요청할때 발생하는 오류
process.env.COOKIE_SECRET가 express-session에 들어가지 않아 발생하는 오류로 .env의 COOKIE_SECRET를 직접 작성

profile
잘하는것보다 꾸준히하는게 더 중요하다

0개의 댓글