jsNote 09: JSON

✅ HTTP(HyperText Transfer Protocol)

• 어떻게 server와 client가 교류할 수 있는 지에 대한 규약
• Client는 서버에게 필요한 data를 request할 수 있고 서버는 client에게 response 할 수 있다.
• Hypertext는 웹사이트 내 모든 리소스(문서, 이미지파일 등)을 포함한다.
  
  

✅ AJAX(Asynchronous Javascript And XMI)

• 비동기 자바스크립트, XMI
• 웹에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술
• XHR(XMLHttpRequest) object 혹은 fetch() API를 이용하여 서버와 통신 가능하다.
• Ajax로 데이터를 주고 받을 때 포맷으로 json을 많이 이용한다.
  
  

✅ JSON(Javascript Object Notation)

• Data format: key/value로 이루어진 object
• 브라우저 뿐만 아니라 모바일과 서버와 데이터를 주고 받을 때, 서버와 통신을 하지 않아도 object를 file에 저장할 때 유용하게 사용할 수 있다.
• text를 기반으로 가볍게 읽을 수 있다.
• 프로그래밍 language나 flatform에 상관 없이 쓰여질 수 있다.
• 예를 들어 웹 애플리케이션에서 토끼 object를 서버에 전송할 때 토끼를 key: value라는 string 타입으로 전송하고 다시 받아올 때도 string 타입으로 받아 온다.
• Object를 어떻게 직렬화하여 string할 지, 어떻게 deserialize해서 obj를 받아올 수 있는지 공부할 것!
  
  
  

1. Object to JSON

• JSON.stringify: object를 문자열화 시키는 API

let json = JSON.stringify(true); //boolean 값
console.log('json:', json); //json: true

//함수이름은 동일하지만 몇 개의 parameter를 전달하느냐에 따라 달라지는게 overloading

json = JSON.stringify(['apple', 'banana']); //배열
console.log(json); //["apple", "banana"] 더블 쿼트에 들어감

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

json = JSON.stringify(rabbit); //객체
console.log(json); 
//{"name":"tori","color":"white","size":null,"birthDate":"2021-01-01T10:28:13.636Z"} 함수는 포함 X

json = JSON.stringify(rabbit, ["name"]);
console.log(json); //{"name":"tori"}

json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'emma' : value; 
    //key가 name이라면 emma로 출력하기
});
console.log(json); //모든 key과 value가 출력된 후 마지막 출력에 이름이 바뀌어 출력

2. JSON to Object

• JSON.parse

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); 
//{name: "tori", color: "white", size: null, birthDate: "2021-01-01T10:36:24.883Z"}

rabbit.jump(); //can jump
//rabbit이라는 obj에는 jump라는 함수가 있었지만 string화 된 json을 다시 obj로 만들 때는 함수가 포함되어 있지 않음
//obj.jump(); 는 오류

console.log(rabbit.birthDate.getDate()); 
console.log(obj.birthDate.getDate()); //Date라는 API를 사용했기 때문에 obj를 받아올 때 콜백함수를 이용해 세밀하게 받아올 것

참고 사이트
JSON Diff Checker(디버깅)
JSON Beautifier/editor
JSON Parser : json타입을 object로 어떻게 표기되는지 확인하고 싶을 때
JSON Validator : JSON이 이상할 때 확인