[JS] JSON(JavaScript Object Notation)과 자바스크립트

JSON(JavaScript Object Notation)이란?

JSON (JavaScript Object Notation)은 데이터를 교환할 때 주로 사용하는 경량의 데이터 형식이다. JSON은 텍스트 기반이며, 사람이 읽고 쓰기 쉽고, 기계가 해석하고 생성하기도 용이하다는 장점을 가지고 있다. 주로 웹 애플리케이션에서 서버와 클라이언트 간 데이터 교환을 할 때 많이 사용되는 JSON은 사람이 읽고 쓰기에 쉬운 형식을 제공하며, 자바스크립트에서 제공하는 메서드(JSON.parse(), JSON.stringify())를 사용하면 손쉽게 처리할 수 있다. JSON의 주요 특징은 경량, 텍스트 기반, 언어 독립적이라는 점이다.

 

---

JSON 구조

JSON은 기본적으로 키와 값 쌍으로 구성된다. 각 값은 문자열, 숫자, 배열, 객체, 불리언, null 등의 데이터 유형을 가질 수 있다.

{
  "name": "John Doe",          // 문자열
  "age": 30,                   // 숫자
  "isStudent": false,          // 불리언
  "courses": ["Math", "Science"],  // 배열
  "address": {                 // 객체
    "street": "123 Main St",
    "city": "Anytown"
  },
  "spouse": null               // null 값
}

 

객체(Object)

중괄호 {}로 묶인 키-값 쌍의 집합이다. 객체의 키는 항상 문자열이어야 하며, 값은 다양한 유형을 가질 수 있다.

{"key": "value"}

 

배열(Array)

대괄호 []로 묶인 값들의 순서 있는 목록이다. 배열의 요소들은 다양한 데이터 유형을 가질 수 있다.

["apple", "banana", "cherry"]

 

문자열(String)

큰따옴표 "로 묶인 문자들의 집합이다.

"Hello, World!"

숫자(Number)

정수 또는 부동소수점 숫자를 말한다.

42, 3.14

불리언(Boolean)

true 또는 false 값을 말한다.

true, false

값이 없음(null)

값이 없음을 나타내는 특별한 값이다.

null

 

---

JSON의 특징

구조가 간단하다.
JSON은 키와 값을 쌍으로 데이터를 표현한다. 데이터 구조는 객체 (Object) 또는 배열 (Array)로 구성될 수 있다.

{
  "name": "John",
  "age": 30,
  "isStudent": false
}

가볍다, 경량화되어있다.
JSON은 다른 데이터 포맷(예: XML) 보다 더 간결하고 가볍다. 이는 데이터를 전송하는 데 필요한 대역폭을 절약하고, 처리 성능을 높이는 데 도움이 된다. 예를 들어, JSON은 태그를 최소화하여 불필요한 데이터가 포함되지 않도록 하여, 보다 효율적인 데이터 전송이 가능하다. 또한, 크기가 작아 모바일 네트워크와 같은 제한된 대역폭 환경에서도 빠르게 데이터를 주고받을 수 있다.


텍스트 기반이다.
JSON은 텍스트 형식이기 때문에, 사람이 읽고 이해할 수 있으며, 텍스트 파일로 쉽게 저장하고 전송할 수 있다. 텍스트 기반 포맷은 디버깅 시 유리하며, 간단한 텍스트 에디터나 콘솔에서 바로 데이터를 확인하고 수정할 수 있는 장점이 있다. 예를 들어, JSON 파일을 개발자가 열어서 바로 수정하고, 다른 시스템에 전달할 수 있다.

 

독립적 언어이다.
JSON은 독립적 언어이다. JSON 포맷은 다양한 프로그래밍 언어에서 쉽게 처리할 수 있다. 각 언어에서 JSON을 파싱하고 생성하는 라이브러리나 API를 제공하기 때문에, 다양한 환경에서 데이터를 교환할 때 유용하다. 예를 들어, Python, JavaScript, Java, PHP 등 여러 언어에서 JSON을 다룰 수 있는 기능을 내장하고 있으며, 이를 통해 플랫폼 간 데이터 호환성이 뛰어나다.

 

기본 데이터 유형을 지원한다.
JSON은 문자열, 숫자, 불리언 값 (true/false), 배열 (Array), 객체 (Object), null 등의 기본 데이터 유형을 지원한다. 이 기본적인 데이터 유형들은 다양한 형태의 데이터를 표현하는 데 유용하다. 예를 들어, 배열은 여러 개의 데이터를 순차적으로 저장할 수 있고, 객체는 속성-값 쌍으로 데이터를 구조화하여 복잡한 데이터 모델을 간단히 표현할 수 있다.

{
  "name": "Alice",
  "age": 25,
  "isAdmin": true,
  "friends": ["Bob", "Charlie"],
  "address": null
}

구조적 표현이 가능하다.
JSON은 중첩된 구조를 지원하여, 복잡한 데이터를 표현할 수 있다. 예를 들어, 객체 안에 객체를 포함하거나 배열을 포함할 수 있다. 이를 통해 복잡한 관계를 가진 데이터를 효율적으로 표현할 수 있다. 예를 들어, 하나의 객체 안에 여러 개의 다른 객체나 배열을 포함하여, 트리 구조처럼 데이터를 구성할 수 있다. 이 특징은 계층적 데이터 구조를 다룰 때 유용하며, 복잡한 정보를 잘 조직하여 표현할 수 있게 해준다.

{
  "person": {
    "name": "John",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "Anytown"
    },
    "phoneNumbers": [
      {"type": "mobile", "number": "123-456-7890"},
      {"type": "home", "number": "987-654-3210"}
    ]
  }
}

표준화된 형식이다.
JSON은 RFC 7159와 ECMA-404 표준에 의해 정의된 데이터 형식이다. 이 표준화 덕분에 JSON은 다양한 시스템 간의 데이터 교환에 있어 일관성과 호환성을 보장한다. 표준화된 규격 덕분에, JSON을 처리하는 데 있어 언어나 플랫폼에 구애받지 않으며, 데이터의 해석이나 표현 방식에 있어 일관된 처리가 가능하다. 또한 JSON 포맷이 정의된 규칙을 따르기 때문에, 서로 다른 환경에서 발생할 수 있는 오류를 줄이고, 데이터의 정확성과 신뢰성을 높이는 데 기여한다.

 

---

 

JSON과 JavaScript

JSON은 JavaScript 객체의 표기법에서 파생되었지만, JSON은 언어 독립적이며 다양한 프로그래밍 언어에서 지원된다. JavaScript에서는 JSON 객체를 사용하여 JSON 데이터를 쉽게 처리할 수 있다.

 

JavaScript에서 JSON 처리

(1) JSON -> JavaScript 객체로 변환: JSON.parse()
서버로부터 받은 JSON 문자열을 JavaScript 객체로 변환할 때는 JSON.parse() 메서드를 사용한다.

const jsonString = '{"name": "John", "age": 30}';
const jsonObj = JSON.parse(jsonString);

console.log(jsonObj.name);  // "John"
console.log(jsonObj.age);   // 30

(2) JavaScript 객체 -> JSON으로 변환: JSON.stringify()
JavaScript 객체를 JSON 문자열로 변환하려면 JSON.stringify() 메서드를 사용한다. 서버로 데이터를 전송할 때 유용하다.

const person = {
  name: "John",
  age: 30,
  isStudent: false
};

const jsonString = JSON.stringify(person);

console.log(jsonString);  // '{"name":"John","age":30,"isStudent":false}'

 

---

 

JSON의 사용 예시

웹 API에서 JSON 사용

웹 애플리케이션에서 서버와 클라이언트 간의 데이터 통신에서 JSON은 매우 흔하게 사용된다.

//  fetch API를 사용하여 서버로부터 JSON 데이터를 받아오는 예시
fetch("https://api.example.com/data")
  .then(response => response.json())  // JSON 데이터로 변환
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("Error:", error);
  });

 

 

서버로 JSON 데이터 보내기

클라이언트에서 서버로 데이터를 JSON 형식으로 보내는 예시는 fetch 또는 XMLHttpRequest를 사용하여 데이터를 전송하는 방식이다.

const data = {
  name: "John",
  age: 30,
  isStudent: false
};

fetch("https://api.example.com/save", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)  // 객체를 JSON 문자열로 변환하여 전송
})
  .then(response => response.json())
  .then(result => console.log("Success:", result))
  .catch(error => console.error("Error:", error));