JSON 개념과 관련 함수(JSON.parse(), JSON.stringfy())

JSON

브라우저 위에서 동작하는 웹사이트나 웹어플리케이션과 같은 Client가 어떻게 Server와 통신할 수 있는지를 정의한 것이 바로 HTTP이다. HTTP는 Hypertext Transfer Protocal의 약자로, 어떻게 Hypertext를 서로 주고받을지를 규약한 프로토콜의 하나이다. Client는 Server에 data를 요청할 수 있고, Server는 Client에 응답하는 방식으로 진행된다. 그리고 여기서, Hypertext는 hyperlink, 문서, image 등 전반적인 resource를 일컫는다. 이렇게 Client가 Server와 데이터를 주고 받는 방식 중, 요즘 가장 많이 사용되는 것이 JSON이다. 아래가 그 예시이다. 

 

 

{
  "users": [
    {
      "Name": "gildong",
      "Nickname": "hong",
      "joined": {
        "month": "December",
        "day": 24
      }
    },
    {
      "Name": "sejong",
      "Nickname": "king",
      "joined": {
        "month": "November",
        "day": 13
      }
    }
  ]
}

 

JSON은 아래와 같은 특징을 가지고 있다. 

- Simplest data interchange format 

- Lightweight text-based structure 

- Easy to read

- Key-Value pairs

- Used for serialization(직렬화) and transmission of data between the network and network connection

- Independent programming language and platform (모든 언어, 플랫폼에서 사용가능하다는 점이 가장 좋은 점)

 

예를 들어, Client에서 토끼라는 object를 Server에 전송한다고 하면, {key: value}형태로 전송하면 된다. Server에서 다시 토끼를 받아올 때도, {key: value}의 string type으로 받아와서 다시 토끼라는 object로 변환해서 브라우저에 표기하게 된다. 

 

JSON 공부 Point

*serialization(직렬화) : 어떠한 데이터 구조를 송수신하거나 저장하기 위해 전송에 적합한 포맷으로 변환하는 과정.

Object를 어떻게 serialize(직렬화)해서 JSON으로 변환할지! 직렬화된 JSON을 어떻게 deserialize해서 Object로 변환할지!

 

Object to JSON

이때, 사용하는 것이 stringify()!

 

let json = JSON.stringify(true);
console.log(json); // object -> json: true

json = JSON.stringify(['apple', 'banana']);
console.log(json); // object -> json: ["apple", "banana"]

 

JSON to Object 

이때, 사용하는 것은 parse()!

 

json = JSON.stringify(rabbit); // json으로 만들었던 object를 
const obj = JSON.parse(json); // 다시 object로 만들고자 하면 parse를 쓰면 된다! 
console.log(obj); 

 

 

 

 

www.youtube.com/watch?v=FN_D4Ihs3LE