JSON 이란?

✔ HTTP(Hypertext Transfer Protocol)는

프로토콜의 하나로, 브라우저 위에서 동작하고 있는 웹 사이트나 웹 어플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는 지 정의한 것이다. Hypertext는 웹 사이트에서 이용되고 있는 링크, 전반적으로 쓰여지는 리소스, 문서, 이미지를 다 포함한다. HTTP를 이용해 서버에서 데이터를 받아오는 방법으로 AJAX가 있다.

 

✔ AJAX(Asynchronous JavaScript And XML)는

웹 페이지에서 동적으로 서버와 데이터를 주고받을 수 있는 기술을 의미한다.

대표적으로 XHR(xmlHttpRequest)가 있다. XHR는, browse API에서 제공하는 object 중 하나로 서버에게 데이터를 요청하고 받아올 수 있다. 

또 다른 browse API 중 하나인 fetch() API를 이용하면 간편하게 할 수 있지만, 해당 API는 인터넷 익스플로러에서 지원이 되지않는다. 이처럼 최신 라이브러리 사용할 경우 지원되지않는 브라우저가 있을 수 있는데 그럴 땐 polyfill을 사용하면 된다.

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8.1/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0/dist/fetch.umd.min.js"></script>

AJAX(Asynchronous JavaScript And XML), XHR(xmlHttpRequest)를 예시로 들어 XML만 가능한가 의문이 들 수 있지만 그렇지않다. XML은 HTML과 같은 마크업 언어 중 하나일 뿐 서버와 데이터를 주고받을 때 다양한 파일 포맷을 전달받을 수 있다.

 

서버와 데이터를 주고받을 때, XML을 사용하면 불필요한 태그들이 많이 사용되어서 파일의 크기도 크고 가독성도 좋지않아 요즘은 JSON을 더 많이 쓰는 추세이다.

 

✔ JSON(javascript object notation) ?

• 데이터를 주고 받을 때 쓸 수 있는 가장 간단한 파일 포맷이다.
• 텍스트 기반이라 가볍고 가독성이 좋다. 
• key와 value로 이루어진 파일 포맷이다.
• 데이터를 서버와 주고받을 때 통신에 사용하기위한 형식으로 변환할 때 쓰인다.
• 브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고 받을 때, 서버와 통신하지않아도 오브젝트를 파일 시스템에 저장할 때에도 자주 쓰인다.
• programming language나 platform에 상관없이 쓸 수 있다.
  (거의 대부분의 언어들이 json으로 serialization 된 object를 다시 그 언어의 특징으로 맞게 object로 변환하고 object를 다시 json으로 serialization하는 것을 지원해주거나 많이 쓰여지고 있는 외부 라이브러리를 통해서 가능!!)

2/15 공부기록!  https://jyeon.tistory.com/9

JSON

: JavaScript Object Notation.

javascript 객체를 만드는 표현식, key:value형식의 데이터 저장방식. 경량의 data 교환방식.

 

✔ JSON 공부하기

json을 공부할 때, 

 object를 어떻게 serialize해서 json(string)변환할 지?(Object to JSON)
 직렬화된 json을 어떻게 deserialize 해서 object로 변환할 지?(JSON to Object)

에 초점을 두고 하면 좋다.

 

💡 Object to JSON

    stringfy(obj)

 

let json = JSON.stringify(true);	// boolean도 JSON으로 변환 가능 
// console -> true 



json=JSON.stringify(['apple', 'banana']); // 배열을 JSON으로 변환  ["apple", "banana"]
// console -> ["apple","banana"]



const rabbit = {
    name      : 'tori'
  , color     : 'white'
  , size      : null
  , birthDate : new Date()
  , symbol    : Symbol("id")	// 자바스크립트에 자체적으로 들어있는 특별한 데이터는 json에 포함X
  , jump      : () => {
        console.log(`${name} can jump!`); // 함수는 object에 있는 data가 아니기 때문에 json에 포함X
    },
};


// json으로 변환
json=JSON.stringify(rabbit); // name, color, size, birthDate
// console -> {"name":"tori","color":"white","size":null,"birthDate":"2022-05-03T15:20:08.095Z"}



// 콜백함수를 이용하여 json으로 변환 : array
json=JSON.stringify(rabbit, ['name', 'color', 'size']); // 내가 원하는 property만 json으로 변환
// console -> {"name":"tori","color":"white","size":null}



// 콜백함수를 이용하여 json으로 변환 : replacer
json=JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value:${value}`);	// 모든 key와 value들이 callback함수에 전달  
    return key === 'name' ? 'rb' : value; // key가 name이면 rb로 설정 아니면 원래의 값(value) 사용
})
// console ->
// key: , value:[object Object]
// json.js:32 key: name, value:tori
// json.js:32 key: color, value:white
// json.js:32 key: size, value:null
// json.js:32 key: birthDate, value:2022-05-03T15:20:08.095Z

 

 

 

💡 JSON to Object 

    parse(json)

 

json=JSON.stringify(rabbit);
const obj= JSON.parse(json);			// json을 object로 변환한다

rabbit.jump();	 				// rabbit의 function 호출
// console ->  can jump!

obj.jump();					// error! 함수는 serialize 할 때 포함X 
// 변환한 object는 serialize된 즉, string으로 만들어진 json으로부터 다시 object를 만들었기 때문에 함수 포함X 


rabbit.birthDate.getDate();			// date라는 object이기에 date안에 존재하는 api를 사용 가능
// console -> 4

obj.birthDate.getDate(); 			// error! obj의 birthDate는 string이기 때문에 사용 불가
obj.birthDate;
// console -> 2022-05-03T15:20:08.095Z


//obj의 birthDate도 string이 아닌 date로 변환하고 싶을 때 callback 함수 사용 가능
const obj2= JSON.parse(json, (key, value) => {
    console.log(`key: ${key}, value:${value}`);
    return key ==='birthDate' ? new Date(value) : value;
});
// console -> 4

console.log(obj2.birthDate.getDate());

 

 

 

Reference.

드림코딩

https://youtu.be/s1vpVCrT8f4