JSON (JavaScript Object Notation) 개념 정리

HTTP(Hypertext Transfer Protocol)은 hyperlink 뿐만 아니라 데이터 통신에 전반적으로 사용되는 resources(문서, image files 등...)에 해당하는 Hypertext를 전송하기 위한 규칙을 정의하는 protocol(통신 규약)이다.

 

HTTP를 이용해 서버와 통신을 하는 방법에는 AJAX(Asynchronous JavaScript And XML)를 사용한다.

 

AJAX: 웹 페이지에서 동적으로 서버와 데이터를 주고받을 수 있는 기술을 의미한다. 대표적인 예로 XHR(XML HTTP Request)라는 object가 있다. 해당 object를 사용하면, 간단하게 서버와 데이터 통신이 가능하다.

 

XML: HTML과 같은 markup language 중 하나로 최근에는 JSON을 주로 사용한다.

 

AJAX, XHR에 계속해서 XML이 포함되어 XML만을 이용해야 서버와 데이터 통신이 가능하다고 생각할 수 있는데, 사실은 그렇지 않고 많은 마크업 언어를 이용해서 서버와 데이터 통신이 가능하다고 한다.

 

지금 정리할 JSON 또한 이에 많이 사용되고 있는 언어 중 하나이다.

JSON(JavaScript Object Notation) 1999년 ECMAScript 3rd에서 JavaScript의 object에서 큰 영감을 받아 만들어진 data format으로 JavaScript의 객체 형태를 그대로 따와서 {key : value} 양식을 갖는다.

---

JSON의 특징

1. 가장 간단한 데이터 상호 교환 양식이다.

2. 가벼운 텍스트 기반의 구조이다.

3. 읽기 쉽다.

4. key - value 쌍의 구조이다.

5. data를 서버와 주고 받을 때, serialization(직렬화)할 때 사용한다.

6. programming language, platform에 상관없이 사용 가능하다.

---

JSON을 공부한다는 것은 결국

1. JSON을 어떻게 serialzation해서 object로 변환할까?

2. Object를 어떻게 deserialization 해서 JSON으로 변환할까?

 

이 두 가지를 공부하는 것과 같다고 한다.

---

1. JSON.stringfy

const tiger = {
    name: 'hoho',
    color: 'orange',
    size: null,
    birthDate: new Date(),
    jump: () => {
        console.log(`${this.name} can jump!`);
    },
};

let json = JSON.stringify(tiger);
console.log(json);

---------------------
{"name":"hoho","color":"orange","size":null,"birthDate":"2022-07-29T16:27:54.390Z"}

stringfy method를 이용해서 object를 문자열화 해서 JSON으로 변환할 수 있다. JSON의 경우 single quote가 아니라 double quote로 string을 표현하는 양식을 기본으로 한다.

 

2. JSON.parse

const obj = JSON.parse(json);
console.log(obj);

----------
{name: 'hoho', color: 'orange', size: null, birthDate: '2022-07-29T16:30:00.065Z'}
birthDate: "2022-07-29T16:30:00.065Z"
color: "orange"
name: "hoho"
size: null
[[Prototype]]: Object

parse method를 이용해서 json을 parsing해 object로 변환할 수 있다. 위 코드 하단 부분에 나온 출력 결과처럼 객체 형태로 json을 parsing 한다.