React+REST API 게시판 구현

댓글 보기(페이지네이션), 추가 구현

What to do? 게시판 상세 보기 페이지(/board/:board_id)에 댓글 기능을 구현해보자. 댓글 기능은 게시판 상세보기 페이지 안에 구현할 것이므로 별도의 라우팅으로 처리하지 않고 컴포넌트(Comments.js)를 만들어서 게시판 상세 보기 컴포넌트(Board.js)에 추가한다. 게시판 상세 보기 컴포넌트에서 댓글 기능 컴포넌트에 해당 게시판(board)의 id를 넘겨줘서 댓글 기능 컴포넌트에서 해당 board의 id를 가지고 DB에서 해당 게시판의 댓글을 가져와서 렌더링하거나 추가 기능을 수행할 수 있도록 하자. 댓글 목록은 props로 해당 게시판의 id를 받아서 DB에서 조회한 후에 화면에 렌더링된다. 댓글을 추가하려면 로그인을 해야하기 때문에 로그인이 되어있지 않아서 jwt-toke..

게시물 수정, 삭제 구현

What to do? 게시물 수정 게시판 작성자가 로그인을 해서 해당 게시판의 상세보기 페이지에 접속해서 수정, 삭제를 하려고 하는 경우를 구현하자. 게시판 상세 보기 페이지에서 수정 버튼을 클릭하면 게시판 수정 페이지(/edit-board/:board_id)로 이동해서 해당 게시판을 수정할 수 있게 하고 수정이 완료되면 해당 게시물 상세보기 페이지(/board/:board_id)로 이동시키자. 게시판 수정 페이지는 로그인한 사용자만 이용할 수 있으므로 PrivateRoute로 처리하고 HTTP 요청을 미리 구현해 둔 http 헤더에 jwt-token을 보내는 api interceptor를 사용하자. 게시물 삭제 게시판 상세보기 페이지에서 삭제 버튼을 클릭하면 해당 글을 삭제하는지 물어보는 모달창을 띄우..

게시물 상세보기 페이지 구현

What to do? 게시판 페이지와 내 게시물 페이지에서 하나를 선택해서 클릭했을 때 해당 글의 상세 보기 페이지로 이동하도록 하자. 상세보기 페이지에는 작성자, 작성일자, 제목, 내용, 수정, 삭제 버튼이 포함되어 있다. 해당 글의 작성자가 로그인을 했을 때만 수정, 삭제 버튼이 보이게 하자. 로그인을 한 사용자의 jwt-token에서 user의 ID를 추출한 후, board(해당 글)의 작성자(user의 id)를 비교했을 때 같으면 수정, 삭제 버튼이 보이게 한다. id는 DB에 저장되어 있는 유저의 고유 번호이다. 게시판 상세보기의 경우는 URL이 고정되어 있지 않기 때문에 /board/:board_id 로 동적 라우팅을 설정하자. :board_id에서 board_id는 DB에 저장되어 있는 bo..

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

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