[JS] JSON 관련 기본 개념

• HTTP(Hypertext Transfer Protocal): 브라우저 위에서 동작 중인 웹사이트 혹은 웹어플리케이션과 같은 클라이언트들이 어떻게 서버와 통신하고 있는지 정의한 것으로, Hypertext를 어떻게 서로 주고받을 수 있는지를 규약한 프로토콜의 하나이다.
• HTTP는 클라이언트는 서버에 request, 서버는 클라이언트의 요청에 response를 클라이언트에게 보내줌.
• Hypertext: 웹에서 사용되는 하이퍼링크, 리소스들 즉 문서나 이미지 등을 포함한다.

• 클라이언트에서 서버로 요청 방법: Ajax(Asynchronus Javascript and XML)를 사용하는데 Ajax는 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술이다.
• 대표적으로는 XHR(XML Http Request)라는 Object가 있다. 이는 브라우저 API에서 제공하는 오브젝트이다. 또한 이를 통해 서버에게 데이터를 요청하고 받을 수 있음.
• 또한 fetch() API 또한 브라우저 API에서 제공하는 오브젝트로서 마찬가지로 서버와 통신할 수 있다.

1) XML은 HTML과 같은 마크업 언어 중 하나이다. 데이터를 주고 받을 때는 XML뿐만 아니라 JSON등 다양한 타입의 데이터 포맷이 사용된다. XML을 사용할 경우 불필요한 태그들이 많이 필요하여 파일 용량이 커지고 가독성이 좋지 않아, JSON을 더 많이 사용하는 추세이다.
2) JSON(JavaScript Object Notation):{key: value}형태의 String타입으로 이루어져있다. 보통은 서버와 데이터를 주고 받을 때나 데이터를 직렬화(serialization)할 때 쓰임. 또한, 프로그래밍 언어와 플랫폼에 상관없이 쓰일 수 있다는 장점이 있다.

• 서버와 요청 및 응답하는 과정:
  Object를 {key:vaule}형태의 string타입으로 전달하여 JSON으로 변환 <-> JSON에서 parsing하여 object로 변환 및 전달

// JSON
// 1. Object to JSON (클라이언트가 서버로 request할 때)
// stringify(obj)
let json = JSON.stringify(true);
console.log(json); // true

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

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

json = JSON.stringify(rabbit);
console.log(json); // {"name":"bunny","color":"white","size":null,"birthDate":"2022-09-02T07:25:52.179Z"}
// jump 함수는 json으로 변환되지 않은 것을 볼 수 있다. JS의 Function, Symbol등은 변환 불가

json = JSON.stringify(rabbit, ['name']);
console.log(json); // {"name":"bunny"}
// Object에서 원하는 property만 json으로 변환 가능

json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'cat' : value;
});
console.log(json); // {"name":"cat","color":"white","size":null,"birthDate":"2022-09-02T07:38:38.565Z"}
// stringify의 두번째 인자로 콜백함수를 줌으로써 name이라는 key를 cat으로 변경


// 2. JSON to Object (클라이언트로부터 요청받은 request를 서버에서 response할 때)
// parse(json)
console.clear();
json = JSON.stringify(rabbit);
const obj = JSON.parse(json, (key, value) => {
    console.log(`key: ${key}, value: ${value}`); // 
    return key === 'birthDate' ? new Date(value) : value;
}); // 콜백함수를 전달할 수 있음.
console.log(obj); // {name: 'bunny', color: 'white', size: null, birthDate: '2022-09-02T07:41:17.663Z'}

console.log(rabbit.birthDate.getDate()); // 02
console.log(obj.birthDate.getDate()); // 02