댓글 수정의 개요

댓글 삭제 버튼 추가하기

• [삭제] 버튼을 [수정] 버튼 오른쪽에 추가

<!-- Button trigger modal -->
<button type="button"
     class="btn btn-sm btn-outline-primary"
     data-bs-toggle="modal"
     data-bs-target="#comment-edit-modal"
     data-bs-id="{{id}}"
     data-bs-nickname="{{nickname}}"
     data-bs-body="{{body}}"
     data-bs-article-id="{{articleId}}">수정</button>
<!-- 댓글 삭제 버튼 -->
<button type="button"
     class="btn btn-sm btn-outline-danger comment-delete-btn"

자바스크립트로 댓글 수정하기

1. 클릭 이벤트 처리하기

• 모든 [삭제] 버튼에 대해 다음과 같이 이벤트 처리
• 기존 코드를 주석 처리
• forEach() 메서드로 commentDeleteBtns에서 버튼을 하나씩 꺼내 반복 각 버튼은 btn이라는 매개변수로 받아 화살표(⇒) 함수를 실행
• btn 변수로 받아 온 버튼에 클릭 이벤트가 발생하는지 감시하다가, 발생하면 콘솔 로그로 "삭제 버튼이 클릭됐습니다..!"를 출력

// 삭제 버튼 이벤트 처리
// commentDeleteBtn.addEventListener("click", function() { // 주석 쳐리
// console.log("삭제 버른이 클릭됐습니다..!");
// })；
commentDeleteBtns.forEach(btn => { //［삭제] 버튼 수만큼 반복
	btn.addEventListener(MclickMz () => { // 각 버튼의 이벤트 처리
		console.log('삭제 버튼이 클릭됐습니다..!");
	});
});

• 삭제 버튼을 클릭하면 해당 댓글의 id를 가져와 콘솔 로그로 출력

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

• 맨 밑 자바스크립트 코드로 와서 btn에 클릭 이벤트가 발생했을 때 이벤트와 관련한 버튼 요소를 가져옴

  1. 화살표 함수(⇒)의 매개변수로 event 객체를 받아옴

  2. event.target으로 이벤트를 발생시킨 요소, 즉 삭제 버튼을 가져와 commentDeleteBtn에 저장

  3. commentDeleteBtn에서 data-comment-id 속성 값을 가져와 commentld 변수에 저장 data-comment-id는 삭제 버튼의 데이터 속성으로 댓글의 id를 저장하고 있음

  4. 콘솔 로그에 출력되는 내용 수정

     "삭제 버튼이 클릭됐습니다..!" → 삭제 버튼 클릭: ${commentld}번 댓글) (백틱 문자열 사용)

btn.addEventListener("click", (event) => { // 1번
		// 이벤트 발생 요소 선택
		const commentDeleteBtn = event.target; // 2번
		// 삭제 댓글 id 가져오기
		const commentId = commentDeleteBtn.getAttribute("data-comment-id"); // 3번
		console.log(`삭제 버튼 클릭: ${commentId}번 댓글`); //4번

2. 자바스크립트로 REST API 호출하고 응답 처리하기

// 삭제 REST API 호출
const url = `/api/comments/${commentId}`;
fetch(url, { // fetch() 함수 수정
		method: "DELETE"
}).then(response => { // 응답 처리 (실패or성공)
		// 댓글 삭제 실패 처리
		if (!response.ok) {
				alert("댓글 삭제 실패..!");
				return;
		}
		// 삭제 성공 시 댓글을 화면에서 지우고 메시지 창 띄우기
		const target = document.querySelector(`#comments-${commentId}`);
		target.remove();
		const msg = `${commentId}번 댓글을 삭제했습니다`;
		alert(msg);
		// 현재 페이지 새로고침
		window.location.reload();
});