자바스크립트는 JSON(JavaScript Object Notation) 형식의 데이터를 쉽게 다룰 수 있는 강력한 기능을 제공합니다. 여기에는 자바스크립트에서 JSON 데이터를 사용하여 문서를 생성하는 방법을 알아보겠습니다.

JSON 개요

JSON은 경량 데이터 교환 형식으로, 키-값 쌍으로 이루어진 구조를 갖고 있습니다. 이는 자바스크립트 객체와 매우 비슷한 형태이며, 다양한 프로그래밍 언어와 호환되는 데이터 형식입니다.

JSON 데이터 생성하기

JSON 데이터를 생성하는 가장 간단한 방법은 자바스크립트 객체를 JSON.stringify() 함수를 사용하여 문자열로 변환하는 것입니다. 아래는 예시입니다:

const jsonData = {
  name: "John Doe",
  age: 30,
  email: "johndoe@example.com"
};

const jsonString = JSON.stringify(jsonData);
console.log(jsonString);

이 예제에서는 jsonData 객체를 JSON.stringify() 함수를 사용하여 문자열로 변환합니다. 변환된 문자열은 jsonString 변수에 저장되며, 콘솔에 출력됩니다.

JSON 데이터 파싱하기

JSON 데이터를 파싱하여 자바스크립트 객체로 변환하는 방법도 매우 간단합니다. JSON.parse() 함수를 사용하면 됩니다. 아래는 예시입니다:

const jsonString = '{"name":"John Doe","age":30,"email":"johndoe@example.com"}';

const jsonData = JSON.parse(jsonString);
console.log(jsonData);

이 예제에서는 jsonString 문자열을 JSON.parse() 함수를 사용하여 자바스크립트 객체로 변환합니다. 변환된 객체는 jsonData 변수에 저장되며, 콘솔에 출력됩니다.

JSON 데이터 사용하기

JSON 데이터를 사용하여 문서를 생성하려면, 자바스크립트 객체의 속성을 활용하면 됩니다. 아래는 예시입니다:

const jsonData = {
  name: "John Doe",
  age: 30,
  email: "johndoe@example.com"
};

const document = `
<h1>${jsonData.name}</h1>
<p>Age: ${jsonData.age}</p>
<p>Email: ${jsonData.email}</p>
`;

console.log(document);

이 예제에서는 jsonData 객체의 속성을 템플릿 리터럴을 사용하여 HTML 문서로 생성합니다. 생성된 문서는 document 변수에 저장되며, 콘솔에 출력됩니다.

결론

자바스크립트에서 JSON 데이터를 사용하여 문서를 생성하는 방법을 알아보았습니다. JSON.stringify() 함수를 사용하여 자바스크립트 객체를 JSON 문자열로 변환하고, JSON.parse() 함수를 사용하여 JSON 문자열을 자바스크립트 객체로 파싱할 수 있습니다. 이를 활용하여 JSON 데이터를 사용하여 웹 문서를 동적으로 생성할 수 있습니다. JSON 형식은 데이터 교환에 널리 사용되므로, 자바스크립트에서 JSON 데이터를 다루는 방법을 숙지하는 것은 매우 유용합니다.