[DAY 20] 댓글 삭제 View 페이지 구현 및 자바스크립트 이벤트 처리

1. 댓글 삭제 버튼 추가

수정 버튼 옆에 삭제 버튼을 추가하기 위해 수정 버튼 구현한 부분 바로 아래에 삭제 버튼 코드를 작성한다.

                <!-- 댓글 삭제 버튼 -->
                <button type="button"
                        class="btn btn-sm btn-outline-danger comment-delete-btn"
                        data-comment-id="{{id}}">삭제</button>

2. 삭제 버튼 클릭하여 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();
        });
    });
    });
    }

삭제 버튼을 클릭했을 때 이벤트를 감지하게 해야 한다. script 코드로 삭제 버튼의 변수를 받아 와서 addEvnetListener()로 클릭 이벤트를 감지한다.

그러나 삭제 버튼은 여러 개이고, 이를 각각 감지해야하기때문에 querySelector를 사용하면 하나의 버튼만 감지하게 된다. querySelectorAll로 수정하여 1개 이상의 버튼을 변수화한다.

변수화한 버튼들의 이벤트 처리 또한 forEach 구문을 이용하여 각각 클릭 이벤트를 감지하도록 구현한다.

삭제 버튼을 눌렀을때 해당 댓글의 id가 콘솔에 잘 출력된다면, 삭제 REST API를 호출한다.