JSON - 서버와 통신하기

📌 클라이언트와 서버(데이터)의 request와 respond

HTTP : Hypertext Transfer Progocal
hypertext는 링크, 문서, 이미지 모두 포함한 자료

AJAX: Asynchronous JavaScript And XML
1. XHR: XMLHttpRequest
2. fetch() API ⇒ ei 지원 불가능 (최근 추가됨)
3. axios ⇒ 노드 환경**

📌XML(Extensible Markup Language)

• HTML과 비슷한 문자 기반 마크업 언어
• 사람과 기계가 동시에 읽기 편한 구조
• 데이터를 저장, 전달하는 목적
• 다양한 언어에 의해 파싱 가능
• HTML과 다르게 태그가 미리 정해진 게 아니고 직접 정의 가능

📌 JSON ECMA3(1993)

• JavaScript Object Nation
• 자바스크립트 객체에서 발전된 데이터 교환의 표준
• XML는 너무 heavy
• 데이터 주고 받을 때 가장 간단한 포맷
• 기계, 사람 눈으로 읽기 편함
• 데이터 전송 시 직렬화
• 어떠한 언어의 플랫폼과 상관없이 함께 사용할 수 있음
  (JSON과 모든 언어들이 서로 직렬화와 오브젝트 변환이 가능, 라이브러리도 다양 )

⭐ 데이터 직렬화

메모리의 객체를 디스크에 저장하거나 네트워크로 전송하기 위한 형태로 변환하는 작업! (역직렬화는 반대로 디스크에 저장된 데이터를 읽거나 네트워크를 통새 데이터를 받아 메모리 재구조화)

• 데이터 직렬화하는 데 쓰는 표준들이 바로 Json, XML, CSV, binary들인 것!!!
• 사람이 읽기 편리하고 좋지만, 저장공간의 효율성도 낮고 파싱 시간이 걸리는 편이긴 함
• 데이터가 정말로 많다면(빅데이터) 다른 파싱 방법을 사용(Avro, Thrift, Protocal Buffer...)

📌 JSON 데이터 전송과 수신 과정

Client → Sever : Object{key:value}를 string 타입으로 변환
Sever → Client : stirng 타입을 Object으로 변환

//1. Object to JSON
//stirngify(obj)

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

json = JSON.stringify(['apple','banana']);
console.log(json); 
//["apple","banana"]
// 마치 배여타입처럼 보이는 JSON 규격 형태로 변환

//rabbit Object를 JSON으로 Stringify하기
const rabbit = {
    name: 'tori',
    color: 'white & black',
    size: null,
    birthDate: new Date(),
    jump: () => {
        console.log(`${name} can jump!! 🐰`)
    }
};

json = JSON.stringify(rabbit);
console.log(json); 
//{"name":"tori","color":"white & black","size":null,"birthDate":"2022-05-24T14:52:20.743Z"}
// 함수나 symbol 등 JS에만 있는 것은 변환이 되지 않늠

//콜백함수 이용 1
json = JSON.stringify(rabbit, ["name","color","size"]);
console.log(json); 

//콜백함수 이용 2
// 함수를 반환할 수 있음
json = JSON.stringify(rabbit,(key,value)=> {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'taehee': value;
});
console.log(json); 
// key: , value: [object Object]
// key: name, value: tori
// key: color, value: white & black
// key: size, value: null
// key: birthDate, value: 2022-05-24T14:57:37.942Z
// key: jump, value: () => {
//     console.log(`${name} can jump!! 🐰`)
// }

// {"name":"taehee","color":"white & black","size":null,"birthDate":"2022-05-24T15:01:35.607Z"}

//2. JSON to Object
// parse(json)
console.clear();
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);

rabbit.jump(); //원본 오브젝트의 함수
// obj.jump(); 
// rabbit이라는 Object가 stringify 되면서 함수가 JSON에 담기지 못함! 바로 그 상태로 다시 parse를 한 것이 obj이기 때문에 obj.jump();는 함수를 가져올 수 없음(error)

console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate); 
// string 타입에서 Object로 변환된어 있는 상태라서 콜백으로 변환해줘야 값을 getDate()를 사용할 수 있음. 

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