서버통신의 시작, JSON

한줄로 데이터를 전송하는 네트워크! 그런데 표와 같은 구조를 가진 데이터 등을 전송하는데에는 어쩔 수 없이 어려움을 느낌. 이때 정보를 주는 쪽과 받는 쪽에 잘 설계되어 합의된 어떤 형식이 필요하게 됨. 여기서 사용되는 형식 중 가장 널리 사용되는 것이 XML과 JSON임.

XML

마크업 언어 중의 하나, 태그를 이용하여 한줄의 데이터를 구조화하여 보여줌. 그러나 그다지 가독성이 좋지 않아 이를 대체하는 것이 JSON

JSON

• JSON은 자바스크립트의 Object처럼 키와 벨류로 이루어져있음
• 데이터를 주고 받을 수 있는 가장 간단한 형태의 파일 포맷
• 직렬화하고 데이터를 전송할 때 쓰임
• 프로그램 언어나 플랫폼에 상관없이 사용될 수 있음

JSON에서 object를 어떻게 serialize해서 JSON으로 변환할지, 반대로 string을 어떻게 deserialize해서 object로 변환할 수 있는지를 공부하는 것이 포인트!

stringify와 parse

1. Object to JSON: stringify

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

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

그러나 함수는 오브젝트에 있는 데이터가 아니기 때문에 제외된다. 자바스크립트에만 있는 심볼과 같은 특별한 데이터도 포함되지 않는다.

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    // symbol: Symbol('id'),
    jump: () => {
        console.log(`${this.name} can jump!`)
    },
};

json = JSON.stringify(rabbit);
console.log(json); //{"name":"tori","color":"white","size":null,"birthDate":"2021-05-23T08:12:24.639Z"}

아래와 같이 특정 데이터만 뽑아낼 수도 있다.

json = JSON.stringify(rabbit, ['name']);
console.log(json); //{"name":"tori"}

또한 콜백함수를 이용할 수도 있다.

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

// key: , value: [object Object]
// key: name, value: tori
// key: color, value: white
// key: size, value: null
// key: birthDate, value: 2021-05-23T08:54:57.735Z
// key: jump, value: () => {
//         console.log(`${this.name} can jump!`)
//     }
// {"name":"somi","color":"white","size":null,"birthDate":"2021-05-23T08:54:57.735Z"}

2. JSON to Object: parse

json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
// {
// name: 'tori',
// color: 'white',
// size: null,
// birthDate: '2021-05-23T08:58:47.586Z'
// }

rabbit.jump(); //undefined can jump!
obj.jump(); //TypeError: obj.jump is not a function
//json으로 변환할때는 함수는 포함되어있지 않다.

console.log(rabbit.birthDate.getDate()); //23
console.log(obj.birthDate.getDate()); //error! json으로 변환 시에 데이터가 스트링으로 전환되기 때문에 날짜를 가져오지 못한다.

const obj2 = JSON.parse(json, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj2.birthDate.getDate()); //29