이번 포스트에서는 JSON 데이터를 활용하여 자바스크립트로 방명록을 생성하는 방법을 알아보겠습니다.

JSON 데이터란?

JSON(JavaScript Object Notation)은 데이터를 표현하기 위한 경량의 형식입니다. 이는 자바스크립트에서 사용되며, 데이터를 간결하게 표현하고 전송하고 처리하기 위해 일반적으로 사용됩니다.

방명록 생성하기

1. HTML 파일에 방명록을 표시할 요소를 만듭니다. 예를 들면, <ul>과 같은 태그를 사용할 수 있습니다.

<ul id="guestbook"></ul>

1. 자바스크립트 파일에서 JSON 데이터를 가져옵니다. 예를 들어, guests.json 파일을 서버에서 가져와 사용할 수 있습니다.

fetch('guests.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터를 사용하여 방명록을 생성합니다.
    let guestbook = document.getElementById('guestbook');

    data.forEach(guest => {
      let listItem = document.createElement('li');
      listItem.innerText = `이름: ${guest.name}, 메시지: ${guest.message}`;
      guestbook.appendChild(listItem);
    });
  })
  .catch(error => {
    console.error('데이터를 가져오는 중 오류가 발생했습니다.', error);
  });

1. guests.json 파일에는 다음과 같은 형식의 JSON 데이터가 포함되어 있을 것으로 예상됩니다.

[
  {
    "name": "홍길동",
    "message": "방명록을 작성하였습니다."
  },
  {
    "name": "김철수",
    "message": "안녕하세요! 방명록에 남깁니다."
  },
  // 추가적인 방명록 데이터
]

위의 예시는 JSON 데이터를 가져와 방명록을 생성하는 간단한 방법입니다. 데이터를 가져올 때에는 주의하여 CORS 정책을 준수하도록 해야합니다.

이제 자바스크립트로 JSON 데이터를 이용하여 방명록을 생성하는 방법을 알게 되었습니다. 추가적인 기능을 구현하려면 데이터를 다양하게 처리하는 방법을 익혀야 할 것입니다.

#javascript #JSON