자바스크립트에서 JSON 데이터를 이용하여 게시판 생성하기

15 Sep 2023

javascript

게시판은 웹 개발에서 자주 사용되는 기능 중 하나입니다. 이번 블로그는 자바스크립트와 JSON 데이터를 활용하여 간단한 게시판을 생성하는 방법에 대해 알아보겠습니다.

1. JSON 데이터 생성하기

우선, 게시판에 표시될 데이터를 JSON 형식으로 생성해야 합니다. 예를 들어, 게시물의 제목, 작성자, 내용 등의 정보를 포함한 JSON 데이터를 생성할 수 있습니다.

let posts = [
  {
    "title": "첫 번째 게시물",
    "author": "홍길동",
    "content": "안녕하세요, 첫 번째 게시물입니다."
  },
  {
    "title": "두 번째 게시물",
    "author": "김철수",
    "content": "안녕하세요, 두 번째 게시물입니다."
  },
  // 추가적인 게시물 데이터
];

2. 게시판 생성하기

이제, JSON 데이터를 활용하여 실제로 게시판을 생성해보겠습니다. HTML 파일에 다음과 같이 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>게시판</title>
</head>
<body>
  <div id="board"></div>

  <script>
    // JSON 데이터를 가져와서 게시물 생성하는 함수
    function createPosts() {
      let board = document.getElementById("board");

      posts.forEach(post => {
        let postElement = document.createElement("div");
        postElement.className = "post";

        let titleElement = document.createElement("h2");
        titleElement.textContent = post.title;
        postElement.appendChild(titleElement);

        let authorElement = document.createElement("p");
        authorElement.textContent = "작성자: " + post.author;
        postElement.appendChild(authorElement);

        let contentElement = document.createElement("p");
        contentElement.textContent = post.content;
        postElement.appendChild(contentElement);

        board.appendChild(postElement);
      });
    }

    // 게시판 생성 함수 호출
    createPosts();
  </script>
</body>
</html>

위 코드에서 createPosts() 함수는 JSON 데이터를 가져와서 각 게시물을 동적으로 생성하는 역할을 합니다. JSON 데이터를 순회하면서 게시물의 제목, 작성자, 내용 등을 HTML 요소로 만들어 board 요소에 추가합니다.

마무리

이제 자바스크립트와 JSON 데이터를 이용하여 간단한 게시판을 생성하는 방법을 알아보았습니다. 웹 개발에는 다양한 방법으로 게시판을 구현할 수 있으며, 이는 초보부터 전문가까지 모든 개발자에게 도움이 될 수 있는 기술입니다.

#javascript #JSON