[강의노트][드림코딩] JSON

드림코딩 자바스크립트 JSON 강의 노트

HTTP client와 server가 통신하는 규약(프로토콜) - client req / server res

server에 데이터를 요청하고 받는 방법은 AJAX 활용

fetch() API 이용하면 server와 통신 용이

최근 XML 대신 JSON 많이 쓰임 - { key : value } / 직렬화(serialization)를 위해도 쓰임

Object를 직렬화(serialization)하여 JSON으로 변환

직렬화된 JSON을 어떻게 deserialization하여 Object로 변환하는지

1. Object to JSON - 규격사항 "xxx"로 큰따옴표 사이에 표기

let json = JSON.stringify(true);

console.log(json);

json = JSON.stringify(['apple', 'banana'])

console.log(json);

const rabbit = {

    name: 'tori',

    age: 55,

    color: 'white',

    size: null,

    birth: new Date(),

    // symbol: Symbol('id'), // Javascript에만 존재하는 Symbol도 포함되지 않음

    jump: () => { console.log(`${this.name} can jump`) } // 함수는 전달되지 않음 - 함수는 Object에 있는 데이터가 아니기 때문

};

json = JSON.stringify(rabbit);

console.log(json);

json = JSON.stringify(rabbit, ["name", "color"]); // Array 형태로 작성하여 원하는 property만 선택 가능

console.log(json);

json = JSON.stringify(rabbit, (key, value) => {

    console.log(`key:${key} / value:${value}`);

    return key === 'name' ? 'ellie' : value; // 만약 key가 name이면 ellie로 값을 설정하고 아니면 본래 value로 설정

}); // 콜백 함수 형태로 작성하여

console.log(json);

 

 

 

2. JSON to Object

json = JSON.stringify(rabbit);

const obj = JSON.parse(json);

console.log(obj); // 함수는 포함되어 있지 않음

console.log(rabbit.birth.getDate()); // 본래 object인 rabbit에 포함된 Date() object 활용

console.log(typeof rabbit.birth.getDate()); // Number

console.log(typeof obj.birth); // rabbit의 birth object가 JSON 변환될 때 String이 되어서 다시 parsing 하면 string - revival 콜백 함수로 살릴 수 있음

const obj2 = JSON.parse(json, (key, value) => {

    console.log(`key:${key} / value:${value}`);

    return key === 'birth' ? new Date(value) : value; //만약 key가 birth이면 new Date object 활용하고 아니면 본래 value로 설정

});

console.log(obj2);

console.log(obj2.birth.getDate()); // revival 콜백함수 활용하여 Date 살림

console.log(typeof obj2.birth); // object

<JSON 확인 위해 유용한 사이트>
 * https://tools.learningcontainer.com/ - JSON validator 활용

* jsondiff.com - JSON 비교 / 문제 디버깅 시 활용

 * jsonbeutifier.org - JSON 포맷 구성

 * jsonparser.org - JSON을 OBJECT로 보고 싶다면 활용