길벗 코딩자율학습단 20일차

donghan378·2025년 2월 1일

길벗 코딩자율학습단 12기 스프링부트3

길벗_코딩자율학습단_12기

목록 보기

20/21

20일차

~19.4 책을 마무리하며(종이책 p.539~555)

19장 웹 페이지에서 댓글 삭제하기

19.1 댓글 삭제의 개요

댓글 삭제는 다음과 같은 2단계로 진행한다.

댓글 삭제 버튼 추가하기
삭제 버튼 클릭해 REST API 요청 보내기

특히 주의할 부분은 2단계인데 2단계에서 삭제 버튼 클릭 이벤트를 처리할 때 삭제 버튼을 통해 댓글의 id 값을 전달한다. 어느 댓글에서 삭제 요청을 했는지 알아야 서버를 통해 댓글을 삭제할 수 있기 때문이다.

19.2 댓글 삭제 버튼 추가하기

댓글 삭제 버튼은 수정 버튼 오른쪽에 추가한다.

_list.mustache 파일을 열고  주석을 찾고 아래에 <button> 태그로 삭제버튼을 만든다. 그리고 class 속성 값으로 comment-delete-btn을 추가하는데, 삭제 시 클릭 이벤트 처리를 위한 선택자로 사용하기 위해서 추가해준다.
```
<button type=”button” class=”btn btn-sm btn-outline-danger comment-delete-btn”>삭제</button>
```
- 클래스 선택자는 class 속성 값을 이용해 선택자를 지정하는 방법으로 닷(.) 기호를 붙여 사용한다. 17~18 장에서는 아이디 선택자(#id)를 이용해 HTML 문서의 요소를 선택했는데, 여기서는 클래스 선택자를 사용한다.
여기까지 작성하고 게시글 상세 페이지에서 들어가면 수정 버튼 옆에 삭제 버튼이 있는 것을 확인할 수 있다.

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

클릭 이벤트 처리하기

_list.mustache 파일의 맨 아래 빈 공간에 <script></script>를 작성하고 중괄호로 블록을 잡는다.
블럭 안에 클래스 선택자(comment-delete-btn)을 활용하여 삭제 버튼을 변수로 받아오는 코드를 작성한다.
```
const commentDeleteBtns = document.querySelectorAll(”.comment-delete-btn”);
```
- querySelector() 메서드로 삭제 버튼을 선택하면 이 문서에서 맨 처음 나온 삭제 버튼만 선택하기 때문에 querySelectorAll() 메서드를 사용하여 문서에 있는 모든 삭제 버튼을 선택해야 한다.

버튼을 여러 개 가져와 변수화했으므로 반복 처리를 위한 forEach() 메서드를 사용하여 이벤트를 처리해준다.

commentDeleteBtns.forEach(btn ⇒ {
	btn.addEventListener(”click”, () ⇒ {
		console.log(”삭제 버튼이 클릭됐습니다..!”);
	});
});

삭제 버튼의 데이터 속성으로 data-comment-id=”{{id}}”를 추가해준다.

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

commentDeleteBtns.forEach(btn ⇒ {
	btn.addEventListener(”click”, (event) ⇒ {
		const commentDeleteBtn = event.target;
		const commentId = commentDeleteBtn.getAttribute(”data-comment-id”);
		console.log(`삭제 버튼 클릭: ${commentId}번 댓글`);
	});
});

※ 백틱(`)은 문자열을 정의하는 방법으로 백틱을 사용하면 ${} 문법으로 문자열에 변수 또는 식을 넣을 수 있다. 다음 두 코드는 같은 의미이다.

`삭제 버튼 클릭: ${commentId}번 댓글`
“삭제 버튼 클릭: “ + commentId + “번 댓글”

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

url 변수에 댓글 삭제 API 주소를 저장한다.
fetch() 함수를 작성한다.
- 첫 번째 전달값으로 API 주소를 가지고 있는 url을 넘긴다.
- 두 번째 전달값으로 요청 메서드를 넘긴다. 댓글을 생성하거나 수정할 때처럼 전송 본문이 있는 것이 아니기 때문에 headers와 body 속성은 작성하지 않아도 된다.
- 응답 처리 구문을 작성한다.
- 댓글 삭제에 성공한다면 화면에서도 지운다.
- target.remove()로 댓글 요소를 삭제하고 삭제 메시지를 띄운다.

const url = `/api/comments/${commentId}`;
fetch(url, {
	method: “DELETE”
}).then(response ⇒ {
	if(!response.ok) {
		alert(”댓글 삭제 실패..!”);
		return;
	}
	const target = document.querySelector(`#comments-${commentId}`);
	target.remove();
	const msg = `${commentId}번 댓글을 삭제했습니다.`;
	alert(msg);
	window.location.reload();
});