JSON

HTTP(Hypertext Transfer Protocal): Client가 어떻게 Server 통신할수 있는지 정의한것

Client          <---- request-----              Server
         ---- response--->          

* AJAX : 웹페이에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술

브라우저에서 서버와 통신 할때 
1️⃣ XMLHttpRequest : 사이즈가 커지고, 가독성도 좋지 않아서 잘 사용되지 않음
2️⃣ fetch() API
3️⃣ JSON(JavaScript Object Notation)

---

 

JSON(JavaScript Object Notation)

- 데이터를 주고받을 때 쓸수 있는 가장 간단한 포맷
- 텍스트 기반
- 읽기 쉬움
- key, value 로 이루어짐
- 프로그램언어나 플랫폼에 상관없이 사용 가능

Object to JSON

let json = JSON.stringify(['apple','banana']);  // 더블콤마로 바뀜

const rabbit = {
	name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    jump: () => {            // 함수는 오브젝트가 아니라서 json에 포함되지 ❌
    	console.log(`${name} can jump!`)      
    }
};

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

 

JSON to Object

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

console.log(obj);

rabbit.jump();   // ⭕️
obj.jump();      // ❌ json으로 변환할때 함수가 포함 ❌ > 다시 받아오면 없어짐

rabbit.birthDate.getDate();  // ⭕️
obj.birthDate.getDate();     // ❌ birthDate가 스트링으로 변환되었기 때문


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

 

 

** 데이터 비교 : jsondiff.com 
     포맷 정리 : jsonbeautifier
     json 오브젝트 타입으로 확인: jsonparser
     json 오타 확인: json-validator