EP9. JSON

const obj = {
  name: "foo",
  age: 30
};

const objStr = JSON.stringify(obj);​

---

JSON은 서로 다른 애플리케이션이 데이터를 주고받기 위해 사용하는 표준적인 형식이다

 

JSON은 JavaScript Object Notation의 약자다.

말 그대로 자바스크립트 객체 표기법에서 출발한 데이터 표현 방식이다.

이름만 보면 자바스크립트에서만 쓰이는 것처럼 느껴질 수 있지만, 실제로는 그렇지 않다.

 

지금은 웹 개발을 포함해 다양한 환경에서 서로 다른 언어로 작성된 애플리케이션끼리 데이터를 주고받을 때

사용하는 대표적인 형식으로 자리 잡았다.

 

예를 들어 브라우저는 자바스크립트로 동작하고,

서버는 자바나 파이썬, 자바스크립트, 고 같은 다양한 언어로 구현될 수 있다.

 

이때 서로 다른 언어가 데이터를 주고받으려면 공통으로 이해할 수 있는 형식이 필요하다.

JSON은 바로 그 역할을 한다. 사람이 보기에도 비교적 읽기 쉽고,

프로그램이 파싱하기도 쉬워서 웹 API에서 사실상의 표준처럼 사용되고 있다.

 

---

JSON의 형식

 

JSON의 기본 구조는 키(key)와 값(value) 의 쌍이다.

 

객체 형태로 데이터를 표현할 때, 하나의 키에 하나의 값을 연결하는 방식으로 정보를 담는다.

예를 들어 이름, 나이, 도시 같은 정보를 JSON으로 표현하면 각각의 항목이 키와 값의 쌍으로 구성된다.

 

여기서 중요한 규칙은 키에는 문자열만 올 수 있다는 점이다.

그리고 JSON에서는 키를 반드시 큰따옴표로 감싸야 한다.

 

반면 값에는 비교적 다양한 타입이 들어갈 수 있다.

문자열, 숫자, boolean, null은 물론이고, 배열이나 또 다른 JSON 객체도 값으로 가질 수 있다.

 

---

직렬화와 역직렬화

 

 

JSON을 이해할 때 꼭 함께 알아야 하는 개념이 직렬화(serialization) 와 역직렬화(deserialization) 다.

 

이 두 과정은 프로그래밍 언어 안에서 사용하는 객체를 네트워크나 파일로 전달할 수 있는 형태로 바꾸고,

반대로 전달받은 데이터를 다시 객체처럼 사용할 수 있는 형태로 되돌리는 작업이다.

 

직렬화는 쉽게 말해 객체를 전송 가능한 형태로 변환하는 과정이다.

자바스크립트 객체는 프로그램 안에서는 편하게 사용할 수 있지만, 그대로 네트워크를 통해 보낼 수는 없다.

그래서 이를 JSON 문자열 형태로 바꾸어 전송하게 된다.

자바스크립트에서는 이 작업을 JSON.stringify()로 수행한다.

즉, 객체를 문자열 JSON으로 바꾸는 것이 직렬화다.

 

const obj = {
  name: "foo",
  age: 30
};

const objStr = JSON.stringify(obj);

 

반대로 역직렬화는 JSON 문자열을 다시 자바스크립트 객체로 바꾸는 과정이다.

서버로부터 받은 JSON 데이터는 처음에는 단순한 텍스트이기 때문에,

자바스크립트 코드에서 속성에 접근하거나 값으로 활용하려면 객체 형태로 바꿔줘야 한다.

이때 사용하는 것이 JSON.parse()다.

 

const jsonStr = '{"name":"foo","age":30}';

const obj = JSON.parse(jsonStr);

 

이 개념이 중요한 이유는, 나중에 AJAX 요청으로 데이터를 주고받을 때 이런 변환이 자연스럽게 등장하기 때문이다.

브라우저가 자바스크립트 객체를 서버로 보낼 때는 JSON 문자열로 바꾸어 보내야 하고,

서버가 JSON 형태로 응답한 데이터를 브라우저가 사용하려면 다시 객체로 바꾸어야 한다.

즉, 직렬화와 역직렬화는 단순한 문법 지식이 아니라 웹에서 데이터를 주고받는 실제 과정의 핵심이다.