BE https://github.com/ejzl521/Board-BE-NodeJS_typeORM GitHub - ejzl521/Board-BE-NodeJS_typeORM: typeORM 으로 게시판 사이트 BE 만들기 typeORM 으로 게시판 사이트 BE 만들기. Contribute to ejzl521/Board-BE-NodeJS_typeORM development by creating an account on GitHub. github.com FE https://github.com/ejzl521/Board-FE-React GitHub - ejzl521/Board-FE-React: React로 게시판 사이트 만들기 - FE React로 게시판 사이트 만들기 - FE. Contribute to ejzl5..

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개로 페이지네이션을 구현해서 사용하자 서버에서 페이징 기능을 구현했으므로 게시물 전체 갯수를 알..

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