React+REST API 게시판 구현

게시물 등록하기 페이지 구현

What to do? 게시물의 제목과 내용을 입력하여 DB에 반영하는 화면을 구현한다. 보안을 위해 HTTP Header에 jwt-token의 정보를 넘겨주는 구현해둔 axios intercepter에 api 요청을 한다. 게시물 등록하기 화면은 로그인 정보(jwt-token)가 없으면 들어갈 수 없는 화면이므로 PrivateRoute 컴포넌트로 라우팅 처리해서 로그인하는 과정을 거치게 한다. 게시물의 사진, 제목, 내용 중 하나라도 입력을 안하면 제출할 수 없도록 막고 DB에 성공적으로 데이터가 반영이 되면 url을 /board-list로 이동한다. 게시물을 등록할 때 사용할 이미지 업로더와 title, content의 input은 게시판 수정할 때 재사용할 것이므로 컴포넌트화 시킨다! 등록에 성공하면..

axios interceptor 구현하기

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

인증 처리하기+PrivateRoute+로그아웃

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..

로그인 구현 (redux-persist)

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