📌 개념 정리
3-6. 게시판 관리 웹 페이지 구축
💻 전체 코드 예시 (templates/boards.html)
<!DOCTYPE html>
<html>
<head>
<title>Board Management</title>
</head>
<body>
<h1>Board Management</h1>
<!-- 게시글 생성 폼 -->
<form id="createBoardForm">
<input type="text" id="boardTitle" placeholder="Title" />
<textarea id="boardContent" placeholder="Content"></textarea>
<input type="number" id="userId" placeholder="User ID" />
<button type="submit">Create Board</button>
</form>
<!-- 게시글 조회 -->
<button onclick="getBoards()">Get All Boards</button>
<div id="boards"></div>
<!-- 게시글 수정 폼 -->
<form id="updateBoardForm">
<input type="number" id="updateBoardId" placeholder="Board ID" />
<input type="text" id="updateBoardTitle" placeholder="New Title" />
<textarea id="updateBoardContent" placeholder="New Content"></textarea>
<button type="submit">Update Board</button>
</form>
<!-- 게시글 삭제 -->
<form id="deleteBoardForm">
<input type="number" id="deleteBoardId" placeholder="Board ID" />
<button type="submit">Delete Board</button>
</form>
<script>
// 함수 정의 (아래 스텝별로 나누어 설명)
</script>
</body>
</html>
🚦 단계별 프로세스 흐름 및 설명
📍 Step 1: 게시글 생성
document.getElementById("createBoardForm").addEventListener("submit", function (e) {
e.preventDefault();
const title = document.getElementById("boardTitle").value;
const content = document.getElementById("boardContent").value;
const userId = document.getElementById("userId").value;
fetch("/board", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title, content, user_id: userId }),
})
.then(response => response.json())
.then(data => {
console.log(data);
getBoards();
});
});
- 사용자가 입력한 데이터를 서버에 전송하여 새로운 게시글을 추가합니다.
- 성공적으로 추가된 후에는 게시글 목록을 갱신합니다.
📍 Step 2: 전체 게시글 조회
function getBoards() {
fetch("/board")
.then(response => response.json())
.then(data => {
const boardsDiv = document.getElementById("boards");
boardsDiv.innerHTML = "";
data.forEach(board => {
boardsDiv.innerHTML += `<p>${board.title} - ${board.content} (User ID: ${board.user_id}, Board ID: ${board.id})</p>`;
});
});
}
- 서버에서 모든 게시글 데이터를 가져와서 웹페이지에 표시합니다.
📍 Step 3: 게시글 수정
document.getElementById("updateBoardForm").addEventListener("submit", function (e) {
e.preventDefault();
const boardId = document.getElementById("updateBoardId").value;
const title = document.getElementById("updateBoardTitle").value;
const content = document.getElementById("updateBoardContent").value;
fetch(`/board/${boardId}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title, content }),
})
.then(response => response.json())
.then(data => {
console.log(data);
getBoards();
});
});
- 특정 게시글의 내용을 수정하여 서버에 반영합니다.
- 수정된 내용은 즉시 목록에 반영됩니다.
📍 Step 4: 게시글 삭제
document.getElementById("deleteBoardForm").addEventListener("submit", function (e) {
e.preventDefault();
const boardId = document.getElementById("deleteBoardId").value;
fetch(`/board/${boardId}`, { method: "DELETE" })
.then(response => response.json())
.then(data => {
console.log(data);
getBoards();
});
});
- 선택한 게시글을 서버에서 삭제한 후 변경된 게시글 목록을 갱신하여 보여줍니다.
✅ 마무리 요약 및 복습 포인트
- 게시판 웹 페이지에서 사용자와 서버 간 데이터 처리를 명확하게 정의하여 구현합니다.
- 각 프로세스를 독립적으로 구성하여 유지보수 및 확장성을 높입니다.
- JavaScript Fetch API를 이용해 비동기적으로 서버와 상호작용하며 사용자 경험을 향상시킵니다.
'Flask' 카테고리의 다른 글
| Chapter 3-8 DB 객체 모델 정의 방법 2가지 (0) | 2025.04.21 |
|---|---|
| Chapter 3-7 Flask-SQLAlchemy 게시판 관리 웹 페이지 구축(routes/board.py) (0) | 2025.04.21 |
| Chapter 3-5 Flask-SQLAlchemy 게시판 관리 라우트 구축 (routes/board.py) (0) | 2025.04.21 |
| Chapter 3-4 Flask-SQLAlchemy 사용자 관리 라우트 구축(routes/user.py) (0) | 2025.04.21 |
| Chapter 3-3 Flask-SQLAlchemy 모델 구축(models.py) (0) | 2025.04.21 |