강좌 : 유튜브 드림코딩 by 엘리

8. Json

유용한 사이트

• JSON Diff checker
• JSON Beautifier/editor
• JSON Parser
• JSON Vaildator
  
  

http(Hypertext Transfer Protocal)
브라우저 위에서 동작하고 있는 웹사이트나 웹어플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지를 정의한 것이 바로 http
여기서 hypertext는 웹사이트에서 이용되어지고 있는 링크와 전반적으로 쓰여지고 있는 문서나 이미지파일들을 다 포함해서 말한다
http는 클라이언트가 서버에게 데이터를 request(요청)할 수 있고 서버는 클라이언트가 요청한 것에 따라서 그에맞는 response(응답)을 클라이언트에게 보내주는 방식으로 진행되는 것을 의미한다
http를 이용해서 서버에게 데이터를 요청해서 받아올 수 있는 방법으로는 AJAX를 썻다

AJAX(Asynchronous JavaScript And XML)
AJAX는 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술을 의미한다
대표적인 예로 XHR이라는 object가 있다

XHR(XMLHttpRequest)
XHR object는 브라우저 API에서 제공하는 object 중 하나로 이 object를 이용하면 간단하게 서버에게 데이터를 요청하고 받아 올수 있다
브라우저에서 서버와 통신을 할 때는 새로 추가된 fetch라는 API를 사용할 수도 있고 아니면 요즘도 흔하게 많이 쓰여지고 있는 XHR object를 이용해서 서버와 통신을 할 수 있다
최근 브라우저의 API에 추가된 fetch() API를 이용하면 간편하게 데이터를 주고 받을 수 있지만 최근에 추가된 것이기 때문에 Internet Explorer에서 지원이 되지 않아 이점을 유의해서 사용해야 한다

XML
AJAX와 XHR 에서 계속 반복해서 XML이 등장하고 있는데 이 XML은 HTML과 같은 Markup 언어중의 하나이며 태그들을 이용해서 데이터를 나타낸다
서버와 데이터를 주고 받을 때는 XML뿐만 아니라 굉장히 다양한 파일포맷을 전달 받을 수 있다
XML을 사용하면 불필요한 태그들이 너무 많이 들어가서 파일의 사이즈도 커질 뿐만 아니라 가독성도 좋지 않기 때문에 이제 XML은 많이 사용되어지고 있지 않고 XML 대신에 요즘에는 JSON을 많이 사용하고 있다

📄 Json

• JavaScript Object Notation
• 데이터를 주고 받을때 쓸수 있는 가장 간단한 파일 포맷
• 텍스트를 기반으로 해 가볍다
• 사람눈으로 읽기 편하다
• key와 value로 이루어져있다
• 네트워크 연결 간 데이터의 직렬화 및 전송에 쓰인다
• 프로그램언어와 플랫폼에 상관없이 쓸 수 있다
  
  

---

✍️ Object to JSON

• stringfy(obj)
• 적용할 수 있는 자료형은 객체, 배열, 문자형, 숫자형, true와 false, null이 있다
• 호출시 무시되는 프로퍼티로는 함수 프로퍼티, 심볼형 프로퍼티, 값이 undefined인 프로퍼티가 있다
• replacer로 원하는 프로퍼티만 직렬화할 수 있다
• let json = JSON.stringify(value, [replacer, space])

value

• 인코딩 하려는 값

replacer

• JSON으로 인코딩 하길 원하는 프로퍼티가 담긴 배열, 또는 매핑함수 function(key, value)

space

• 서식 변경 목적으로 사용할 공백 문자 수

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

json = JSON.stringify(['apple', 'banana']);
console.log(json);  // ["apple","banana"]  
// JSON의 규격사항때문에 더블쿼트로 자동변경된다

const rabbit = {
  name: 'tori',
  color: 'white',
  size: null,
  birthDate: new Date(),
  jump: function () {
    console.log(`${this.name} can jump!`);
  },
};

json = JSON.stringify(rabbit);
console.log(json);
// {"name":"tori","color":"White","size":null,"birthDate":"2021-05-06T16:03.25.582Z"}

// Date라는 Object가 string으로 변환되어서 JSON으로 만들어진다
// 함수는 object에 있는 데이터가 아니기 때문에 jump라는 함수는 JSON에 포함되지않는다
// symbol같은 Javascript에만 있는 특별한 데이터도 JSON에 포함되지 않는다

json = JSON.stringify(rabbit, ['name', 'color', 'size']);
console.log(json);  // {"name":"tori","color":"White","size":null}
// 내가 원하는 property만 골라서 정의를 하면 해당하는 propertyaks JSON으로 변환된다

// 세밀하게 통제하고 싶을 때 callback함수를 사용
json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'name' ? 'hxxjxx' : value;  // 이름을 변경할 수 있다
});
// key: , value: [Object Object]
// 제일처음으로 전달되는 것은 rabbit object를 싸고 있는 제일 최상의 것이 전달
// key: name, value: tori
// key: color, value: white
// key: size, value: null
// key: birthDate, value: 2021-05-06T16:03.25.582Z
// key: jump, value: function () { console.log(`${this.name} can jump!`); }

console.log(json);
// {"name":"hxxjxx","color":"White","size":null,"birthDate":"2021-05-06T16:03.25.582Z"}

---

✍️ JSON to Object

• perse(json)

const obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'birthDate' ? new Date(value) : value;
});
// key: name, value: tori
// key: color, value: white
// key: size, value: null
// key: birthDate, value: 2021-05-06T16:03.25.582Z
// key: , value: [Object Object]
console.log(obj);
// {name:"tori", color:"White", size:null, birthDate: Fri may 07 2021 01:03:25 GMT+0900}

rabbit.jump();  // tori can jump

obj.jump();  // 에러  
// jump는 JSON으로 변환하면서 포함되지 않았기 때문에 
// JSON으로부터 object를 만든것에는 함수가 포함되어있지 않아 오류가 발생된다

console.log(rabbit.birthDate.getDate());  // 7
console.log(obj.birthDate.getDate());  // 7
// JSON으로 변환하면서 Date가 string으로 변환되었기 때문에 그냥 출력하게 되면 오류가
// 발생된다 그러므로 callback함수를 이용해서 Date라는 Object를 다시 정의해준다