JSON (JavaScript Object Notation)

HTTP 통신 (client – server)

AJAX(Asynchronous JavaScript And XML)는 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술.
대표적인 예로, XHR(XMLHttpRequest 오브젝트는 브라우저 API에서 제공하는 오브젝트중 하나로, 이 오브젝트를 이용하면 간단하게 서버에게 데이터를 요청하고 받아올 수 있음)

XML ?

AJAX나 XHR에서 계속해서 ‘XML’이라는 단어가 계속 등장하는데, 이 언어는 HTML과 같은 마크업 랭귀지 중 하나이다.

그럼 서버와 데이터와 주고 받을때 XML만 가능한 것일까?
그건 아니다. 굉장히 다양한 파일 포맷을 전달받을 수 있다. XML이라는 언어가 계속해서 붙게된 이유는, AJAX와 XHR이 활발히 개발되고 있을 당시에 마이크로소프트사의 아웃룩 개발팀이 참여해서 만들었다. 이 때 개발팀은 서버와 클라이언트 데이터 전송을 할때 XML을 사용했는데, 그래서 XML을 HttpRequest 앞에 붙여서 사용하게 되었다. 실제론 XML로 데이터를 주고 받기보다 다른 데이터 포맷을 많이 이용하기때문에, 혼란이 생길 수 있다. 이렇게 외부로 노출되는 api를 만들때는 이름을 명료하게 잘 짓는게 중요하다.

데이터 전송 및 수신 (client – server)

브라우저에서 서버와 통신을 할때는 새로 추가된 fetch() 라는 API를 이용할 수도 있고, 흔하게 많이 쓰이는 XMLHttpRequest 오브젝트를 이용할 수 있다. (XML을 사용하면 불필요한 태그들이 너무 많이 들어가서 파일 사이즈가 커질 뿐만 아니라, 가독성도 좋지 않기 때문에 잘 사용하지 않고 JSON을 많이 사용한다)

JSON

JSON (JavaScript Object Notation)은 1999년도 ECMAScript3 에서 큰 영감을 받아서 만들어진 데이터 포맷이다.
JavaScript의 오브젝트 형식과 같이 key와 value 로 이루어져있다.

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

• JSON
  • simplest data interchange format
  • lightweight text-based structure
  • easy to read
  • key-value pairs
  • used for serialization and transmission of data between the network the network connection
  • independent programming language and platform⭐️

JSON 전송 방식

JSON에서 중요한 부분

1. serialization

오브젝트를 어떻게 시리얼라이징 해서 JSON 포맷으로 변환할지,

JSON을 어떻게 다시 Object 로 변환할 것인지가 중요하다.

// JSON
// Javascript Object Notation

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

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":"2020-07-08T15:02:32.039Z"}
// jump 함수는 포함되지 않는 것을 알 수 있다. 함수는 오브젝트에 있는 데이터가 아니기 때문에 함수는 제외된다. (자바스크립트에만 있는 Symbol 등도 제외됨)

json = JSON.stringify(rabbit, ['name', 'color']); // JSON으로 변환할 프로퍼티를 별개로 설정가능
console.log(json); // {"name":"tori","color":"white"}

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value : ${value}`);
  return key === 'name' ? 'dylan' : value;
}); // 콜백 함수를 이용해서 조금 더 세밀하게 통제 가능
console.log(json); // {"name":"dylan","color":"white","size":null,"birthDate":"2020-07-08T15:02:32.039Z"}

// 2. JSON to Object
// parse(json)

const rabbit = {
  name: 'tori',
  color: 'white',
  size: null,
  birthDate: new Date(),
  jump : () => {
    console.log(`${this.name} can jump`);
  },
};
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj); // {name: "tori", color: "white", size: null, birthDate: "2020-07-08T15:11:45.848Z"}
obj.jump(); //serialize 될 때 함수는 제외되므로 에러가 발생 

console.log(rabbit.birthDate.getDate()); // 8
console.log(obj.birthDate.getDate()); // error (rabbit 오브젝트의 birthDate는 오브젝트 자체인데, deserialize를 거친 birthDate는 string이므로 에러 발생

const obj = JSON.parse(json, (key, value) => {
  return key === 'birthDate' ? new Date(value) : value;
}); // 콜백함수를 이용하여 세밀하게 조정
console.log(obj.birthDate.getDate()); // 8