React+REST API 게시판 구현/FE - React

게시판/내 게시물 페이지 구현 - 페이지네이션

What to do? 전체 게시판 페이지 구현 전체 게시물을 볼 수 있는 페이지 화면에 제목, 사진, 작성자, 작성일을 나타내자. 게시판을 map함수를 사용해서 렌더링할 때, board의 id를 key로 사용하고 게시판에 있는 목록을 클릭했을 때, 상세보기 페이지인 동적 url인 /board/:board_id 로 이동할 수 있게 하자. 로그인이 필요한 페이지가 아니므로 jwt-token을 검증할 필요가 없으므로 일반 라우팅 처리를 한다. 보안과 관련해서 request 헤더에 jwt-token에 대한 정보를 보낼 필요가 없으므로 interceptor를 사용하지 않고 axios를 사용하자. 게시물은 한 페이지당 4개로 페이지네이션을 구현해서 사용하자 서버에서 페이징 기능을 구현했으므로 게시물 전체 갯수를 알..

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

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