삭제 기능 코드 작성
// resources - staic - js - article.js
const deleteButton = document.getElementById('delete-btn');
if (deleteButton) {
deleteButton.addEventListener('click', event => {
let id = document.getElementById('article-id').value;
fetch(`/api/articles/${id}`, {
method: 'DELETE'
})
.then(() => {
alert('삭제가 완료되었습니다.');
location.replace('/articles');
});
});
}
- const deleteButton = document.getElementById('delete-btn');
id가 'delete-btn'인 요소를 찾아 deleteButton 변수에 할당한다.
-
fetch()
JavaScript에서 네트워크 요청을 보내는 기능을 제공하는 함수이다. 주로 HTTP 요청을 보내고 응답을 처리하는 데 사용된다.- 다음과 같은 형식으로 사용한다.
- fetch(url, option)
.then(response => {
// 응답을 처리하는 코드 (응답 성공 시)
})
.catch(error => {
// 오류를 처리하는 코드 ( 오류 발생 시)
});
- fetch(url, option)
- option 부분에 들어가는 주요 요소
- method : 요청의 HTTP 메서드를 지정한다. GET, POST, PUT, DELETE 등이 사용된다.
- headers : 요청 헤더를 나타내는 Headers 객체나 헤더 정보를 포함한 객체를 지정한다.
- Body : 요청의 본문에 해당하는 데이터를 지정한다.
- 다음과 같은 형식으로 사용한다.
-
location.replace('URL');
현재 페이지를 새로운 페이지로 리다이렉션하여, 지정된 URL로 이동한다.
또한 페이지의 이력에 이전 페이지의 이력을 남기지 않으므로 지정된 URL로 이동 후 뒤로가기를 누를 시 지정 URL로 바뀌기 이전 페이지로 돌아갈 수 없다. -
alert()
팝업을 띄워주는 메서드이다.
블로그 글 뷰 수정
// resources - templates - article.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>블로그 글</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
<h1 class="mb-3">My Blog</h1>
<h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-lg-8">
<article>
<!-- 블로그 글 id 추가 -->
<input type="hidden" id="article-id" th:value="${article.id}">
<header class="mb-4">
<h1 class="fw-bolder mb-1" th:text="${article.title}"></h1>
<div class="text-muted fst-italic mb-2" th:text="|Posted on ${#temporals.format(article.createdAt, 'yyyy-MM-dd HH:mm')}|"></div>
</header>
<section class="mb-5">
<p class="fs-5 mb-4" th:text="${article.content}"></p>
</section>
<button type="button" id="modify-btn"
th:onclick="|location.href='@{/new-article?id={articleId}(articleId=${article.id})}'|"
class="btn btn-primary btn-sm">수정</button>
<!-- 블로그 삭제 버튼에 id 추가 -->
<button type="button" id="delete-btn"
class="btn btn-secondary btn-sm">삭제</button>
</article>
</div>
</div>
</div>
<script src="/js/article.js"></script> <!-- article.js 파일 추가 -->
</body>
- 삭제 버튼 클릭시 글이 삭제되도록 delete-btn이라는 아이디 값을 추가하고 article.js가 이 화면에서 동작하도록 임포트 해준다.
해당 글은 다음 도서의 내용을 정리하고 참고한 글임을 밝힙니다.
신선영, ⌜스프링 부트 3 벡엔드 개발자 되기 - 자바 편⌟, 골든래빗(주), 2023, 384쪽
IT, 개발 관련 정보들을 기록하는 장소입니다.