JSON

---

JSON은 JavaScript Object Notation의 약자로, 컴퓨터와 컴퓨터, 또는 웹 브라우저와 서버가 데이터를 주고받을 때 사용하는 가장 표준적인 텍스트 기반의 데이터 포맷입니다.

자바스크립트의 객체(Object) 문법을 본떠서 만들어졌기 때문에 이름에 '자바스크립트'가 들어가지만, 실제로는 언어에 종속되지 않는 독립적인 데이터 포맷입니다. 파이썬, 자바, C++ 등 현존하는 거의 모든 프로그래밍 언어에서 JSON 데이터를 읽고 쓸 수 있습니다.

1. JSON이 등장한 이유

JSON이 대세가 되기 전에는 XML이라는 포맷을 주로 사용했습니다.

XML

 

<user>
  <name>홍길동</name>
  <age>26</age>
</user>

XML은 데이터를 하나 표현할 때마다 닫는 태그까지 양쪽에 적어야 해서 파일 용량이 커지고 가독성이 떨어졌습니다. 이에 반해 JSON은 군더더기 없이 딱 데이터만 골라 적기 때문에 용량이 가볍고 사람이 눈으로 읽기에도 훨씬 직관적입니다.

JSON

 

{
  "name": "홍길동",
  "age": 26
}

2. JSON의 핵심 문법 규칙 (매우 중요)

자바스크립트의 객체 문법과 매우 비슷하지만, JSON만의 엄격한 규칙이 존재합니다. 이 규칙을 지키지 않으면 데이터가 망가져 에러가 발생합니다.

• 키(Key)와 값(Value)의 쌍: 데이터는 항상 주제: 내용 형태로 이루어집니다.
• 반드시 큰따옴표(") 사용:
  • JSON에서 문자를 적을 때는 무조건 큰따옴표만 허용됩니다.
  • 작은따옴표(')를 쓰거나 따옴표를 생략하면 올바른 JSON이 아닙니다. (예: "name" (O), 'name' (X), name (X))
• 이름 뒤의 쉼표(,) 규칙: 데이터가 여러 개일 때는 쉼표로 연결하되, 맨 마지막 데이터 뒤에는 쉼표를 붙이지 않습니다.

3. JSON에서 사용할 수 있는 데이터 타입

JSON 내부에는 아래의 6가지 타입만 들어갈 수 있습니다.

JSON

 

{
  "name": "Kim",              // 1. 문자열 (String)
  "age": 26,                  // 2. 숫자 (Number)
  "isDeveloper": true,        // 3. 불리언 (Boolean: true/false)
  "hobbies": ["cooking", "js"], // 4. 배열 (Array)
  "address": {                // 5. 객체 (Object)
    "city": "Seoul",
    "zipcode": "12345"
  },
  "middleName": null          // 6. 널 (Null: 빈 값)
}

⚠️ 주의: JSON에 넣을 수 없는 것 자바스크립트 객체와 달리, JSON 내부에는 함수(Function), undefined, 주석을 절대로 넣을 수 없습니다.

4. 자바스크립트에서 JSON 다루기

이전에 함께 배웠던 것처럼, 자바스크립트에서는 딱 두 가지 내장 메소드로 JSON을 조작합니다.

• JSON.stringify(object): 자바스크립트 객체를 네트워크로 전송할 수 있도록 JSON 문자열로 변환합니다. (직렬화)
• JSON.parse(jsonString): 서버에서 받은 JSON 문자열을 다시 자바스크립트 객체로 변환하여 마침표(.)로 접근할 수 있게 만듭니다. (역직렬화)

JavaScript

 

const user = { name: "Lee", age: 30 };

// 1. 전송용 데이터로 만들기
const sendData = JSON.stringify(user); 
console.log(sendData); // '{"name":"Lee","age":30}' (문자열)

// 2. 수신한 데이터 해석하기
const receiveData = JSON.parse(sendData);
console.log(receiveData.name); // "Lee" (객체로 복원됨)

📋 요약

• JSON은 오늘날 웹상에서 데이터를 주고받는 가장 가볍고 표준적인 텍스트 형식입니다.
• 자바스크립트 객체와 비슷하지만 모든 키와 문자열 값에 반드시 큰따옴표(")를 써야 하는 엄격함이 있습니다.
• 데이터 용량이 작아 웹 브라우저와 백엔드 서버 간의 비동기 통신(Ajax/Fetch API)에서 독점적으로 사용됩니다.

모던 웹 데이터의 근간이 되는 JSON의 개념을 완벽하게 정리하셨습니다!

---