JSON (1) Intro

이 포스트는 드림코딩 by 엘리님의 강의를 듣고 정리한 내용입니다.

youtu.be/FN_D4Ihs3LE

Intro

웹 브라우저와 같은 Client들이 어떻게 Server와 통신할 수 있는지를 정한 것이 바로 HTTP(Hyper Text Transfer Protocol)라고 했다.

어떻게 Client와 Server가 Hypertext를 주고 받을 것인가..를 정한 것인데

여기서 Hypertext는 hyperlinks뿐만 아니라 문서, 이미지 파일, css, javascript 등등을 의미한다!

 

그런데 이 HTTP에는 단점이 있었다.

바로 사용자가 페이지를 이동해야만 무언가를 요청할 수 있거나

일부 정보만 바뀌면 되는데 페이지 전체가 리로드 되는 등..

비효율 적인 점이 많았다.

그래서 이런 단점들을 해결하기 위해서 ActiveX와 같은 플러그인들이 나온 것.

 

그러는 와중에  1999년에 마이크로소프트가 Ajax라는 기술을 만들어 내고

2002년에 구글이 이 기술을 본격적으로 사용하면서

사람들이 Ajax라는 기술에 열광하고,

Ajax를 이용해서 서버에게 데이터를 받아오는 방식이 대세가 됐다!

(물론 이 Ajax에도 단점이 있어서 웹소켓이라는 기술이 또 나왔다. 이건 다음에..)

 

 

Ajax라는 기술이 어떻게 작동하냐 하면..

웹페지에 어떤 Event가 발생하면,

JavaScript가 XHR(XMLHttpRequest)라는 Object를 만들어서 

이 XHR이 서버에게 Request를 보내고 받아오는 것.

(XHR도 웹브라우저가 제공하는 API중 하나이다.)

 

 

 

 

근데 여기서 잠깐!

 

Ajax는 Asynchronous Javascrpt and XML의 약자라고 했다.

XHR은 XMLHttpRequest의 약자이다.

 

그렇다면 여기서 반복적으로 등장하는 XML은 무엇인가?

XML은 html과 같은 markup 언어 중 하나로 태그를 이용해서 데이터를 표현할 수 있다.

 

서버와 데이터를 주고 받을 때, 이 XML이라는 파일 포맷을 주로 사용했기 때문에 여기저기에 XML이라는 단어가 등장한 것!!

 

 

BUT!!!

요즘은 JSON이라는 데이터 포맷을 훨~~~씬 더 많이 사용한다.

 

 

 

 

지금까지 배운 것들을 정리하자면

브라우저와 서버가 통신을 할 때, Ajax라는 기술을 이용한다.

이 기술을 구현하는 도구는 여러가지가 있다.

이름에도 들어있는 

XMLHttpRequest라는 Object를 사용해도 되고

최근에 새로 추가된 fetch API를 사용할 수도 있다.

 

과거에는 주고받는 데이터의 포맷으로 XML을 사용했었다.
하지만 XML을 사용하면 불필요한 태그들이 너무 많아서 file 사이즈도 커지고 가독성도 떨어져서

최근에는 XML 보다는 JSON이라는 데이터 포맷을 사용한다.

 

=> fetch API를 이용해서 JSON을 주고 받을 것이다!

(여기까지가 제가 이해한 것인데.. 부디 맞았으면 좋겠습니다 ^_ㅜ.........)

 

 

2. JSON

https://www.flaticon.com/authors/smashicons

JSON은 Javascript Object Notation의 약자이다.

ecmaScript 3rd 1999에 이는 Object에서 영감을 받아 만든 data format이다.

JavaScript의 Object가 { key : value } 짝으로 이루어져 있듯이

JSON도 keyvalue pair 형태

 

JSON은 웹브라우저 뿐만 아니라

모바일에서 서버와 데이터를 주고 받을 때,

서버와 통신하지 않아도 Object를 file system에 저장할 때에도 사용된다.

 

 

정리하자면 JSON은

데이터를 주고받을 수 있는 정말 간편한 파일 포맷이고

정말 가벼운 텍스트 기반의 구조로서

가독성이 좋다

JavaScript Object에 영감을 받았기 때문에 key:value pair로 이루어져 있고

데이터를 주고 받을 때, serialization하기 위해 사용한다.

(serialization은 직역하면 '직렬화'라는 뜻. Object를 데이터로 만들어준다..로 일단 이해하면 된다.)

 

놀랍게도 JSON은 프로그래밍 언어나 플랫폼에 상관 없이 사용 가능하다!

그 언어 특징에 맞는 Object로 변환시키고 그 Object를 다시 JSON으로 serialize할 수 있다.

 

 

 

간단한 예시)

Web Application에 지금 토끼라는 Object가 있다.

서버에게 전송할 때, 이 토끼라는 Object를 JSON파일 형태인 {key:value} string type으로 변환해서 서버에 전송한다.

그리고 서버에서 토끼를 다시 받아올 때도, {key:value} string type이 도착하면 

이것을 다시 토끼라는 Object로 변환해서

브라우저에 보여준다.

 

 

이 예시를 통해 앞으로 JSON 공부의 두 가지 포인트를 잡아보자면

1. Object를 어떻게 serialize해서 JSON으로 변환시킬지

2. Serialized 된 JSON을 어떻게 deserialize해서 Object로 바꿔줄지

 

이 두 가지에 집중해서 공부를 해야 한다.

 

 

 

 

 

 

다시 한번 복습을 해보자면,

서버와 브라우저가 통신하기 할 때 사용하는 Ajax라는 기술이 있다.

그 Ajax를 구현하는 여러 기술 중 하나가 fetch API이다.

fetch API를 통해서 데이터를 주고 받을 때 데이터 포맷으로 JSON을 사용한다.

 

Object -> JSON

JSON -> Object