728x90
728x90
SMALL
HTML, CSS, JavaScript + Spring Boot + MyBatis + MySQL 으로 게시판 만들기 (3)
안녕하세요! 이번 포스트에서는 프론트엔드 개발을 시작하여 게시글을 작성하고 조회할 수 있는 화면을 구현하는 과정을 다뤄보겠습니다.
1. 프로젝트 구조
프론트엔드를 위한 HTML, CSS, JavaScript 파일을 프로젝트에 추가합니다. 기본적인 디렉토리 구조는 다음과 같습니다:
src/
├── main/
│ ├── java/
│ │ └── com/
│ │ └── example/
│ │ └── myboard/
│ │ ├── MyboardApplication.java
│ │ ├── controller/
│ │ ├── model/
│ │ ├── repository/
│ │ └── service/
│ └── resources/
│ ├── application.properties
│ ├── static/
│ │ ├── css/
│ │ │ └── styles.css
│ │ ├── js/
│ │ │ └── scripts.js
│ │ └── index.html
└── test/
2. index.html 작성
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>
3. styles.css 작성
CSS 파일을 작성하여 기본 스타일을 적용합니다.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
h1 {
text-align: center;
margin-top: 20px;
}
form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
input[type="text"],
textarea {
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
}
button {
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
#posts {
margin-top: 20px;
}
.post {
background: white;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
4. scripts.js 작성
JavaScript 파일을 작성하여 게시글 작성 및 조회 기능을 구현합니다.
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>";
postsDiv.appendChild(postDiv);
});
})
.catch(error => console.error("Error:", error));
}
fetchPosts();
});
5. 마무리
이제 프론트엔드 기본 설정과 게시글 작성 및 조회 기능을 구현했습니다. 다음 포스트에서는 서버와의 통신을 개선하고 추가 기능을 구현해보겠습니다. 많은 기대 부탁드립니다!
블로그 포스트에 대한 의견이나 질문이 있으시면 댓글로 남겨주세요!
728x90
728x90
LIST