JSON 데이터를 활용한 동적 웹페이지 생성 🌐

작성: 2024년 04월 26일읽기: 약 4분

웹 개발의 세계에 오신 것을 환영합니다! 오늘은 웹 개발에서 자주 사용되는 데이터 형식인 JSON을 활용하여 동적 웹페이지를 만드는 방법을 알아보겠습니다. JSON은 JavaScript Object Notation의 약자로, 데이터를 저장하거나 전송할 때 사용되는 경량의 데이터 교환 형식입니다. 웹 개발에 있어서 JSON은 매우 중요한 역할을 합니다. 그럼, 어떻게 JSON 데이터를 활용해 웹페이지에 동적인 요소를 추가할 수 있는지 함께 살펴보겠습니다.

JSON 데이터란?

간단히 말해서, JSON은 데이터를 구조화하는 방법입니다. 예를 들어, 사용자 정보를 JSON 형식으로 저장할 수 있습니다:

{
  "name": "John Doe",
  "age": 30,
  "isDeveloper": true
}

이렇게 JSON을 사용하면, 데이터를 쉽게 읽고 쓸 수 있으며, 다양한 프로그래밍 언어에서 사용할 수 있습니다.

JSON 데이터를 웹페이지에 표시하기

웹페이지에 JSON 데이터를 동적으로 표시하는 것은 생각보다 간단합니다. 여기서는 JavaScript를 사용하여 JSON 데이터를 웹페이지에 표시하는 기본적인 방법을 알아보겠습니다.

먼저, JSON 데이터를 변수에 저장합니다:

const userData = {
  "name": "John Doe",
  "age": 30,
  "isDeveloper": true
};

다음으로, 이 데이터를 HTML 요소에 표시합니다. 예를 들어, 사용자 이름을 <div> 태그에 표시하고 싶다면 다음과 같이 할 수 있습니다:

document.getElementById('user-name').innerText = userData.name;

여기서 getElementById는 HTML 문서에서 특정 ID를 가진 요소를 찾는 JavaScript 메소드입니다. user-name이라는 ID를 가진 <div> 태그에 사용자의 이름을 표시하게 됩니다.

실습: 동적 웹페이지 만들기

이제 간단한 실습을 통해 배운 내용을 적용해보겠습니다. 목표는 JSON 데이터를 사용하여 사용자 정보를 웹페이지에 동적으로 표시하는 것입니다.

HTML 파일을 만들고, <body> 태그 안에 사용자 정보를 표시할 <div> 태그를 추가합니다:

<div id="user-info"></div>

JavaScript를 사용하여 JSON 데이터를 생성하고, 이를 <div> 태그에 표시합니다:

const userInfo = {
  "name": "Jane Doe",
  "age": 28,
  "isDeveloper": false
};

document.getElementById('user-info').innerHTML = `Name: ${userInfo.name}, Age: ${userInfo.age}, Developer: ${userInfo.isDeveloper}`;

위 코드를 실행하면, user-info라는 ID를 가진 <div> 태그에 사용자의 이름, 나이, 개발자 여부가 표시됩니다.

이렇게 JSON 데이터를 활용하여 웹페이지에 동적인 요소를 추가하는 방법을 알아보았습니다. JSON은 웹 개발에서 데이터를 다루는 데 있어 매우 유용하며, 이를 통해 사용자 경험을 향상시킬 수 있습니다. 계속해서 연습하고, 다양한 데이터와 상호작용하는 동적 웹페이지를 만들어보세요!