[엘리의 드림코딩 JS] 10. JSON

https://youtu.be/FN_D4Ihs3LE

HTTP란?

Hypertext Trasfer protocol의 약자. 하이퍼텍스트 문자를 클라이언트와 서버 간 주고받기 위한 프로토콜 규약.
client는 서버에 request를 주고, 서버가 이에 맞는 response를 전달한다.
여기서 하이퍼텍스트는 단순히 링크를 말할 뿐 아니라, 브라우저에 렌더링돼야 하는 이미지나 문서 등을 포함하는 개념이다. 

AJAX란?

Asynchronous JavaScript And XML의 약자. 동적으로 클라이언트와 서버가 데이터를 주고 받을 수 있는 기술을 의미한다. 대표적으로 XHR(XMLHttpRequest) 객체를 사용하는 방법이 있다.
이 XHR 객체는 브라우저에서 제공하는 객체(object) 중에 하나로, 이를 이용해 서버에 요청을 보낼 수 있다.
또 fetch() API를 사용하면 간편하게 서버에 요청을 보낼 수 있다. 

XML란?

HTML과 같은 마크업 언어 중 하나.

XHR이란 이름이 지어진 이유?

사실 서버와 주고 받을 수 있는 데이터의 형태는 XML 뿐 아니라 매우 다양하다. 그럼에도 XML이 HttpRequest 앞에 붙은 이유는, XHR과 Ajax 기술 개발 당시 Microsoft사의 Outlook을 만든 개발팀이 참여했었는데,  Outlook은 서버-클라이언트 간에 XML 데이터를 주고 받았기 때문에 XML을 HttpRequest 앞에 붙이게 된 것이었다. (그래서 우리가 헷갈리게 된 것)

JSON이란?

javascript object Notation 약자. 자바스크립트의 {키: value} 형태로 오브젝트를 사용하는 것에서 영감을 얻어 object를 string화 해서 데이터를 주고받는다.
브라우저 뿐 아니라 모바일에서도 서버와 통신 시 JSON을 사용한다.
XHR 데이터는 가독성이 좋지 않으며, 데이터의 불필요한 용량이 많아 요즘은 서버-클라이언트 간 주고받는 형식은 JSON을 사용하는 추세이다.

[엘리의 드림코딩] https://youtu.be/FN_D4Ihs3LE

Serialize(직렬화)란?

Object -> string(JSON) (직렬화, serialize)
Object <- string(JSON) (역직렬화, deserialize)

// JSON
// JavaScript Object Notation

// 1. Object to JSON
// stringify(obj)
let json = JSON.stringify(true);
console.log(json);

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

const rabbit = {
  name: 'tori',
  color: 'white',
  size: null,
  birthDate: new Date(),
  // symbol : Symbol('id'),
  jump: () => {
    console.log(`${this.name} can jump`); 
    // 함수인 jump, javascript에만 있는 symbol은
    // 파싱되지 않는다
  }
}

//replacer(함수 or 배열) 속성 이용해 특정한 key에 해당하는 것만 stringify 가능.
json = JSON.stringify(rabbit, ['name', 'color', 'size']);
console.log(json); 

// replacer 세밀하게 쓰고 싶을 때 콜백함수 쓴다.
json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'name'? 'ellie' : value;
});
console.log(json); 


// 2. JSON to Object
// 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);
rabbit.jump();
// obj.jump(); // 한번 stringify 했다가 다시 들어온 object에는 함수가 포함되지 않으므로 오류남

console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate()); // birthDate는 string이다.
// revival 사용하면 이런식으로 stringify 과정에서 string되는 데이터 타입 살릴 수 있다.

참고할 사이트

https://www.jsondiff.com
(두 json 파일 비교해 다른 코드 찾아줌)

https://jsonbeautifier.org/

Json Beautifier - Json Formatter | Json Viewer | Json Editor

JSON 형태 예쁘게 볼 수 있게 해줌

https://jsonparser.org/

JSON Parser - Best JSON Formatter | JSON Editor

json을 object로 보고 싶을 때 사용

https://tools.learningcontainer.com/json-validator/

Best free online JSON Validator

json이 유효한지 확인할 수 있는 json validator

++) 크롬 확장 프로그램 JSON viewer : https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ko 

JSON Viewer