Chapter 3-6 Flask-SQLAlchemy 게시판 관리 웹 페이지 구축(routes/board.py)

Flask

Chapter 3-6 Flask-SQLAlchemy 게시판 관리 웹 페이지 구축(routes/board.py)

Chansman 2025. 4. 21. 10:31

📌 개념 정리

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를 이용해 비동기적으로 서버와 상호작용하며 사용자 경험을 향상시킵니다.