Why? 사용자가 인증이 필요한 페이지에 들어가려고 할 때 로그인을 한 다음 서버에서 jwt-token을 redux-persist에 저장해서 useSelector로 jwt-token을 받아서 그 jwt-token이 유효한 경우에만 인증이 필요한 페이지에 들어가게 한다. 하지만 클라이언트가 인증이 필요한 페이지에 들어가는 것과 별개로, 인증이 필요한 서버로 데이터를 보내거나 조작하는 API를 호출할 때 보안을 위해 interceptor를 사용해서 HTTP Authorizaition 요청 헤더에 jwt-token을 보내서 서버 측 해당 API에 요청을 하기 전에 서버 측의 미들웨어에서 이를 확인한 후 검증이 완료되면 API에 요청을 하게 한다. interceptor 구현 utils 폴더에 api.ts 파일을..

jwt-token 유효성 검증 & 해독 유틸리티 클래스 구현 인증이 필요한 게시판 추가, 수정, 삭제 & 댓글 추가, 수정, 삭제 기능을 화면을 사용할 때 사용자가 로그인을 해서 해당 기능을 사용할 때, 서버에서 리턴된 jwt 토큰이 유효한지 검증하는 부분이 필요하다. 또한, jwt 토큰을 해독해서 사용자의 ID를 알아내서 게시판과 댓글 추가시에 DB에 반영해야 한다. src폴더 아래 utils 폴더를 만들고 jwtUtils.ts 파일을 만들자. utils/jwtUtils.ts import jwtDecode from "jwt-decode"; export class jwtUtils { // 토큰 유효성 검사 static isAuth(token) { if (!token) { return false; } co..

What to do? 이메일과 패스워드를 입력받아서 로그인을 하는 화면을 만든다. 로그인을 성공하면 서버에서 jwt 토큰을 받아서 store에 저장하고 redux-persist 모듈을 사용해서 local storage에도 저장한다. 회원가입과 마찬가지로 formik과 yup 라이브러리를 사용해서 validation을 처리한다. redux-pesist redux에 저장하는것은 영구적인 저장소가 아니다. 만일 새로고침하게 되면 store에 저장된 정보는 메모리에 저장된것이기 때문에 모두 없어지게 된다. 따라서 영구적으로 저장하기 위해서는 local storage나 session storage에 저장해야 하는데 redux-persist 모듈이 그것을 도와준다. session storage는 페이지를 새로고침해..

What to do? meterial-ui의 기본적인 input을 가져다 쓰고 formik을 통해서 form의 state 관리를 하고 yup을 사용해서 form의 validation을 검증하자. form의 validation 검증이 끝나면 axios로 회원가입을 처리하는 API에 POST 방식으로 데이터를 보내서 서버에 유저의 정보를 저장한다. 사용 url: /sign-up 회원가입에 성공하면 react-toastify로 2초동안 toast 알림창을 띄우고 /login 으로 이동하게 하자! 회원가입 성공 시 DB에 반영이 되는 모습이다! 회원가입 페이지 구현 pages 디렉토리 아래 sign-up 디렉토리를 만들고 Sigup.js 파일과 singUp.scss 파일을 만들자. pages/sign-up/Si..

react-toastify https://www.npmjs.com/package/react-toastify react-toastify React notification made easy www.npmjs.com 리액트에서 toast 알림을 편하게 띄우게 할 수 있는 3rd party 라이브러리이다! 아래 명령어로 설치를 하자! yarn add react-toastify 사용법 우선 react-toastify의 css를 적용하기 위해 아래처럼 임포트 해야 한다. import 'react-toastify/dist/ReactToastify.css'; 컴포넌트를 불러온 후 이벤트에 toast() 메서드를 이용해서 toast 알림을 편하게 띄울 수 있다! import { toast, ToastContainer }..

📝 백엔드 서버 구동하기 https://duckgugong.tistory.com/category/%28typeORM%20%2B%20React%29%20%EA%B2%8C%EC%8B%9C%ED%8C%90%20%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EA%B5%AC%ED%98%84/REST%20API '(typeORM + React) 게시판 사이트 구현/REST API' 카테고리의 글 목록 duckgugong.tistory.com 우선 위 링크로 들어가서 typeORM으로 REST API를 작성한 후 서버를 구동해서 http://localhost:8080에 접속하자. https://github.com/ejzl521/Board-BE-NodeJS_typeORM GitHub - ejzl521/Boar..