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

기타 추가 사항

Favicon / OG tag / title 변경하기 이제 프로젝트의 기능을 모두 구현했으므로 Favicon과 OG 태그, 브라우저에 보일 프로젝트의 제목을 설정하자. public 디렉토리 아래의 index.html 파일을 아래와 같이 수정해보자 또한 반응형 웹 어플리케이션을 사용하기 위해 initial-scale=1.0인 메타 태그도 하나 추가하자 전체 넓이를 디바이스의 넓이로 사용한다는 의미이다! 나는 아래 링크에서 간단하게 이모지를 파비콘으로 사용했다! https://favicon.io/emoji-favicons/memo Favicon.io - The Ultimate Favicon Generator (Free) With Favicon.io you can quickly generate a favico..

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

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