JSON

브라우저 위에서 동작하는 웹사이트나 웹 어플리케이션같은 클라이언트들이 서버와 어떻게 통신할 수 있는지 정의한 것이 http이다.

 

http는 hypertext transfer protocol의 약자이다. 어떻게 이 hypertext를 주고받을 수 있는지를 규약 한 프로토콜의 하나.

 

클라이언트가 서버에 request를 하면 서버가 response를 보내주는 방식이다. 

hypertext는 하이퍼링크 뿐 아니라 전반적으로 쓰이는 문서나 이미지 파일들 모두 포함한다. 

 

이렇게 http를 이용해서 서버에서 데이터를 받아올 수 있는 방법으로는 AJAX를 썼다. 

AJAX는 asynchronous javascript and xml의 약자이다.

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

 

XHR - xmlhttprequest. 이 오브젝트는 브라우저 api에서 제공하는 오브젝트 중 하나. 이것을 사용하면 간단히 서버에게 데이터를 요청하고 받아올 수 있다. 최근 브라우저 api에 추가된 fetch() api를 사용하면 간편하게 데이터를 주고받을 수 있다. 

 

xml은 html과 같은 마크업 언어이다. html과 마찬가지로 데이터를 표현할 수 있는 한가지 방법이다. 위에 ajax도 그렇고 xhr도 그렇고 계속 xml이 나오는데 그럼 xml만 서버랑 주고받을 수 있는 것인가? no. 

서버와 데이터를 주고 받을 때는 xml뿐 아니라 다양한 파일 포맷을 주고받을 수 있다. json을 요즘 많이 쓰고 있다. 

 

브라우저가 서버와 통신을 할 때 fetch() API를 사용할 수도 있고 xmlHttpRequest 오브젝트를 사용할 수도 있다. 

xml을 사용하면 불필요한 태그가 많이 들어가서 파일의 사이즈도 커지고 가독성이 떨어져서 잘 사용하지 않고 JSON을 주로 사용한다. JSON은 Javascript Object Notation의 약자. 

오브젝트를 보고 영감을 받아 만들어졌다. key와 value로 구성. 

 

json은 브라우저 뿐 아니라 모바일에서 서버와 데이터를 주고받을 때, 또는 서버와 통신을 하지 않아도 오브젝트를 파일 시스템에 저장할 때도 json데이터 타입을 사용하고 있다.

 

json은 데이터를 주고받을 때 쓸 수 있는 가장 간단한 형태이고

텍스트를 기반으로 한 가볍고 읽기 편하다. 데이터를 보통 서버와 주고 받을 때 serialization을 위해 사용한다.

 

직렬화하고 데이터를 전송할 때 쓴다.

프로그래밍 언어와 플랫폼에 상관없이 쓸 수 있다. (중요!) - 대부분의 언어들이 그 언어의 특징에 맞게 오브젝트로 변환하고 반대도 가능하다. 

 

json공부 포인트.

오브젝트를 어떻게 serialize(직렬화)해서 json으로 변환할지.

직렬화된 json을 어떻게 deserialize 해서 오브젝트로 변환할 건지.

 

'use strict';

// JSON
// JavaScript Object Notation

// 1. Object to JSON
// stringify(obj)- 오브젝트를 스트링으로 만든다. 
let json = JSON.stringify(true);
console.log(json);	//true 출력

json = JSON.stringify(['apple', 'banana']); //배열을 json으로 바꾸기
console.log(json);	//["apple","banana"]

const rabbit = {
  name: 'tori',
  color: 'white',
  size: null,
  birthDate: new Date(),
  
  //JSON에 포함되지 않는다. 오브젝트에 있는 데이터가 아니기 때문에 함수는 제외된다. 
  //자바스크립트에만 존재하는 특별한 데이터도 포함되지 않는다. ex)symbol
  jump: function () {					
    console.log(`${this.name} can jump!`);
  },
};

json = JSON.stringify(rabbit);
console.log(json);	//{"name":"tori","color":"white","size":null,"birthDate":"2022-01-18T06:32:29.016Z"}


//replacer를 전달해줄수도 있다. 원하는 property만 json으로 변환할 수 있다. 
json = JSON.stringify(rabbit, ['name', 'color', 'size']);
console.log(json);		//{"name":"tori","color":"white","size":null}

//콜백함수로도 통제 가능
json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'name' ? 'ellie' : value;  //키가 name이면 값을 ellie로 변환하라
});
console.log(json);		//{"name":"ellie","color":"white","size":null,"birthDate":"2022-01-18T06:32:29.016Z"}


// 2. JSON to Object
// parse(json)
console.clear();

//오브젝트를 JSON으로 변환
json = JSON.stringify(rabbit);
console.log(json);

//JSON을 오브젝트로 변환
//reviver 콜백함수 전달 가능
const obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj);	//{name: 'ellie', color: 'white', size: null, birthDate: Tue Jan 18 2022 15:32:29 GMT+0900 (한국 표준시)}
rabbit.jump();     //can jump! 출력
// obj.jump(); 		//에러 나옴. json에는 함수가 포함되어있지 않다. 

console.log(rabbit.birthDate.getDate());		//여기서 birthDate는 Date 오브젝트 자체. 그 안에 존재하는 getDate를 쓸 수 있다
//위에서 parse시 reviver 함수에서 작업을 해주지 않으면 에러 발생. 여기서 birthDate는 string이기 때문이다. 
console.log(obj.birthDate.getDate());

 

JSON Diff.com - 서버에게 요청 시 첫 번째 데이터와 두 번째 데이터의 차이점을 보여준다. 

JSON Beautifier - json형태를 예쁘게 다시 해준다. 

JSON Parser-JSON 타입을 오브젝트 형태로 보고 싶을 때.