JSON(JavaScript Object Notation)은 자바스크립트에서 데이터를 표현하기 위한 가벼운 형식입니다. 이 형식은 웹 애플리케이션에서 데이터를 교환 및 저장하는 데 매우 흔히 사용됩니다. 이번 블로그 포스트에서는 자바스크립트로 JSON 데이터를 가져와 화면에 표시하는 방법에 대해 알아보겠습니다.

JSON 데이터 가져오기

일반적으로 JSON 데이터는 웹 서버로부터 가져옵니다. XMLHttpRequest 또는 Fetch API를 사용하여 데이터를 가져올 수 있습니다. 이 예시에서는 Fetch API를 사용하도록 하겠습니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터를 처리하는 코드를 작성합니다.
    displayData(data);
  })
  .catch(error => {
    // 에러 처리 코드를 작성합니다.
    console.error(error);
  });

위 코드에서 fetch('data.json')은 ‘data.json’ 파일을 가져오는 HTTP 요청을 보냅니다. 그리고 response.json()은 가져온 데이터를 JSON 형식으로 변환합니다.

데이터 화면에 표시하기

JSON 데이터를 가져온 후에는 해당 데이터를 자바스크립트를 사용하여 화면에 표시할 수 있습니다. 이를 위해 HTML 요소를 생성하거나 기존의 요소를 변경하는 방법을 사용할 수 있습니다.

function displayData(data) {
  // 데이터를 화면에 표시하는 코드를 작성합니다.
  const container = document.getElementById('data-container');
  container.innerHTML = '';

  data.forEach(item => {
    const titleElement = document.createElement('h3');
    titleElement.textContent = item.title;
    container.appendChild(titleElement);

    const descriptionElement = document.createElement('p');
    descriptionElement.textContent = item.description;
    container.appendChild(descriptionElement);
  });
}

위 코드에서 displayData 함수는 데이터를 받아 data-container라는 HTML 요소에 데이터를 표시합니다. 각 데이터 항목에 대해 h3 요소와 p 요소를 생성하여 제목과 설명을 표시합니다.

결론

이 블로그 포스트에서는 자바스크립트로 JSON 데이터를 가져와 화면에 표시하는 방법에 대해 알아보았습니다. JSON 데이터를 가져오기 위해서는 Fetch API를 사용하고, 가져온 데이터를 화면에 표시하기 위해서는 HTML 요소를 생성하거나 변경하는 방법을 사용할 수 있습니다. JSON 데이터를 활용하여 동적이고 인터랙티브한 웹 애플리케이션을 개발할 수 있습니다.