JSON 개념정리

- HTTP
    Client와 Server가 어떻게 Hypertext를 주고받으며 통신할 수 있는지 정의한 것
    Client가 data request, Server는 적절한 response 전송

- AJAX (Asynchronous JavaScript And XML)
    HTTP를 이용해서 Server로부터 data 받아올 때 사용하는 방법
    웹페이지에서 동적으로 Server와 data 주고받을 수 있는 기술
    ex) XHR (XMLHttpRequest), fetch() API

- XML
    Mark up 언어 중 하나
    HTML과 같이 data를 표현할 수 있는 한 가지 방법
    불필요한 태그들이 많이 들어가서 파일 크기가 커지고, 가독성이 나빠진다.

- JSON (JavaScript Object Notation)
    { key : value } 형태의 string type
    data 주고받을 때 쓸 수 있는 간단한 data format
    프로그래밍 언어나 플랫폼에 상관없이 쓰일 수 있다.

 

1. JSON 공부방법

• object를 어떻게 serialize(직렬화) 해서 JSON으로 변환할지
• serialize(직렬화)된 JSON을 어떻게 deserialize 해서 object로 다시 변환할지
• 위의 두 가지에 초점을 맞춰서 공부할 것!

1-1. parse와 stringify API

• JSON 인터페이스 안에는 parse와 stringify API가 있다.
• 오버로딩: 함수 이름은 동일하지만, 어떤 파라미터를 전달하느냐에 따라 다른 방식으로 호출 가능한 것
• parse: JSON에 string data를 넣으면 어떤 type의 object로 변환이 되고, optional type의 reviver 콜백함수가 있다. string을 object로 변환할 때 object가 만들어지는 과정을 세밀하게 조정할 때 reviver 사용.
• stringify: 어떤 type의 object를 받아와서 string type으로 변환한다. string으로 만들 때 replacer라는 optional한 콜백함수를 사용하면, 세밀한 조정이 가능하다.

 

2. Object to JSON

// stringify(obj)
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,
    // js에서 자체로 들어있는 특별한 data(symbol 등)도 JSON에 포함되지 않는다.
    symbol: Symbol("id"),
    birthDate: new Date(),
    // 함수는 object에 있는 data가 아니므로, JSON에서 제외된다.
    jump: () => {
    	console.log(`${name} can jump!`);
    },
};

json = JSON.stringify(rabbit);
console.log(json);

json = JSON.stringify(rabbit, ["name"]); // 원하는 property만 JSON으로 변환
console.log(json);

json = JSON.stringify(rabbit, ['name', 'color', 'size']);
console.log(json);

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

• rabbit이라는 object에는 jump라는 method가 있다.
• rabbit object를 JSON으로 변환할 때 함수가 포함되지 않고, data만 JSON으로 변환

 

3. JSON to Object

// parse(json)
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);

rabbit.jump(); // can jump!
obj.jump(); // error

console.log(rabbit.birthDate.getDate()); // 정상 출력
console.log(obj.birthDate.getDate()); // error

const obj = JSON.parse(json, (key, value) => {
	console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
    // 조건에 부합하면, birthDate를 Date 형태로 변환
});

console.log(obj.birthDate.getDate()); // 정상 출력

• 변환된 JSON을 다시 object로 변환할 때 method는 포함되지 않는다.
• JSON으로부터 만들어진 obj object는 method를 호출하면 에러가 발생한다.
• rabbit의 birthDate는 Date type의 object이다. Date의 getDate() API를 사용할 수 있다.
• obj의 birthDate는 string이기 때문에, getDate() API를 사용하면 에러가 발생한다.

 

 

 

참고

youtube 드림코딩 by 엘리

https://www.youtube.com/watch?v=FN_D4Ihs3LE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=10