# 댓글 삭제하기 ## 미션 --- ## 개념 --- ## 진행 --- #### ⭐️ 뷰 페이지 1) 삭제 버튼 추가: "comments/_list.mustache" ``` <ul class="list-unstyled"> {{#comments}} <li class="media mt-4" id="comments-{{id}}"> <img src="https://api.adorable.io/avatars/64/{{author}}.png" class="mr-3" alt="avata"> <div class="media-body"> <h5 class="mt-0 mb-1">{{author}} <small> <a href="#" class="comment-edit-btn" data-toggle="collapse" data-target=".multi-collapse-{{id}}">수정</a> <!-- 삭제 버튼 추가 --> <a href="#comments" class="comment-destroy-btn" value="{{id}}">삭제</a> </small> </h5> <p class="collapse multi-collapse-{{id}} show">{{content}}</p> <form class="collapse multi-collapse-{{id}}"> <div class="form-group"> <textarea class="form-control" id="comment-content" rows="3">{{content}}</textarea> </div> <input type="hidden" id="comment-id" value="{{id}}"> <input type="hidden" id="comment-author" value="{{author}}"> <button type="button" class="btn btn-info comment-update-btn">수정 완료</button> </form> </div> </li> {{/comments}} </ul> ``` #### ⭐️ JS 2) 댓글 삭제 요청: "static/js/app/comment.js" ``` var comment = { // 이벤트 등록 init: function() { var _this = this; ... // 삭제 버튼 클릭 시! const destroyBtns = document.querySelectorAll('.comment-destroy-btn'); destroyBtns.forEach(function(item) { item.addEventListener('click', function() { var commentId = this.getAttribute('value'); // 해당 a태그의 value 값(댓글 id)을 저장 _this.destroy(commentId); }); }); }, ... // 댓글 삭제 destroy: function(commentId) { // 요청을 보냄 fetch('/api/comments/' + commentId, { method: 'DELETE', }).then(function(response) { // 응답 처리 if (response.ok) { // 성공 alert('댓글이 삭제 되었습니다.'); // DB에서 사라졌으나, 화면에는 남아있음! 이를 위해, CSS로 화면에서 감춤! document.querySelector(`#comments-${commentId}`).style.display = 'none'; } else { // 실패 alert(JSON.stringify(response)); } }); } }; // 객체 초기화! comment.init(); ``` #### ⭐️ API 클래스 3) 삭제 요청 처리: "api/CommentApiController" ``` ... @RestController public class CommentApiController { ... @DeleteMapping("/api/comments/{id}") public Long destroy(@PathVariable Long id) { return commentService.destroy(id); } } ``` #### ⭐️ 서비스 클래스 4) 삭제 작업 수행: "service/CommentService" ``` ... @Service public class CommentService { ... @Transactional public Long destroy(Long id) { commentRepository.deleteById(id); return id; } } ``` #### ⭐️ 확인하기 5) 삭제 버튼 클릭 ! 6) 댓글 삭제 완료 ! ## 훈련 --- ## 면접 ---