해당 벨로그는 드림코딩의 자바스크립트 기초 강의 (ES5+) 10강을 보고 작성한 글입니다.

10강은 JSON 개념 정리 와 활용방법에 대해서 배운다.

HTTP → client 가 어떻게 server 와 통신할 수 있는지 정리한 것

HTTP(Hypertext Transfer Protocol) → 어떻게 Hypertext 를 서로 주고받을지를 규약하는 프로토콜

HTTP 는 client 가 server 에게 데이터를 request (요청) 할 수 있고, server는 client 가 요청한 것에 따라서 그에 맞는 response (응답) 을 client 에 보내주는 방식을 의미한다.

hypertext 는 웹사이트에서 이용되는 hyperlink 뿐만 아니라 전반적으로 사용되는 리소스, 문서, 이미지파일 등을 다 포함해서 말한다.

HTTP 를 이용해 서버에 데이터를 요청해 받아올 수 있는 방법으로는 AJAX 를 사용했다.

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

AJAX 의 대표적인 예로는 XHR(XMLHttpRequest) 라는 오브젝트가 있다.

XHR 라는 오브젝트는 브라우저 API 에서 제공하는 오브젝트 중에 하나로, 이 오브젝트를 이용하면 간단하게 서버에게 데이터를 요청하고 받아올 수 있다.

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

fetch() API 는 인터넷 익스플로어에서 지원이 되지 않는다.

AJAX, XMR 을 보면 XML 이 반복해서 등장한다.

XML 마크업 언어 중에 하나로, HTML 과 비슷한 언어이다.

XML 은 태그를 이용해서 데이터를 나타낸다. HTML 과 마찬가지로 데이터를 표현할 수 있는 방법 중에 하나다.

AJAX, XHR 를 보면 XML 만 등장하는데, 서버와 데이터를 주고받을 때는 XML 만 가능할까?

서버와 데이터를 주고받을때는 굉장히 많은 데이터 포맷을 주고받을 수 있다.

요즘은 JSON 을 많이 사용하고 있다.

XML 이라는 이름이 등장한 이유는?

AJAX, XHR 이 활발하게 개발되는 시기에 마이크로소프트 개발팀이 활발히 참여해서 만들었다.

이때 outlook 은 서버와 클라이언트 데이터 전송시 XML 을 사용했다. 그래서 XML 을 붙여서 개발했다. 데이터를 주고받을 땐 XML 뿐만 아니라 다양한 타입에 데이터를 주고받을 수 있어서 XML 이라고 이름 지은 것은 굉장히 큰 실수같아 보인다. 이것을 보아 모든 사람들이 공통적으로 사용하는 API, 함수에 대해 이름지을 때 명료하게 이름 지어야할 교훈을 얻을 수 있다.

브라우저에서 서버와 통신할 때 새로 추가된 fetch() 라는 API 를 사용할 수 있고,

요즘도 흔하게 사용되는 XMLHttpRequest 라는 오브젝트를 이용해 서버와 통신할 수 있다.

XML 을 사용하면, 불필요한 태그들이 너무 많이 들어가서 파일 사이즈도 커질 뿐만 아니라 가독성도 좋지 않기 때문에 XML 은 많이 사용되고 있지 않다.

XML 대신 요즘에는 JSON 을 많이 사용하고 있다. JSON(JavaScript Object Notation) 은 자바스크립트 오브젝트와 관련된 개념으로 유추해볼 수 있다. JSON 은 1999년 ECMAScript 3번째 버전에서 사용된 오브젝트에서 큰 영감을 받아서 만들어진 데이터 포맷이다.

자바스크립트에서 오브젝트는 key, value 로 구성된다. JSON 도 동일하게 key, value 로 구성된다.

JSON 은 브라우저 뿐만 아니라 모바일에서도 서버와 데이터를 주고받을 때, 또는 서버와 통신하지 않아도 오브젝트를 파일 시스템에 저장할 때도 JSON 데이터 타입을 많이 사용하고 있다.

JSON 은 데이터를 주고받을 때 사용할 수 있는 가장 간단한 파일 포맷이다.

텍스트를 기반으로 한 가볍고 가독성이 좋으며 key, value 쌍으로 이루어진 파일 포맷이다.

보통 서버와 데이터를 주고 받을 때, serialization(직렬화) 를 위해 JSON 을 이용한다.

프로그래밍 언어나 플랫폼에 상관없이 JSON 을 사용할 수 있다!

거의 모든 언어들이 JSON 으로 serialization 된 오브젝트를 다시 언어 그 자체의 특징에 맞게 오브젝트로 변환한다. 또한 언어들이 오브젝트를 다시 JSON 으로 serialization 하는 것을 지원해주거나, 많이 사용하고 있는 외부 라이브러리를 통해서 오브젝트를 다시 serialization 하는 것을 가능하게 한다.

클라이언트에서 토끼 오브젝트를 전달할 때, key,value 의 string 타입으로 변환해서 서버에 전송한다.

서버에서 다시 토끼를 받아올때도 key,value 의 string 타입으로 토끼를 전송받아와서 다시 토끼 오브젝트로 변환한다. 그리고 브라우저에 토끼 오브젝트를 표기한다.

JSON 공부 포인트

• 오브젝트를 어떻게 serialize(직렬화) 해서 JSON 으로 변환할지?
• 직렬화된 JSON 을 어떻게 deserialize 해서 오브젝트로 다시 변환할건지? 이 2가지를 중점적으로 공부하면 된다.
  

JSON 에는 JSON 오브젝트에 있는 2가지 API 가 있다.

이름만 보고서도 stringify 는 오브젝트를 직렬화해서 string 으로 만들 것 같고, parse 는 오브젝트로 변환할 수 있을 것 같다.

stringify(obj)

간단한 데이터 타입부터 JSON 으로 변환해보자.

JSON 에는 JSON 오브젝트에 있는 API인 stringify() 를 이용하면, 오브젝트를 JSON 으로 변환할 수 있다.

JSON 라는 인터페이스 안에는 총 2가지 API 가 존재한다.

API 에 parse, stringify 가 있다.

인터페이스 안에 동일한 함수(stringify)가 2개가 있고, 전달되는 4개의 변수에서 차이가 있다.

이것을 오버로딩(Overloading) 이라고 한다. 함수의 이름은 동일하지만, 어떤 파라미터를 전달하냐에 따라서 각각 다른 방식으로 호출이 가능한 것이다.

총 2개의 API 가 있는데, parse 는 JSON 의 string 데이터를 넣으면, 어떤(any) 타입의 오브젝트로 변환되고, optional 타입에 콜백함수 reviver? 는 콜백함수인데 결과값을 변형한다고 소개되어 있다.

parse 를 통해 오브젝트가 만들어지는 과정을 좀 더 세밀하게 조정하고 싶다면, reviver 함수를 이용하면 된다.

stringify 는 어떤 타입의 오브젝트이든 인자로 받고, 바로 string 으로 변환한다.
string 으로 변환할 때 조금더 세밀하게 통제하고 싶다면 optional 타입의 콜백함수 replacer 를 전달하면, 개발자가 좀더 통제하면서 string 을 만들 수 있다.

결과를 보면 큰따옴표(”) 가 감싸고 있는 것을 확인할 수 있다.

큰따옴표는 JSON 의 규격사항이다. 타입은 string 이지만, 배열처럼 보이게 하려는 것을 볼 수 있다.

• 오브젝트를 JSON 으로 변환해보자 → 함수, 심볼은 JSON 에 포함되지 않음

  

  오브젝트가 string 으로 변환되어 JSON 으로 만들어짐을 확인할 수 있다.

  jump 라는 함수는 JSON 결과값에 포함되지 않음을 확인할 수 있다.

  함수는 오브젝트에 있는 데이터가 아니기 때문에, 함수는 제외된다.

  자바스크립트에만 존재하는 데이터형식(symbol) 같은 경우에도, JSON 에 포함되지 않는다.

  
  

• JSON 변환을 좀 더 통제하는 경우를 살펴보자 → replacer

  • replacer → [’프로퍼티 key’]

    

    replacer 는 함수 형식으로 전달해도 되고, 배열 형태로 전달해도 된다.

    
    예를 들어 토끼 오브젝트에서 이름만 JSON 으로 변환하고 싶다면 → [’프로퍼티 key’] 를 기입
    내가 원하는 프로퍼티명만 기입해 정의하게 되면, 해당하는 프로퍼티만 JSON 으로 변환된다.
    

  • replacer → 콜백함수

    

    replacer 는 key 와 value 를 전달받는다.

    key 와 value 를 전달받는 콜백함수를 전달하게 되면, key와 value 에 따라서 좀 더 다양한 것들을 시도해볼 수 있다.

    
    

    key, value 들이 콜백함수에 전달되는 것을 확인할 수 있다.

    제일 처음으로 전달되는 것은 토끼의 오브젝트를 감싸고 있는 제일 최상위 것이 전달된다.

    그 뒤부터 key, value 들이 전달되는 것을 볼 수 있다.

    
    key 가 name 이면, ‘ellie’ 로 변환하고, 아니라면 value 를 출력하는 코드이다.

parse(json)

JSON 을 오브젝트로 변환하는 parse 에 대해서 알아보자.

JSON 의 parse 라는 API 를 이용해서 변환하고 싶은 json 을 전달하면 된다.

변환한 오브젝트는 serialize 가 되어, 즉 string 으로 만들어진 JSON 으로부터 다시 오브젝트로 만들어진다. 이 때 함수는 serialize 되지 못해서, 다시 JSON 에서 오브젝트로 만든 결과에는 jump 라는 API 가 존재하지 않는다.

그래서 다시 만든 오브젝트에서 jump 실행시 에러가 발생한다.

토끼라는 오브젝트를 JSON 으로 변환할때는, 함수가 포함될 수 없었다. 데이터들만 JSON 으로 변환되었다가, 다시 JSON을 오브젝트로 변환할때 jump 라는 메서드는 포함되어 있지 않는다.

그래서 오브젝트에는 jump 라는 기능이 없다. → 이점을 유의해서 코딩해야 한다!

토끼에는 birthDate 라는 오브젝트가 있었다. 이것은 date 라는 오브젝트이다.

그래서 getDate() 라는 API 를 사용할 수 있다.

JSON 에서 다시 오브젝트로 변환한 변수 obj 의 birthDate 에 getDate() 를 이용하면 에러가 발생한다.

birthDate 는 string 이기 때문이다.

rabbit 이라는 오브젝트를 JSON 으로 만들었을 때 birthDate 는 string 형태로 만들어졌기 때문에,

JSON 을 다시 오브젝트로 변환할 때도 당연히 string 으로 할당된다.

하지만, rabbit 안의 birthDate 는 new Date() 라는 오브젝트 자체다.

그래서 이것을 좀 더 세밀하게 변환하고 싶을때 콜백함수를 이용할 수 있다. → reviver

(key, value) 파라미터를 받아서 무언가를 처리하는 콜백함수를 전달한다. 콜백함수는 기본적으로 value 를 리턴한다.

하단 코드를 통해 결과를 확인해보면, 모든 key, value 들이 출력되는 것을 확인할 수 있다.

만약 key 가 birthDate 라면, Date() 라는 새로운 오브젝트를 만들 것이고, 아니라면 원래 있던 value 그대로를 사용하자고 하자.

유용한 사이트 모음

JSON DIFF

서버에서 받아온 데이터와 원본 데이터가 어떻게 다른지 비교할 때 사용하면 좋다.

문제를 디버깅할 때 좋다.

JSON Beautifier

가끔 서버에서 받아온 JSON 을 복붙하면 포맷이 망가지는 경우가 있다.

버튼을 누르면 포맷이 다시 예쁘게 만들어진다.

JSON Parser

JSON 타입을 오브젝트로 확인해보고 싶다면, 해당 사이트를 통해 오브젝트가 어떻게 표기되었는지 눈으로 더 쉽게 확인할 수 있다.

JSON Validator

JSON 을 붙여넣어서 유효한 데이터인지 아닌지 확인해볼 수 있다.