[드림코딩 by 엘리] 자바스크립트 기초 강의(4)

 

JavaScript JSON 알아보기

 HTTP(HyperText Transfer Protocol)이란 브라우저 위에서 동작하는 클라이언트가 어떻게 서버와 통신할 수 있는지, 어떻게 Hypertext를 서로 주고받을 수 있는지 정의한 프로토콜로 통신규약이다. Hypertext란 링크만 해당하는 것이 아니라 브라우저를 기반으로 사용되는 자원들, 예를 들면 문서, 이미지, 파일 등을 포함한다. Http는 클라이언트가 서버에게 데이터를 요청(Request)할 수 있고, 서버는 클라이언트가 요청한 것에 따라 그에 맞는 응답(Response)을 클라이언트에게 보내주는 방식으로 구성된다.

 

Http를 이용하여 서버에게 데이터를 요청해 받아오는 방법으로 Ajax를 이용했다. Ajax는 웹페이지에서 동적으로 서버와 데이터를 주고받을 수 있는 기술인데, Web API 중 하나인 XHR(XML Http Request)을 이용했다. XHR 오브젝트를 이용하여 간단하게 서버에 데이터를 요청하고 받아올 수 있었다. XHR은 이름때문에 XML 형식만 이용할 수 있을 것 같지만 XML뿐만 아니라 다양한 형식의 데이터로 이용할 수 있다. XML은 HTML과 같은 Mark up Language 중 하나로, 태그를 이용해 데이터 포맷을 나타낸다. 따라서 불필요한 태그가 많아 파일의 사이즈가 커질 뿐만 아니라 가독성도 좋지 않아 많이 사용하지 않는다. 최근 브라우저에 추가된 fetch() API를 이용하면 서버와 데이터를 간편하게 주고받을 수 있다. 하지만 fetch()는 인터넷 익스플로러에서 제공되지 않기때문에 이 점을 유의하여 사용해야 한다.

 

 JSON은 JavaScript Object Notation의 약자로, 1999년 ECMAScript 3 에 쓰여진 오브젝트에서 영감을 받아 만들어진 데이터 포맷이다. 자바스크립트에서 Object는 Key와 Value로 구성되어 있는데, JSON도 마찬가지로 Key, Value로 구성되어 있다. JSON은 브라우저뿐만 아니라 모바일에서 서버와 데이터를 주고받을 때, 또는 서버와 통신을 하지 않아도 Object를 파일 시스템에 저장할 때 많이 사용한다. JSON의 장점은 다음과 같다.

• simplest data interchange format
• lightweight text-based stuctrue
• 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을 공부할 때는 Object를 어떻게 직렬화해서 JSON으로 변환할지, 직렬화된 JSON을 어덯게 Deserialize해서 Object로 변환할 건지 중점적으로 공부하면 된다.

 

 

---

[참고]

https://youtu.be/FN_D4Ihs3LE

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

XMLHttpRequest - Web APIs | MDN

위 내용은 유투브 영상과 MDN 문서를 참고하여 작성했습니다.