전체 글

[ 클라이언트 ] BoardView.jsimport Comment from './Comment';   Comment.js  게시물 ID를 props로 받습니다.   상태 변수 let [newComment, setNewComment] = useState(''); // 댓글 입력 필드의 현재 값을 저장 let [comments, setComments] = useState([]); // 해당 게시물과 관련된 댓글 목록을 저장 useEffect 컴포넌트가 마운트될 때 실행되는 useEffect 훅입니다. 댓글을 가져오는 fetchComments 함수를 호출합니다. useEffect(() => { fetchComments(); }, []);  댓글을 가져오는 비동기 함수요청..

좋아요 기능 구현한 것을 기록해보겠습니다!먼저, 게시글 좋아요 기능을 구현하기 위해서 진행단계를 생각해봤습니다.1. 좋아요 버튼 추가2. 좋아요 상태 관리 -> 한 번 누르면 '좋아요'                                -> 한 번 또 누르면 '좋아요 취소'3. 좋아요 API 호출   [ 클라이언트 ] BoardView.js 먼저 좋아요 여부의 상태를 관리하기 위해 useState훅을 사용해줍니다.let [isLiked, setIsLiked] = useState(false); // 좋아요 여부 상태 그리고 리턴문 안에 좋아요 수를 표시해주는 부분을 작성해줍니다. 🖤좋아요 ..

게시판의 기본 CRUD 기능은 끝났으니 이제 부가적인 기능을 넣어보겠습니다.부가적인 기능으로는 조회수, 좋아요, 댓글, 대댓글 정도를 구현해 볼 생각이구요.먼저 조회수 기능부터 추가해보겠습니다.   [ 클라이언트 ] BoardList.js   BoardView.js 조회수를 출력해줄수있는 부분을 작성해줍니다.     [ 서버 ]  BoardEntity.java columnDefinition = "integer default 0”조회수의 기본값은 0 이라는 코드를 추가해줍니다. BoardDTO.java 추가 X  BoardRepository.java package com.example.demo.repository;import com.example.demo.entity.BoardEntity;import or..

[ 클라이언트 ] BoardView.js // 게시글 삭제 let del = () => { axios.delete(`http://localhost:8082/api/v1/auth/n/deleteBoard?id=${id}`, { headers: { 'Authorization': 'Bearer ' + cookies.accessToken } }) .then(() => { console.log("게시글 삭제 성공!"); alert("게시글을 삭제하였습니다 🗑️") navigate("/boar..

PUT과 POST의 차이가 있고, 실무에서는 POST를 많이 쓴다는 얘기를 줏어듣고선 궁금해졌습니다. PUT 이라는 것을 따로 만들어놓은 데엔 분명 이유가 있을텐데..왜 POST를 쓰는거지?!   📌 RESTful API란?먼저 RESTful에 대해 다시 한번 상기해봅니다. 간단히 말해, 자원을 URI로 표현하고, 자원에 대한 행위를 HTTP Method(GET, POST, PUT, DELETE)로 표현하는 것입니다. 그리고 자원에 대한 행위를 나타내는 4가지 Method는 CRUD(Create/Read/Update/Delete)에 각각 매칭됩니다. 📌POST와 PUT💡 멱등성: 여러 번 수행해도 결과가 같음예를 들어, POST로 이름이 까미인 강아지를 생성해달라고 2번 요청한다면 → id가 1과 ..