많은 웹 개발자들이 자바스크립트를 이용하여 동적인 웹 페이지를 만들고 있습니다. 이러한 동적인 웹 페이지를 구현하기 위해서는 데이터와 템플릿을 결합하여 원하는 형태의 HTML을 생성해야 합니다. 이를 위해 자바스크립트에서 JSON 데이터를 이용하여 템플릿 엔진을 만들어 볼 것입니다.

JSON 데이터란?

JSON은 “JavaScript Object Notation”의 약자로, 데이터를 저장하고 교환하기 위한 경량화된 형식입니다. JSON 데이터는 자바스크립트 객체와 유사한 형태로 표현되며, 다양한 프로그래밍 언어에서 사용할 수 있습니다.

템플릿 엔진이란?

템플릿 엔진은 정해진 템플릿과 데이터를 결합하여 원하는 결과물을 생성하는 도구입니다. 템플릿 엔진을 이용하면 동적인 웹 페이지를 생성하기가 더욱 편리해집니다.

JSON 데이터로 템플릿 엔진 만들기

아래는 자바스크립트를 이용하여 JSON 데이터를 이용한 간단한 템플릿 엔진의 예시 코드입니다:

const template = `
    <div>
        <h1>${data.title}</h1>
        <p>${data.description}</p>
        <ul>
        ${data.items.map(item => `<li>${item}</li>`).join('')}
        </ul>
    </div>
`;

const data = {
    title: "템플릿 엔진 예시",
    description: "JSON 데이터를 이용하여 동적인 HTML을 생성하는 예시입니다.",
    items: ["항목 1", "항목 2", "항목 3"]
};

const renderedTemplate = template.replace(/\${(.*?)}/g, (match, key) => eval(key));

document.getElementById("container").innerHTML = renderedTemplate;

위 코드에서는 템플릿 문자열을 변수에 저장하고, JSON 데이터를 이용하여 템플릿에 동적으로 값을 채웁니다. 마지막으로, innerHTML을 이용하여 생성된 HTML을 원하는 위치에 추가합니다.

결론

JSON 데이터를 이용하여 템플릿 엔진을 생성하는 방법을 살펴보았습니다. 이를 통해 동적인 웹 페이지를 간편하게 구현할 수 있습니다. 템플릿 엔진은 웹 개발에서 많이 사용되는 도구이므로, 다양한 상황에 맞게 유연하게 활용할 수 있습니다.

#자바스크립트 #JSON #템플릿엔진