JSON

1. JSON

JSON(JavaScript Object Notation)은 자바스크립트 객체 표기법을 기반으로 한 데이터 교환 형식으로, 사람도 읽기 쉽고 기계도 쉽게 분석하고 생성할 수 있는 텍스트 기반의 데이터 포맷입니다. 일반적으로 서버와 클라이언트 간에 데이터를 주고받을 때 많이 사용되며, 구조는 키-값 쌍으로 이루어진 객체 형태나 배열 형태를 사용합니다. 자바스크립트에서는 JSON.stringify()를 사용해 객체를 JSON 문자열로 변환하고, JSON.parse()를 사용해 JSON 문자열을 다시 객체로 변환할 수 있습니다. 언어에 독립적이면서도 자바스크립트와 호환성이 뛰어나 웹 개발뿐만 아니라 다양한 API 통신, 데이터 저장 및 전송 등에 널리 활용됩니다.

 

 

2. JSON 문법 구조

1. 객체(Object)

• 중괄호 {} 사용
• 내부에 "key": value 형식으로 속성-값 쌍을 나열
• 각 쌍은 쉼표 ,로 구분
• 값으로는 문자열, 숫자, 불리언, 배열, 객체 모두 가능

{
  "name": "김사과",
  "age": 20,
  "isStudent": true,
  "skills": ["HTML", "CSS", "JavaScript"]
}

 

2. 배열(Array)

• 대괄호 [] 사용
• 여러 개의 값을 순서대로 나열
• 요소는 숫자, 문자열, 객체 등 다양한 데이터 가능

[
  "사과",
  "바나나",
  "오렌지"
]

 

3. JSON 안에 JSON (중첩 구조)

• 객체 안에 객체, 객체 안에 배열도 가능
• 실제 API 응답이나 설정 파일에서 많이 사용됨

{
  "name": "김사과",
  "address": {
    "city": "서울",
    "zipcode": "12345"
  },
  "skills": ["HTML", "CSS", "JavaScript"]
}

 

4. JSON 규칙 (중요)

• 문자열은 반드시 큰따옴표 " ", 작은따옴표 ' '는 에러 발생
• 키(key)도 반드시 쌍따옴표 " "로 감싸야 함
• 값(value)에는 객체, 배열, 문자열, 숫자, 불리언, null 사용 가능
• 마지막 항목 뒤에는 쉼표 금지
• JSON은 순수 데이터 형식이기 때문에 //, /* */ 같은 주석 사용 불가

 

 

3. JSON에서 허용되는 데이터 타입

 

 

4. 자바스크립트에서 JSON 사용

1. JSON 객체를 문자열로 변환 (JSON.stringify())

객체를 문자열로 변환하면 서버에 전송하기 쉬워집니다.

const user = {
  name: "김사과",
  age: 20
};

const jsonStr = JSON.stringify(user);
console.log(jsonStr);

 

2. JSON 문자열을 자바스크립트 객체로 변환 (JSON.parse())

서버에서 받은 JSON 데이터를 실제로 사용할 수 있는 자바스크립트 객체로 변환

const jsonStr = '{"name":"김사과","age":20}';
const userObj = JSON.parse(jsonStr);

console.log(userObj.name);

 

3. JSON 데이터를 HTML에 출력하기

JSON 형태의 데이터를 DOM에 출력

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

<script>
  const user = {
    name: "김사과",
    age: 20,
    job: "프론트엔드 개발자"
  };

  const container = document.getElementById("info");
  container.innerHTML = `
    <p>이름: ${user.name}</p>
    <p>나이: ${user.age}</p>
    <p>직업: ${user.job}</p>
  `;
</script>

 

4. JSON 배열을 HTML 목록으로 출력하기

JSON 배열을 순회하며 <li> 요소로 출력합니다.

<ul id="fruits"></ul>

<script>
  const fruits = ["사과", "바나나", "포도"];
  const list = document.getElementById("fruits");

  fruits.forEach(fruit => {
    const li = document.createElement("li");
    li.textContent = fruit;
    list.appendChild(li);
  });
</script>

 

5. 중첩된 JSON 정보 출력

중첩된 객체 user.address.city에 접근하는 방법

<div id="profile"></div>

<script>
  const user = {
    name: "김사과",
    age: 20,
    address: {
      city: "서울",
      zip: "12345"
    }
  };

  const div = document.getElementById("profile");
  div.innerHTML = `
    <p>이름: ${user.name}</p>
    <p>도시: ${user.address.city}</p>
    <p>우편번호: ${user.address.zip}</p>
  `;
</script>

 

6. 입력값을 JSON 객체로 만들기

폼 입력값으로 JSON 객체를 만들고 문자열로 변환

<input type="text" id="nameInput" placeholder="이름 입력">
<input type="number" id="ageInput" placeholder="나이 입력">
<button onclick="saveUser()">저장</button>

<script>
  function saveUser() {
    const name = document.getElementById("nameInput").value;
    const age = document.getElementById("ageInput").value;

    const user = {
      name: name,
      age: Number(age)
    };

    console.log("JSON 문자열:", JSON.stringify(user));
  }
</script>

 

7. JSON 배열 → HTML 테이블 생성

JSON 배열을 반복해서 테이블 형태로 출력

<table border="1" id="userTable">
  <thead>
    <tr><th>이름</th><th>나이</th></tr>
  </thead>
  <tbody></tbody>
</table>

<script>
  const users = [
    { name: "김사과", age: 20 },
    { name: "반하나", age: 25 },
    { name: "오렌지", age: 30 }
  ];

  const tbody = document.querySelector("#userTable tbody");

  users.forEach(user => {
    const row = `<tr><td>${user.name}</td><td>${user.age}</td></tr>`;
    tbody.innerHTML += row;
  });
</script>