728x90
728x90
SMALL
HTML, CSS, JavaScript + Spring Boot + MyBatis + MySQL 으로 게시판 만들기 (4)
안녕하세요! 이번 포스트에서는 서버와의 통신을 개선하고 추가 기능을 구현하는 과정을 다뤄보겠습니다.
1. 게시글 수정 기능 추가
게시글 수정 기능을 추가하기 위해 HTML에 수정 버튼을 추가하고, JavaScript에 수정 기능을 구현합니다.
1.1 index.html 수정
게시글마다 수정 버튼을 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyBoard</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="container">
<h1>게시판</h1>
<form id="postForm">
<input type="text" id="title" placeholder="제목" required>
<textarea id="content" placeholder="내용" required></textarea>
<button type="submit">게시글 작성</button>
</form>
<div id="posts"></div>
</div>
<script src="/js/scripts.js"></script>
</body>
</html>
1.2 scripts.js 수정
게시글 수정 기능을 구현합니다.
document.addEventListener("DOMContentLoaded", function() {
const postForm = document.getElementById("postForm");
const postsDiv = document.getElementById("posts");
postForm.addEventListener("submit", function(event) {
event.preventDefault();
const title = document.getElementById("title").value;
const content = document.getElementById("content").value;
fetch("/api/posts", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ title: title, content: content })
})
.then(response => response.json())
.then(data => {
fetchPosts();
})
.catch(error => console.error("Error:", error));
});
function fetchPosts() {
fetch("/api/posts")
.then(response => response.json())
.then(posts => {
postsDiv.innerHTML = "";
posts.forEach(post => {
const postDiv = document.createElement("div");
postDiv.classList.add("post");
postDiv.innerHTML = `
<h3>${post.title}</h3>
<p>${post.content}</p>
<button onclick="editPost(${post.id}, '${post.title}', '${post.content}')">수정</button>
<button onclick="deletePost(${post.id})">삭제</button>
`;
postsDiv.appendChild(postDiv);
});
})
.catch(error => console.error("Error:", error));
}
window.editPost = function(id, title, content) {
document.getElementById("title").value = title;
document.getElementById("content").value = content;
postForm.onsubmit = function(event) {
event.preventDefault();
fetch(`/api/posts/${id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
title: document.getElementById("title").value,
content: document.getElementById("content").value
})
})
.then(response => response.json())
.then(data => {
fetchPosts();
postForm.reset();
postForm.onsubmit = postFormSubmitHandler;
})
.catch(error => console.error("Error:", error));
}
}
window.deletePost = function(id) {
fetch(`/api/posts/${id}`, {
method: "DELETE"
})
.then(response => {
fetchPosts();
})
.catch(error => console.error("Error:", error));
}
const postFormSubmitHandler = postForm.onsubmit;
fetchPosts();
});
2. 게시글 삭제 기능 추가
이미 deletePost 함수를 추가하였으므로, 이를 활용하여 게시글 삭제 기능을 구현합니다.
3. 서버와의 통신 개선
서버와의 통신을 개선하여 사용자 경험을 향상시키겠습니다. 수정과 삭제 시 성공 메시지를 표시하고, 오류가 발생했을 때 사용자에게 알림을 제공합니다.
document.addEventListener("DOMContentLoaded", function() {
const postForm = document.getElementById("postForm");
const postsDiv = document.getElementById("posts");
postForm.addEventListener("submit", function(event) {
event.preventDefault();
const title = document.getElementById("title").value;
const content = document.getElementById("content").value;
fetch("/api/posts", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ title: title, content: content })
})
.then(response => response.json())
.then(data => {
fetchPosts();
alert("게시글이 작성되었습니다.");
})
.catch(error => {
console.error("Error:", error);
alert("게시글 작성 중 오류가 발생했습니다.");
});
});
function fetchPosts() {
fetch("/api/posts")
.then(response => response.json())
.then(posts => {
postsDiv.innerHTML = "";
posts.forEach(post => {
const postDiv = document.createElement("div");
postDiv.classList.add("post");
postDiv.innerHTML = `
<h3>${post.title}</h3>
<p>${post.content}</p>
<button class="edit" onclick="editPost(${post.id}, '${post.title}', '${post.content}')">수정</button>
<button class="delete" onclick="deletePost(${post.id})">삭제</button>
`;
postsDiv.appendChild(postDiv);
});
})
.catch(error => console.error("Error:", error));
}
window.editPost = function(id, title, content) {
if (confirm("이 게시글을 수정하시겠습니까?")) {
document.getElementById("title").value = title;
document.getElementById("content").value = content;
postForm.onsubmit = function(event) {
event.preventDefault();
fetch(`/api/posts/${id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
title: document.getElementById("title").value,
content: document.getElementById("content").value
})
})
.then(response => response.json())
.then(data => {
fetchPosts();
postForm.reset();
postForm.onsubmit = postFormSubmitHandler;
alert("게시글이 수정되었습니다.");
})
.catch(error => {
console.error("Error:", error);
alert("게시글 수정 중 오류가 발생했습니다.");
});
}
}
}
window.deletePost = function(id) {
if (confirm("이 게시글을 삭제하시겠습니까?")) {
fetch(`/api/posts/${id}`, {
method: "DELETE"
})
.then(response => {
fetchPosts();
alert("게시글이 삭제되었습니다.");
})
.catch(error => {
console.error("Error:", error);
alert("게시글 삭제 중 오류가 발생했습니다.");
});
}
}
const postFormSubmitHandler = postForm.onsubmit;
fetchPosts();
});
4. 마무리
이제 게시글 수정 및 삭제 기능을 추가하고, 서버와의 통신을 개선하였습니다. 다음 포스트에서는 프론트엔드 디자인을 개선하고 추가 기능을 구현해보겠습니다. 많은 기대 부탁드립니다!
블로그 포스트에 대한 의견이나 질문이 있으시면 댓글로 남겨주세요!
728x90
728x90
LIST