[JavaScript] JSON

Client와 Server가 어떻게 통신할 수 있는지를 정의한 것이 HTTP (HyperText Transfer Protocol) 이다.

Client가 Server에게 데이터를 request하고

Server는 Client에게 그에 맞는 데이터를 response한다.

Client에서 Server와 통신할 때는 fetch() API를 사용하거나 XHR (XMLHttpRequest) Object를 사용할 수 있다.

하지만 XML을 사용하면 불필요한 태그들이 많이 들어가서 파일의 사이즈가 커지고 가독성도 떨어진다.

따라서 XML은 최근 많이 사용되지 않고, JSON을 많이 사용한다.

 

 

 

JSON (JavaScript Object Notation)의 특징

---

• text를 기반으로 하고 있다.
• 읽기가 편하다.
• key-value 쌍으로 이루어져 있다.
• 데이터를 Server를 주고 받을 때 직렬화를 위해 사용한다.
• 프로그래밍 언어나 플랫폼에 상관 없이 사용할 수 있다.

JSON이라는 interface 안에는 parse, stringify 2가지 API가 있다.

함수의 이름은 동일하지만 파라미터에 차이가 있는 것을 오버로딩 이라고 한다.

stringify : Object를 받아와서 string으로 반환해주는 메소드 (직렬화)

parse : JSON의 string data를 받아와서 Object로 반환해주는 메소드 (역직렬화)

 

 

 

Object to JSON (Serialize)

---

stringify를 이용하여 Object를 JSON string data로 변환해준다. (직렬화)

let json = JSON.stringify(true);
console.log(true); // true

 

 

' ' (single quote) 대신 " " (double quote) 으로 변환되는 것이 JSON의 규격 사항이다.

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

 

함수는 json에 포함되지 않고 있다.

함수는 Object에 들어있는 데이터가 아니기 때문에 제외된다.

JavaScript에만 있는 Symbol 같은 특별한 데이터도 json에 포함되지 않는다.

const person = {
    name: 'jordy',
    color: 'green',
    size: null,
    birthDate: new Date(),
    symbol: Symbol("id"),
    fly: () => {
        console.log(`${name} can fly!`);
    },
};

json = JSON.stringify(person);
console.log(json); // {"name":"jordy","color":"green","size":null,"birthDate":"2020-10-05T04:15:45.432Z"}

 

json으로 변환되는 것을 더 통제하고 싶다면 array를 이용하면 된다.

다음과 같이 원하는 property만 골라서 json으로 변환시켜줄 수 있다.

const person = {
    name: 'jordy',
    color: 'green',
    size: null,
    birthDate: new Date(),
    symbol: Symbol("id"),
    fly: () => {
        console.log(`${name} can fly!`);
    },
};

json = JSON.stringify(person, ['name', 'color']);
console.log(json); // {"name":"jordy","color:"green"}

 

이것보다 더 세밀하게 통제하고 싶다면 key와 value를 전달 받는 callback 함수(replacer)를 이용하면 된다.

key로 name이 들어오는 경우만 바꿔주고 나머지는 value를 그대로 출력해주었다.

const person = {
    name: 'jordy',
    color: 'green',
    size: null,
    birthDate: new Date(),
    fly: () => {
        console.log(`${name} can fly!`);
    },
};

json = JSON.stringify(person, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'bbbyung2' : value;
});
console.log(json);

// key: , value: [object Object]
// key: name, value: jordy
// key: color, value: green
// key: size, value: null
// key: birthDate, value: 2020-10-05T04:34:36.207Z
// key: fly, value: () => {
//     console.log(`${name} can fly!`);
// }
// {"name":"bbbyung2","color":"green","size":null,"birthDate":"2020-10-05T04:36:51.241Z"}

 

가장 먼저 출력되는 것은 person의 Object를 감싸고 있는 가장 최상위의 것이다.

그 이후로 key, value 쌍이 출력된다.   

   

   

   

JSON to Object (Deserialize)

---

parse 를 이용하여 다시 Object로 반환해준다. (역직렬화)

const person = {
    name: 'jordy',
    color: 'green',
    size: null,
    birthDate: new Date(),
    fly: () => {
        console.log(`${name} can fly!`);
    },
};

json = JSON.stringify(person);
const obj = JSON.parse(json);
console.log(obj);  // {name: "jordy", color: "green", size: null, birthDate: "2020-10-05T04:40:43.567Z"}

obj.fly();  // VM185:1 Uncaught TypeError: obj.fly is not a function
                        // at <anonymous>:1:5

 

직렬화(json)될 때 함수( fly())는 포함되어 있지 않았었기 때문에 다시 역직렬화된 obj 에는 fly() 가 없다.

console.log(person.birthDate.getDate());  // 5
console.log(obj.birthDate.getDate());  // VM643:2 Uncaught TypeError: obj.birthDate.getDate is not a function
                                                                         // at <anonymous>:2:27

 

birthDate는 Date Object를 갖고 있기 때문에 Date Object의 API를 사용할 수 있다.

하지만 obj의 birthDate에는 2020-10-05T04:40:43.567Z 이라는 string이 할당되어 있는 상태이다.

Date Object의 API를 사용하고 싶을 경우에는 reviver이라는 callback 함수를 전달해서 해결한다.

const person = {
    name: 'jordy',
    color: 'green',
    size: null,
    birthDate: new Date(),
    fly: () => {
        console.log(`${name} can fly!`);
    },
};

json = JSON.stringify(person);
const obj = JSON.parse(json, (key, value => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
});

console.log(person.birthDate.getDate());  // 5
console.log(obj.birthDate.getDate());     // 5