JSON(JavaScript Object Notation)은 자바스크립트 객체를 표현하기 위한 경량 데이터 형식입니다. 자바스크립트에서 JSON 데이터를 이용하여 문서를 생성하려면 다음과 같은 단계를 따를 수 있습니다.

1. JSON 데이터 가져오기

첫 번째 단계는 JSON 데이터를 가져오는 것입니다. 이 데이터는 AJAX 요청이나 브라우저의 Fetch API를 사용하여 서버에서 가져올 수 있습니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터에 접근하여 다음 단계로 이동
  });

2. 문서 요소 생성하기

다음으로는 JSON 데이터를 기반으로 문서 요소를 생성해야 합니다. 예를 들어, JSON 데이터에는 제목과 내용이 들어있다고 가정해보겠습니다.

const title = data.title;
const content = data.content;

const titleElement = document.createElement('h1');
titleElement.textContent = title;

const contentElement = document.createElement('p');
contentElement.textContent = content;

3. 문서에 요소 추가하기

마지막으로, 생성한 문서 요소를 실제 문서에 추가해야 합니다. 이를 위해 적절한 부모 요소를 찾은 후, 생성한 요소를 추가합니다.

const parentElement = document.querySelector('.container');
parentElement.appendChild(titleElement);
parentElement.appendChild(contentElement);

이제 JSON 데이터를 이용하여 자바스크립트로 문서를 생성할 수 있습니다. 이러한 방법을 사용하면 동적인 웹 페이지를 만들거나 서버에서 가져온 데이터를 표시하는 데 유용합니다.

#javascript #JSON