- 본 게시판 프로젝트는 단계별(step by step)로 진행되니, 이전 단계를 진행하시는 것을 권장드립니다.
- DBMS 툴은 DBeaver를 이용하며, DB는 MariaDB를 이용합니다. (MariaDB 설치하기)
- 화면 처리는 HTML5 기반의 자바 템플릿 엔진인 타임리프(Thymeleaf)를 사용합니다.
이전 글에서는 흔히 모달(Modal)이라고 불리는 레이어 팝업(Layer Popup)을 이용해서 기존에 등록된 댓글을 수정하는 기능을 구현해 보았습니다. 이번에는 댓글 CRUD의 마지막 단계인 댓글 삭제 기능을 구현해 보겠습니다.
1. 댓글 API 컨트롤러(Controller) - 메서드 추가하기
우선 CommentApiController에 다음의 메서드를 추가해 주세요.
// 댓글 삭제
@DeleteMapping("/posts/{postId}/comments/{id}")
public Long deleteComment(@PathVariable final Long postId, @PathVariable final Long id) {
return commentService.deleteComment(id);
}
로직 해석
REST API 설계 규칙에서 다큐먼트(Document)에 해당되는 기능으로, 특정 게시글(postId)에 등록된 모든 댓글 중 PK(id)에 해당되는 댓글을 삭제합니다. 삭제 프로세스가 완료되면 삭제된 댓글의 PK(id)를 리턴합니다.
2. findAllComment( ) 함수 수정하기
상세 페이지의 댓글은 findAllComment( )를 이용해서 출력하며, 각 댓글의 삭제 버튼을 클릭했을 때 기능이 작동하도록 클릭 이벤트를 선언해 주어야 합니다. view.html의 findAllComment( )에서 commentHtml에 그리는 삭제 버튼에 onclick 이벤트를 추가해 주세요.
<button type="button" onclick="deleteComment(${row.id});" class="btns"><span class="icons icon_del">삭제</span></button>
3. deleteComment( ) 함수 작성하기
view.html의 JS(script) 프래그먼트에 다음의 함수를 선언해 주세요.
// 댓글 삭제
function deleteComment(id) {
if ( !confirm('선택하신 댓글을 삭제할까요?') ) {
return false;
}
const postId = [[ ${post.id} ]];
$.ajax({
url : `/posts/${postId}/comments/${id}`,
type : 'delete',
dataType : 'json',
async : false,
success : function (response) {
alert('삭제되었습니다.');
findAllComment();
},
error : function (request, status, error) {
console.log(error)
}
})
}
로직 해석
CommentApiController의 deleteComment( )를 호출해서 댓글을 삭제 처리합니다. 게시글과 마찬가지로 delete_yn 칼럼의 상태값을 변경하는 논리 삭제 방식이며, 삭제가 완료된 후 findAllComment( )로 댓글을 다시 조회합니다.
4. Indent depth(들여쓰기)를 줄이는 코딩
코딩에 도움이 되는 팁을 하나 드리겠습니다. deleteComment( )에서 삭제 여부를 확인하는 if 문의 confirm( )에 not( ! )을 붙여 "취소"가 클릭된 경우에는 로직이 종료되도록 "return false;" 처리를 했는데요. 읽기 좋은 코드는 들여쓰기 레벨이 낮은 코드입니다.
아래 코드는 if 문 안에서 메인 로직이 실행되는 구조입니다. 우리가 작성한 로직은 Indent depth가 1이지만, 아래 코드는 indent가 1 증가했으니 Indent depth는 총 2가 됩니다.
다음의 두 함수는 같은 기능을 하는 함수입니다. printNumber1( )은 Indent depth가 3이고, printNumber2( )는 Indent depth가 1입니다. 누가 봐도 뒤의 코드가 훨씬 깔끔하다는 느낌을 받을 거라 생각합니다.
function printNumber1() {
if (1 === 1) {
if (2 === 2) { // Indent 1 증가 (depth : 1)
for (let i = 0; i <= 10; i++) { // Indent 1 증가 (depth : 2)
console.log(i); // Indent 1 증가 (depth : 3)
}
}
}
}
function printNumber2() {
if (1 !== 1 || 2 !== 2) {
return false; // Indent 1 (depth : 1)
}
for (let i = 0; i <= 10; i++) {
console.log(i); // Indent 1 (depth : 1)
}
}
이렇듯 함수(메서드)의 로직을 작성할 때 함수가 종료되어야 하는 예외 조건을 앞쪽에 선언해 두고, 뒤쪽에서 메인 로직이 실행되는 구조로 코딩하는 연습이 필요합니다.
5. 댓글 삭제해 보기
저는 다섯 번째로 등록된 댓글을 삭제해 보겠습니다.
삭제 완료 메시지가 닫히면 findAllComment( )를 호출해서 댓글을 화면에 다시 렌더링 합니다.
마치며
이번 글을 끝으로 댓글 CRUD 기능 구현이 모두 끝이 났습니다. 다음 글에서는 페이징과 검색 처리에서 구현했던 클래스들을 이용해서 댓글에 페이징을 적용해 볼 건데요. 지금까지와 마찬가지로 화면의 움직임 없이 페이지를 이동하도록 처리해 보겠습니다.
오늘도 방문해 주신 여러분께 정말 감사드립니다. 좋은 하루 보내세요 :)
댓글