자바스크립트에서 JSON 데이터를 이용하여 동적으로 페이지 로딩하기

15 Sep 2023

javascript

최근 웹 개발에서는 사용자 경험의 향상을 위해 페이지를 동적으로 로딩하는 경우가 많아지고 있습니다. JSON 데이터를 이용하여 동적으로 페이지를 생성하는 방법은 매우 효과적이며 널리 사용되고 있습니다. 이번 글에서는 자바스크립트를 이용하여 JSON 데이터를 받아와 페이지를 동적으로 로딩하는 방법에 대해 알아보겠습니다.

JSON 데이터란?

JSON(JavaScript Object Notation)은 간단한 데이터 교환 형식으로, 텍스트 형태로 구성되어 있습니다. JSON 형식은 이름-값 쌍으로 구성되며, 중괄호와 대괄호로 데이터를 묶어 표현합니다. JSON 데이터는 일반적으로 웹 서버에서 클라이언트로 데이터를 전송하거나, 클라이언트에서 서버로 데이터를 전송할 때 사용됩니다.

JSON 데이터를 로딩하여 페이지에 표시하기

JSON 데이터 가져오기
```
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onload = function() {
    if (xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        // 데이터를 처리하는 함수 호출
        processJSONData(data);
    }
};
xhr.send();
```
위 코드는 XMLHttpRequest 객체를 생성하여 서버에서 JSON 데이터를 비동기적으로 가져오는 방법입니다. data.json은 JSON 데이터가 저장된 URL 주소입니다. 가져온 데이터는 JSON.parse() 함수를 사용하여 JavaScript 객체 형태로 변환하여 변수 data에 저장됩니다.

데이터 처리하기

function processJSONData(data) {
    var container = document.getElementById('container');
    for (var i = 0; i < data.length; i++) {
        var item = document.createElement('div');
        var title = document.createElement('h2');
        var content = document.createElement('p');
        title.textContent = data[i].title;
        content.textContent = data[i].content;
        item.appendChild(title);
        item.appendChild(content);
        container.appendChild(item);
    }
}

processJSONData() 함수는 가져온 JSON 데이터를 가지고 원하는 HTML 요소를 동적으로 생성하여 페이지에 추가합니다. 위 코드에서는 데이터의 title과 content 값을 이용하여 div, h2, p 요소를 생성하고, 해당 값을 텍스트로 설정한 후, 각각의 요소를 조립하여 페이지에 추가합니다. 이렇게 생성된 요소들은 container라는 아이디를 가지고 있는 HTML 요소에 추가됩니다.

HTML 구조
```
<div id="container"></div>
```
위 코드는 동적으로 생성된 요소들이 추가될 부모 요소를 의미합니다. 해당 요소의 아이디는 자유롭게 설정할 수 있으며, 자신이 원하는 위치에 추가할 수 있습니다.

마치며

이번 글에서는 자바스크립트를 이용하여 JSON 데이터를 받아와 페이지를 동적으로 로딩하는 방법에 대해 알아보았습니다. JSON 데이터를 이용하여 웹 페이지를 동적으로 구성할 수 있으므로, 다양한 데이터를 활용하여 사용자가 더 나은 경험을 할 수 있는 웹 애플리케이션을 개발해보세요. #자바스크립트 #JSON #페이지로딩