1. JavaScript Object Notation

데이터 표현 포멧. 비슷하게는 xml이 있다

• 자바스크립트 객체 표기법으로 작성된 텍스트이다

• 웹에서 정보를 전송하거나 응용프로그램에서 설정 파일을 작성하는데 주로 사용된다

• 자바스크립트의 서브셋. 자바스트립트에서 사용하는 자료형들과 형태도 비슷하다

• 키값쌍을 직렬화해 데이터를 나타낸다
  직렬화 : 객체를 문자열로 변환하는것

• 장점 : 가볍고, 사람이 읽고 쓰기에 쉽다, 자바스크립트와 비슷해 웹에서 복잡한 파싱이나 번역없이 사용하기 좋다

• 단점 : 자료형 종류가 적고, 다른 출처에서 받아온 같은 이름의 키가 있다면 구분하기 어려울 수도 있다

2. JSON이 표현 가능한 자료형

• string
  ex) "key": "value"
• number :
  ex) "key": 123
• booleans
  ex) "key": true
• arrays
  ex) "key": [1, true, "data"]
• objects
  ex) {"key": "value"}
• null
  ex) "key": null

3. json vs xml

• 같은 데이터를 json과 xml로 작성하면 아래와 같다

json

{"widget": {
    "debug": "on",
    "window": {
        "title": "Sample Konfabulator Widget",
        "name": "main_window",
        "width": 500,
        "height": 500
    },
    "image": { 
        "src": "Images/Sun.png",
        "name": "sun1",
        "hOffset": 250,
        "vOffset": 250,
        "alignment": "center"
    },
    "text": {
        "data": "Click Here",
        "size": 36,
        "style": "bold",
        "name": "text1",
        "hOffset": 250,
        "vOffset": 100,
        "alignment": "center",
        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
    }
}}    

xml

<widget>
    <debug>on</debug>
    <window title="Sample Konfabulator Widget">
        <name>main_window</name>
        <width>500</width>
        <height>500</height>
    </window>
    <image src="Images/Sun.png" name="sun1">
        <hOffset>250</hOffset>
        <vOffset>250</vOffset>
        <alignment>center</alignment>
    </image>
    <text data="Click Here" size="36" style="bold">
        <name>text1</name>
        <hOffset>250</hOffset>
        <vOffset>100</vOffset>
        <alignment>center</alignment>
        <onMouseUp>
            sun1.opacity = (sun1.opacity / 100) * 90;
        </onMouseUp>
    </text>
</widget>

• json은 키값쌍을 직렬화하는 반면, xml은 DOM을 직렬화한다. 그런만큼 json이 더 간단하지만 xml은 구조표현이나 datetime같은 더 다양한 자료형을 지원한다

4. json을 이용한 HTTP 통신 예시

Request : request body에 이메일, 비밀번호를 json 포멧으로 담아 로그인 엔드포인트에 요청

POST /login HTTP/1.1
Accept: application/json, */*
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Length: 49
Content-Type: application/json
Host: localhost:5000
User-Agent: HTTPie/1.0.3

{
    "email": "hi@naver.com",
    "password": "test1234"
}

Response : 이메일, 비밀번호 확인 후 엑세스 토큰을 json 포멧으로 담아 응답

HTTP/1.0 200 OK
Access-Control-Allow-Origin: *
Content-Length: 141
Content-Type: application/json
Date: Sun, 28 Feb 2021 16:55:33 GMT
Server: Werkzeug/1.0.1 Python/3.7.9

{
    "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo0LCJleHAiOjE2MTQ2MTc3MzN9.jlervHF_BW7F3mdWcR1KuHjxHYzAINhPa5IoIvUe-rY"
}