[v3] springboot 블로그 만들기-5

ajax 활용한 댓글 삭제 기능 구현
HootJem's avatar
Sep 06, 2024
[v3] springboot 블로그 만들기-5

댓글 삭제를 하려면 보통 삭제 버튼을 누름으로써 이루어진다. mustache 의 HTML 코드에서는 현재 삭제 버튼이 form 태그로 감싸져 있다. 삭제 버튼이 onClick 되면 function 을 호출할 예정이기 때문에 기본적으로 적용되어 있는 이벤트를 해제시켜야한다.
notion image
따라서 폼 태그를 지우던지 type 을 버튼으로 만들어 새로고침이 발생하지 않도록 해야하며 이부분 체크 안하면 onclick 이벤트 말고 새로고침만 발생하게 된다.
<script> // put, post 말고는 body 가 필요없다. async function deleteReply(id){ let response = await fetch(`/reply/${id}`,{ method: "delete" }); console.log(response); let responseBody = await response.json(); // 파싱 console.log(responseBody); } </script>
notion image
서비스 로직이나 다른 건 안만들었지만 ajax 코드 실험을 해 보았다.
consol.log 가 무사히 나온것 확인 가능.
 

댓글이 삭제되면 화면에서도 제거가 되어야 한다. 이를 위해 구분할 수 있는 dom 을 선택할 수 있어야한다.
반복적으로 출력되는 dom 선택을 위해 id 를 만들어준다.
notion image
notion image
 
댓글 삭제 서비스
@Transactional(readOnly = true) @RequiredArgsConstructor @Service // IoC 등록 public class ReplyService { private final ReplyRepository replyRepository; @Transactional public void 댓글삭제(int id, User sessionUser){ Reply replyPS = replyRepository.findById(id).orElseThrow( ()-> new ExceptionApi404("해당 댓글을 찾을 수 없습니다.") ); if(replyPS.getUser().getId() != sessionUser.getId()){ throw new ExceptionApi403("댓글 삭제 권한이 없습니다."); } replyRepository.deleteById(id); } }
컨트롤러
@DeleteMapping("/api/reply/{id}") public ResponseEntity<?> delete(@PathVariable("id") Integer id) { User sessionUser = (User) session.getAttribute("sessionUser"); replyService.댓글삭제(id, sessionUser); return ResponseEntity.ok(Resp.ok(null)); }

notion image
댓글에 관련한 예외를 던지는 로직은 구성 되었다.
이렇게 만들어진 예외는 프론트에서 관리 해야하는데 메세지를 예쁘게 꾸며 놓았기 때문에 관리가 편하다.
 
<script> async function deleteReply(id){ let response = await fetch(`/api/reply/${id}`,{ method: "delete" }); let responseBody = await response.json(); if(response.ok){ $(`#reply-${id}`).remove(); }else { alert(responseBody.msg); } } </script>
notion image
 
if(response.ok){ $(`#reply-${id}`).remove(); }
이 부분의 if 문은 ajax 통신으로 받아와진 response 에 따라 조건이 달라진다. 올바른 조건을 달기 위해서 consol.log 를 활용해 열어볼 필요가 있다.
 
다음 포스팅에서는 글 작성을 해 볼 것이다.
jQuery의 append 를 활용해서 동적으로 출력해보자.
 
 
SpringBoot 블로그 만들기 - v3 시리즈 1. https://inblog.ai/hj/v3-시작-27809 (개발환경 설정 및 post 맨 이용한 api 테스트) 2. https://inblog.ai/hj/v3-springboot-블로그-만들기-2-28708 (댓글 엔티티 생성 및 양방향 매핑) 3. https://inblog.ai/hj/v3-springboot-블로그-만들기-3-28793 (댓글 조회하기 완료) 4. https://inblog.ai/hj/v3-rest-api-를-위한-exception-설정-28848 (REST API 위한 익셉션 핸들러 구현) 5. https://inblog.ai/hj/v3-springboot-블로그-만들기5-28859 (댓글 삭제 기능 구현) 6. (ajax 를 사용한 댓글 작성) 7. (게시물 검색 기능 구현)
 
Share article

[HootJem] 개발 기록 블로그