[JavaScript] JSON

 

 

JSON을 이해하려면 서버와의 통신에 대해 생각해보자.

웹사이트나 앱과 같은 Client들이 Server와 어떻게 통신할 수 있는지를 정의한 것이 *HTTP이다.

* HTTP ( Hypertext Transfer Protocal)
: Hypertext를(HTML 문서와 같은 리소스들을) 어떻게 서로 주고받을 수 있는지를 규약 한 프로토콜이다. 

- Hypertext는 링크만 해당하는 것이 아니라 문서나 이미지 등의 데이터 파일도 해당한다. 

HTTP는 Client가 Server에게 데이터를 request(요청)하고, 반대로 Server는 요청받은 것에 따라 response(응답)을 Client에 보내 주는 방식을 의미한다.

HTTP를 이용해서 Server에게 데이터를 요청해서 받아올 수 있는 방법으로는 *AJAX가 있다.

* AJAX ( Asynchronous JavaScript And XML )
: 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술을 의미한다.

XML은 HTML과 같은 마크업 언어 중에 하나로서, 데이터를 표현하는 한 가지의 방법이라고 할 수 있다. 서버와 데이터를 주고받을 때는 XML뿐만 아니라 다양한 파일 포맷을 전달받을 수 있는데, 요즘 많이 사용하는 JSON도 이에 해당한다. 

여기에 해당하는 대표적인 예로 XHR (XMLHttpRequest)라는 오브젝트를 들 수 있다. 
브라우저 API에서 제공하는 오브젝트 중의 하나인 XHR을 이용하면, 간편하게 서버에게 데이터를 요청하고 받아올 수가 있다.
(비교적 최근에 브라우저 API에 추가된 fetch() API를 이용해도 간편하게 데이터를 주고받을 수 있다. 하지만 인터넷 익스플로우에서는 지원이 되지 않기 때문에 유의해서 사용해야 한다.)

XML을 사용하면 불필요한 코드가 많이 사용되기 때문에 파일의 크기도 크고, 가독성도 좋지 않아 요즘에는 *JSON을 많이 사용하고 있다.

 

* JSON (JavaScript Object Notation) 
: ECMAScript3 버전의 Object와 같이 key와 value로 이루어진 데이터 포맷이다. 
 
- Structures : Object { key: value }

 

Object Structures  (출처:https://www.json.org/json-ko.html) 

 

JSON (JavaScript Object Notation)

JSON에는 stringfy와 parse가 있다. 메서드는 각각 콜백 함수를 전달해서 데이터를 세밀하게 제어할 수 있다. 

정의 및 특성:

ㅡ JSON은 데이터를 주고받을 때 쓸 수 있는 가벼운 데이터 포맷이다.

ㅡ 문자열로 존재하기 때문에 네트워크를 통해 데이터 전송할 때 유용하다.
ㅡ JavaScript 객체 구문을 따르는 텍스트 기반 데이터 형식으로, JavaScript 객체 리터럴 구문과 매우 유사하지만 JavaScript와는 독립적으로 사용할 수 있다.

ㅡ 거의 대부분의 프로그래밍 언어나 플랫폼에 상관없이 쓰일 수 있다.

ㅡ 클라이언트(브라우저, 모바일)와 서버간에 데이터를 주고 받을 때, 또는 서버와 통신하지 않아도 Object를 파일 시스템에 저장할 때도 JSON 데이터 타입을 이용한다.

ㅡ 데이터에 액세스 하려면 네이티브 JavaScript 개체로 변환해야 한다.

 

 

1. 오브젝트를 어떻게 직렬화(serialization)하여 JSON으로 변환하는가? 

JSON Methods  stringfy(obj)

// Object to JSON (직렬화;serialize)
// 주어진 값에 해당하는 JSON 문자열을 반환. 선택적으로 특정 속성만 포함하거나 사용자 정의 방식으로 속성을 대체할 수 있음

let json = JSON.stringify(true);
console.log(json);

 

 

 

2. 직렬화된 JSON을 어떻게 다시 오브젝트로 역직렬화(deserialization)하여 변환하는가? 

JSON Methods  parse(json)

// JSON to Object (역직렬화;deserialization)
// JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성

json = JSON.stringify(cat);
const obj = JSON.parse(json);
console.log(obj);

 

선택적으로 reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있다.

 

 

 

 

 

 

 

참조 MDN, JavaScript.info, Dreamcoding