드림코딩 by 엘리_JavaScript JSON

---

서버통신의 시작_JSON

---

 

 

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

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

http는 hypertext transfer protocal 약자로서

어떻게 hypertext 를 서로 주고 받을수 있는지를 규약한 프로토콜의 하나이다.

http는 클라이언트가 서버에게 데이터를 request 요청할 수 있고,

서버는 클라이언트가 요청한 것에 따라서 그에 맞는 response 응답을 클라이언트에 보내주는

이런 방식으로 진행되는 것을 의미한다.

 

hypertext는 웹사이트에서 이용되어지고 있는 hypertext 링크들만 이야기 하는것이 아니라

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

 

 

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

Asynchronous JavaScript And XML의 약자이다.

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

 

 

대표적인 예로는 XMLHttpRequest오브젝트가 있다.

이 XMLHttpRequest오브젝트는 브라우저 API에서 제공하는 오브젝트 중에 하나로

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

 

 

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

이 fech()는 인터넷 익스플로어에서 지원이 되지 않기 때문에 이 점을 유의해서 사용해야 한다.

 

XML 이란?

XML이 계속 등장하고 있는데

html과 같은 markup language 중 하나이다.

태그들을 이용해서 데이터를 나타내는데 html과 마찬가지로 데이터를 표현할 수 있는 한 가지 방법이다.

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

요세는 JSON을 많이 쓰고 있다.

 

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

XML이라고 이름 앞에 지은것은 실수 이다.

이것을 통해서 우리가 함수나 클래스 오브젝트 이름을 정할 때 특히 외부로 노출되는 API를 만들때는 

API의 이름을 명료하게 잘 지어야 한다는 교훈을 얻을 수 있다.

 

 

브라우저에서 서버와 통신을 할때

우리가 새로 추가된 fetch() 라는 API를 사용할 수 도 있고

아니면 요즘도 흔하게 많이 쓰여지고 있는 XMLHttpRequest 라는 오브젝트를 이용해서 서버와 통신 할 수도 있다.

이 XML을 사용하면 불필요한 태그들이 너무 많이 들어가서 파일의 사이즈도 커질 뿐만 아니라

가독성도 좋지 않기때문에 이제는 XML은 많이 사용되어지고 있지 않다.

 

 

요즘에는 XML 대신 JSON(데이터 포맷)이 많이 사용하고 있다.

JavaScript Object Notation의 약자로 자바스크립트 오브젝트와 관련된 파일인가 하고 유추 가능하다.

 

 

자바스크립트에서 오브젝트는 key와 value로 이루어져 있는데

JSON도 똑같이 key와 value로 이루어져 있다.

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

서버와 통신을 하지 않아도 오브젝트를 파일 시스템에 저장할 때도 JSON 데이터 타입을 많이 이용한다.

 

 

• 데이터를 주고받을 때 가장 간단한 파일 포맷이다.
• 텍스트를 기반으로 한다.
• 가볍다.
• 사람 눈으로도 읽기 편하다.
• key와 value로 이루어져 있는 파일 포맷이다.
• 데이터를 보통은 서버와 주고받을 때 serialization(직렬화)을 위해 쓴다.

직렬화하고 그리고 데이터를 전송할 때 쓰이고 제일 중요한 것은 프로그래밍언어나 플랫폼에 상관없이 쓸 수 있다. 이 C, C++, Java etc 언어들에 상관없이 모든 언어와 이 언어가 쓰여지고 있는 플랫폼에 상관없이 거의 대부분의 언어들이 JSON으로 serialization된 오브젝트를 다시 그 언어의 특징에 맞게 오브젝트로 변환하고 다시 JSON으로 serialzation 하는 것을 지원해 주거나아니면 많이 쓰여지고 있는 외부 라이브러리를 통해서 이런 것들이 가능하게 된다.

 

그렇다면 JSON을 어떻게 공부해야 할까?

첫번째 오브젝트를 어떻게 serialzation 직렬화해서 JSON으로 변환할지두번째 바로 직렬화된 JSON을 어떻게 deserialize(역직렬화) 해서 오브젝트로 다시 변환할 건지 이 두가지를 중점적으로 공부하면 된다.

 

오브젝트를 JSON으로 변환하는 방법과

JSON을 오브젝트로 변환하는 방법 이 중요하다.

 

이 방법은 바로 JSON 이라는 오브젝트를 이용하면 간단하게 할 수 있다.

JSON에는 총 2가지의 APIS가 있다.

JSON APIS

interface JSON {

    /**

     * Converts a JavaScript Object Notation (JSON) string into an object.

     * @param text A valid JSON string.

     * @param reviver A function that transforms the results. This function is called for each member of the object.

     * If a member contains nested objects, the nested objects are transformed before the parent object is.

     */

    parse(text: string, reviver?: (this: any, key: string, value: any) => any): any;

    /**

     * Converts a JavaScript value to a JavaScript Object Notation (JSON) string.

     * @param value A JavaScript value, usually an object or array, to be converted.

     * @param replacer A function that transforms the results.

     * @param space Adds indentation, white space, and line break characters to the return-value JSON text to make it easier to read.

     */

    stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;

    /**

     * Converts a JavaScript value to a JavaScript Object Notation (JSON) string.

     * @param value A JavaScript value, usually an object or array, to be converted.

     * @param replacer An array of strings and numbers that acts as an approved list for selecting the object properties that will be stringified.

     * @param space Adds indentation, white space, and line break characters to the return-value JSON text to make it easier to read.

     */

    stringify(value: any, replacer?: (number | string)[] | null, space?: string | number): string;

}

오브젝트를 JSON으로 stringify 스트링으로 만드는 거니까

이 stringify를 이용하면 오브젝트를 JSON으로 변환할 수 있고,

그리고 JSON으로 변화된 스트링을 뭔가 parsing해서 오브젝트로 만드니까

parse를 이용하면 오브젝트로 변환할 수 있다.

 

그래서 stringify를 어떻게 사용할 수 있는지

그리고 스트링으로 만들어진 JSON을 다시 어떻게 오브젝트로 변환할 수 있는지 알아보자

 

 

JSON APIs를 살펴보면 stringify 함수가 2개가 있는걸 볼 수 있는데

즉 동일한 함수가 두 개가 있고 전달되는 매개변수가 약간 차이가 있다.

이런 함수를 오버로딩 이라고 한다.

함수명은 동일하지만 어떤 파라미터를 전달하느냐 몇개의 파라미터를 전달하냐에 따라서 

각각 다른 방식으로 호출이 가능한것이다. 

 

 

parse는 JSON에 string 데이터를 넣으면 어떤 타입의 오브젝트로 변환되고,전달해도 되고 안해도 되는 옵셔널 타입의 콜백함수 reviver이라는 것이 있는데이 함수는 콜백함수 인데 결과값을 뭔가 변형한다.그래서 string을 오브젝트로 변환할 때 오브젝트가 만들어지는 과정을 우리가 좀 더 세민하게 조정하고 싶다면 바로 reviver 함수를 이용하면 된다.

 

 

stringify는 오브젝트... 어떤 타입의 오브젝트를 받아와서 string으로 변환해주는데우리가 스트링으로 만들때 조금 더 세밀하게 통제하고 싶다면 콜백함수를 전달하면 우리가 조금 더 통제하면서스트링으로 만들 수 있다.

 

JSON에는 stringify와 parse가 있다.

그리고 각각 콜백함수를 전달해서 우리가 조금 더 세밀하게 무언가를 통제할 수 있다.

 

JSON Diff checker: http://www.jsondiff.com/

JSON Diff - The semantic JSON compare tool

JSON Beautifier/editor: https://jsonbeautifier.org/

Json Beautifier - Json Formatter | Json Viewer | Json Editor

JSON Parser: https://jsonparser.org/

JSON Parser - Best JSON Formatter | JSON Editor

JSON Validator: https://tools.learningcontainer.com/json-validator/