코딩자율학습단 스프링부트_19장

댓글 삭제의 개요

마지막으로 댓글 삭제 기능을 구현할 것인데 댓글 삭제는 2단계로 진행이 된다.

댓글 삭제 버튼을 추가하고 삭제 버튼을 클릭해 REST API 요청을 보낼 것인데,

요청을 보낼 시에 버튼을 통해 댓글의 id 값을 전달해 주어야 한다는 점을 주의해서 처리해 주어야 한다.

---

댓글 삭제 버튼 추가하기

댓글 수정 버튼 오른쪽에 아래 코드를 추가하여 댓글 삭제 버튼을 생성해준다.

<button type="button" class="btn btn-outline-warning comment-delete-btn">삭제</button>

---

자바스크립트로 댓글 삭제하기

이제 수정과 유사한 과정으로 댓글 삭제 스크립트를 구현해 볼 것인데,

먼저 삭제 버튼을 선택하고 버튼 클릭 이벤트까지의 과정의 코드를 추가 후 정상적으로 작동되는지 확인한다.

<script>
    {
        // 삭제 버튼 선택
        const commentDeleteBtn = document.querySelector(".comment-delete-btn");

        // 삭제 버튼 이벤트 처리
        commentDeleteBtn.addEventListener("click", function () {
            console.log("삭제 버튼이 클릭됐습니다..!")
            
        });
    }
</script>

위의 이미지와 같이 콘솔에 로그가 정상적으로 찍히긴 하지만 두 번째 댓글의 삭제 버튼을 클릭 시 이벤트는 감지되지 않는다.

querySelector() 메서드로 삭제 버튼을 클릭하면 문서에서 맨 처음 나온 삭제 버튼만 클릭해서인데,

이 문제를 해결하기 위해서는 querySelectorAll() 메서드로 처리를 해 주어야 한다고 한다.

{
        // 삭제 버튼 선택
        const commentDeleteBtns = document.querySelectorAll(".comment-delete-btn");

        // 삭제 버튼 이벤트 처리
        // commentDeleteBtn.addEventListener("click", function () {
        //     console.log("삭제 버튼이 클릭됐습니다..!")
        //
        // });
        commentDeleteBtns.forEach(btn => {
            btn.addEventListener("click", () => {
                console.log("삭제 버튼이 클릭됐습니다..!")
            });
        });
    }

위와 같이 수정 후 다시 한 번 정상적으로 작동되는지 확인 후,

이제 삭제 버튼을 클릭 시 해당 댓글의 id를 가져와 콘솔 로그로 출력을 해 보도록 하겠다.

댓글 삭제 버튼과 앞에서 구현한 삭제 버튼 이벤트 처리 코드를 수정해 주어야 한다.

<button type="button" class="btn btn-outline-warning comment-delete-btn"
        data-comment-id="{{id}}">삭제</button>

commentDeleteBtns.forEach(btn => {
    btn.addEventListener("click", (event) => {
        // 이벤트 발생 요소 선택
        const commentDeleteBtn = event.target;

        // 삭제 댓글 id 가져오기
        const commentId = commentDeleteBtn.getAttribute("data-comment-id");
        console.log(`삭제 버튼 클릭: ${commentId}번 댓글`)

    });
});

망치 아이콘 클릭 후 새로고침하여 삭제 버튼을 클릭하면 아래와 같이 나오는 것을 볼 수 있다.

이제 댓글 삭제의 최종 단계인 REST API를 호출하는 코드를 작성 후 정상적으로 삭제되는지 확인해주면 끝이다.

{
        // 삭제 버튼 선택
        const commentDeleteBtns = document.querySelectorAll(".comment-delete-btn");

        // 삭제 버튼 이벤트 처리
        // commentDeleteBtn.addEventListener("click", function () {
        //     console.log("삭제 버튼이 클릭됐습니다..!")
        //
        // });
        commentDeleteBtns.forEach(btn => {
            btn.addEventListener("click", (event) => {
                // 이벤트 발생 요소 선택
                const commentDeleteBtn = event.target;

                // 삭제 댓글 id 가져오기
                const commentId = commentDeleteBtn.getAttribute("data-comment-id");
                console.log(`삭제 버튼 클릭: ${commentId}번 댓글`)

                // 삭제 REST API 호출
                const url = `/api/comments/${commentId}`;
                fetch(url, {
                    method: "DELETE"
                }).then(response => {

                    // 댓글 삭제 실패 처리
                    if (!response.ok) {
                        alert("댓글 삭제 실패..!");
                        return;
                    }

                    // 삭제 성공 시 메시지 창 띄우기
                    const msg = `${commentId}번 댓글을 삭제했습니다.`;
                    alert(msg);

                    // 현재 페이지 새로 고침
                    window.location.reload();
                });
            });
        });
    }