I T H

로그인 및 인증 처리 완료시 리덕스 스토어에 변수 isAuth 가 true로 바뀌는 것까지 했다면 이번 챕터에서는 isAuth or Role의 값에 의해 페이지경로가 다르게 처리되는 로직을 하겠다. 즉, 관리자 페이지 or 로그인 or 로그인이 안했을경우 페이지가 각각 다르게 처리되야 하므로, redux store에 있는 값들(isAuth, role의 값)을 불러와서 header부분과 app.tsx의 route부분을 각각 처리해주자! Frontend [ src / layout / Header / index.tsx ] - 먼저 redux의 useSelector 훅을 사용해서 isAuth의 값과 role의 값을 불러온다. - auth가 true이면 로그인이 완료되었기에 마이페이지와 로그아웃이 보이게 하고, ..

이번 챕터는 로그인 로직 2번째 - 백앤드로부터 받아온 토큰을 headers의 Authorization에 넣어 백앤드로 보내고 백앤드에서 지정해놓은 secret key를 이용해 유효한 토큰인지 확인한 후 데이터를 프론트로 전달하는 단계까지 하도록 하겠다. - 로그인 뿐만 아니라 인증이 필요한 경우가 많으므로, 로그인 후에 인증요청시 토큰을 보내서 백앤드에서 유효한 토큰인지 확인하는 과정이다. - Frontend [ App.tsx ] - redux store에 저장된 데이터를 가져오기 위해 useSelector를 사용한다. 타입을 미리 지정해놓았기 때문 useAddSelector를 통해 isAuth를 불러와서 사용하도록 하였다. - isAuth 부분이 true가 되었다면 로그인이 완료되었다는 뜻이므로, 로..

회원가입을 마치고, 이제 react with typescript + node.js(mongodb)환경에서의 로그인을 구현해보자! 로그인은 사용자로부터 id와 패스워드를 받아서 백앤드로 전달하고 백앤드에서 토큰을 만들어서 다시 프론트앤드로 보내주게 된다. 그리고 받은 토큰을 가지고 headers의 authorization에 토큰정보를 넣어서 백앤드로 보낸다. 백앤드에서 secret key를 이용해서 프론트에서 받은 토큰이 유효한 토큰인지 확인후 유효하다면 사용자 데이터를 보내게된다. 이번 챕터는 백앤드에서 토큰을 받아오는 부분까지, 다음챕터부터는 나머지부분을 다뤄보도록 하겠다. - Frontend [ pages / types / login.ts ] - 로그인페이지의 타입들을 모아놓은 파일 export in..

.env는 외부 노출이 되면 안되는 코드, 즉 보안이 필요한 코드를 불러올 때 사용한다. [ .env 사용법 ] 1. ".env" 파일은 최상위 루트 파일에 위치함. 2. react 환경에서 환경변수의 보안때문에 아래와 같이 'REACT_APP'으로 시작해야 환경변수의 데이터를 불러올 수 있다. // REACT_APP_변수명= "값" REACT_APP_SERVER_URL=http://localhost:4003 - 만약 VITE를 사용한다면 VITE_변수명="값" 으로 사용하면 된다. // VITE_변수명= "값" VITE_SERVER_URL=http://localhost:4002 3. 만들어 놓은 환경변수를 불러올때는 "process.env"를 사용한다. - process.env. REACT_APP_변수..

1. onClick 이벤트의 타입 e: React.MouseEvent 2. onSubmit 이벤트의 타입 event: React.FormEvent 3. onChange 이벤트의 타입 e: ChangeEvent