댓글 삭제를 하려면 보통
삭제
버튼을 누름으로써 이루어진다.
mustache 의 HTML 코드에서는 현재 삭제 버튼이 form
태그로 감싸져 있다.
삭제 버튼이 onClick 되면 function 을 호출할 예정이기 때문에 기본적으로 적용되어 있는 이벤트를 해제시켜야한다.
따라서 폼 태그를 지우던지 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>

서비스 로직이나 다른 건 안만들었지만 ajax 코드 실험을 해 보았다.
consol.log 가 무사히 나온것 확인 가능.
댓글이 삭제되면 화면에서도 제거가 되어야 한다. 이를 위해 구분할 수 있는 dom 을 선택할 수 있어야한다.
반복적으로 출력되는 dom 선택을 위해 id 를 만들어준다.


댓글 삭제 서비스
@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));
}

댓글에 관련한 예외를 던지는 로직은 구성 되었다.
이렇게 만들어진 예외는 프론트에서 관리 해야하는데 메세지를 예쁘게 꾸며 놓았기 때문에 관리가 편하다.
<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>

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