Json이란 무엇인가.

HTTP

---

브라우저 위에서 동작하고 있는 웹사이트와 웹어플리케이션과 같은 클라이언트들이

어떻게 서버와 통신할 수 있는지 정의한것이 바로 http(Hypertext Transfer Protocal)이다.

즉, 어떻게 하이퍼텍스트들을 주고 받을 수 있는지를 규약한 프로토콜의 하나이다. 

 

http는

클라이언트가 서버에게 request 요청할 수 있고, 

서버는 요청한 것에 따라서 그에 맞는 reponse 응답을 클라이언트에게 보내준다.

 

또한 여기서 말하는 Hypertext는 하이퍼링크들만 얘기하는 것이 아니라 

전반적으로 쓰여지고 있는 리소스들, 문서나 이미지 파일들 이런아이들을 다 포함해서 말한다. 

 

 

이렇게 http를 이용해서 서버에게 데이터를 요청해서 받아올 수 있는 방법으로는 

바로 AJAX가 있다. 

 

AJAX

---

Asynchronous JavaScript And Xml (AJAX) (비동기식 js와 xml)

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

 

대표적으로는 XHR(XMLHttpRequest) 라는 오브젝트가 있다.

이것은 브라우저 API에서 제공하는 오브젝트 중의 하나로, 

이 오브젝트를 이용하면 간단하게 서버에게 데이터를 요청하고 받아올 수 있다.

 

최근 브라우저 API에 추가된 fetch() API를 이용하면 간편하게 데이터를 주고받을 수가 있다.

그러나 아직 IE에서는 지원이 되지 않음 ㅜ

 

 

그렇다면 AJAX, XHR에서 계속해서 등장하는 이 XML은 무엇인가?

이것은 html과 같은 마크업언어들 중의 하나이다. 

html과 마찬가지로 데이터를 표현할 수 있는 방법 중의 하나이다. 

xml

 

서버와 통신하기 위한 수단으로 계속 xml이 등장하는데, 

그러면 서버에 데이터를 주고 받을 때는 xml만 가능한가?

 

 

서버와 데이터를 주고 받을 때는 xml뿐만 아니라 굉장히 다양한 파일 포맷을 전달 받을 수 있다. 

JSON을 요즘에 많이 쓰고 있다. 

 

그런데 왜, JSON에는 xml이라는 말이 없나요?

 

그것은 바로 AJAX와 XHR이 활발히 개발되고 있을 당시에 

Microsoft사에 있는 아웃룩을 만드는 개발팀이 활발히 참여해서 만들게 되었는데, 

이때 아웃룩은 서버와 클라이언트 데이터 전송을 할 때 xml을 사용했다.

그래서 xml을 XMLHttpRequest이렇게 앞에 넣어서 이름을 붙이게 되었다.

 

그러나 데이터를 주고받을 때 xml뿐 아니라 다양한 타입의 데이터를 주고받을 수 있기 때문에

xml이라고 이름을 지은 것은 굉장히 큰 실수처럼 보인다. 

 

 

다시 돌아와서, 

브라우저에서 클라이언트가 서버와 통신할 때, 

우리는 fetch()API를 사용할 수도 있고, 

요즘에도 많이 사용되는 XMLHttpRequest오브젝트를 이용할 수도 있다. 

 

이 xml를 사용하면 불필요한 태그들이 너무 많이 들어가서 

파일이 쌓여지고 커지고, 가독성도 좋지 않아서 요새는 xml이 많이 사용되지 않는 추세이다. 

 

이 대신에 요즘은 JSON이 많이 사용되고 있다.

 

JSON (JavaScript Object Notation)

---

이름을 보며 "아, 자바스크립트 오브젝트와 관련된 파일인가?"라고 유추할 수 있다. 

 

1999년도 ECMAScript 3번째 버전에서 쓰여진 JS Object에서 큰 영감을 받아 만들어진 data format이다.

 

자바스크립트에서 object를 보면, 

 

Object { key: value}

 

이렇게 key, value로 이루어져 있다.

 

JSON에서도 마찬가지로 KEY, value로 이루어져 있다.

 

이 json은 브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고받을때, 

또는 서버와 통신을 하지 않아도 object를 파일 시스템에 저장할 때도 json data type을 많이 이용하고 있다.

 

 

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 
//프로그래밍 언어나 플랫폼에 상관없이 사용할 수 있음(제일 중요한 포인트)
//이 말은 자바, 하이썬, c, 고언어 상관없이 모든 언어와 플랫폼 상관없이 
//json으로 serialization된 언어들을 다시 각 언어들의 특징에 맞게 오브젝트들을 변환하고,
//object를 다시 json으로 serialization하는 것을 지원해줌.
//아니면 많이 쓰여지고 있는 외부 라이브러리를 이용해서 이런것들이 가능하게 된다. 

 

 

 

JSON STUDY POINT

---

 

1. Object를 어떻게 serialize(직렬화)해서 json으로 변환할지,

2. 직렬화된 json을 어떻게 deserialize해서 object로 다시 변환할지

 

이 두가지를 중점적으로 공부하면 된다.

 

 

 

---

// JSON
// JavaScript Oject Notation

// 1. Object to JSON
// stringfy(obj)
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: () => {
    console.log(`${name} can jump!`);
  },
};

json = JSON.stringify(rabbit);
console.log(json);
//{"name":"tori","color":"white","size":null,"birthDate":"2020-06-01T01:45:48.866Z"}
//jump 함수는 출력되지 않음. 함수는 object에 있는 데이터가 아니기 때문에.
//js에만 있는 symbol 데이터(최근에 추가된)도 출력에 포함되지 않는다.

//json으로 변환되는 것을 조금더 통제하고 싶다면
//아래와 같이 콜백함수를 이용하면된다.
json = JSON.stringify(rabbit, ["name", "color"]);
console.log(json);
//{"name":"tori","color":"white"}

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === "name" ? "ellie" : value;
});
console.log(json);
// key: , value: [object Object]  -> 토끼의 오브젝트를 싸고 있는 제일 최상의 것이 먼저 전달됨.
// key: name, value: tori
// key: color, value: white
// key: size, value: null
// key: birthDate, value: 2020-06-01T01:57:59.613Z
// key: jump, value: () => {console.log(`${name} can jump!`);}
//{"name":"ellie","color":"white","size":null,"birthDate":"2020-06-01T02:01:28.005Z"}
// 키 중에 name은 ellie로 변환됨.
// 이렇게 조금 더 세밀하게 동작하고 싶은것은 콜백함수를 이용할 수 있다.

// 2. JSON to Object
// parse(json)
console.clear();
json = JSON.stringify(rabbit);
let obj = JSON.parse(json);
console.log(obj);
//{name: "tori", color: "white", size: null, birthDate: "2020-06-01T02:03:58.130Z"}
//birthDate: "2020-06-01T02:03:58.130Z"
//color: "white"
//name: "tori"
//size: null
//__proto__: Object

rabbit.jump(); //우리가 정의한 변수 rabbit에는 jump라는 함수가 있었는데
//obj.jump(); // error -> json으로 serialize했을 때 데이터가 아닌 함수는 제외됨. 그래서 다시 deserialize하니 함수가 없음.

console.log(rabbit.birthDate.getDate()); //1(오늘 일자)
//console.log(obj.birthDate.getDate()); //error
//birthDate는 string이기 때문이다.

obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === "birthDate" ? new Date(value) : value;
});
console.log(obj.birthDate.getDate()); // 1

 

 

 

유용한 사이트

---

1. JSON Diff 

 

서버에게 데이터를 요청했을때, 1번째로 받아온 데이터와 2번째로 받아온 데이터가 어떤게 다른지 궁금할때 

비교하면 딱 보여주는 사이트

 

 

2. JSON Beautifier 

 

가끔 서버에서 받아온 json을 복사해서 붙여오면 코드가 망가질 떄가 있다. 

vsc의 prettier도 도와주지만 이 웹사이트도 이쁘게 도와줌

 

 

3. JSON Parser

 

json 타입을 오브젝트 형태로 확인해보고 싶다면, 

json으로부터 오브젝트가 어떻게 표현되는지 눈으로 쉽게 확인할 수 있다. 

 

 

4. json validator

 

빼먹은 , 나 이런것들을 확인 할 수 있음.

json이 이상할 때 여기와서 확인해 보면 좋음.

 

 

 

출처: 드림코딩 by엘리

https://www.youtube.com/watch?v=FN_D4Ihs3LE