[JS] JSON 개념정리와 활용방법

요들레이후·2022년 5월 12일

JSON.parse JSON.stringify JavaScript기초 XMLHTTPRequest ajax http json

Javascript

목록 보기

6/11

드림코딩 by 엘리 : 자바스크립트 기초 강의 (ES5+)

HTTP(Hypertext Transfer Protocol)

브라우저 위에서 동작하는 웹사이트 또는 웹 어플리케이션(클라이언트)이 서버와 통신할 때 사용하는 규약이 HTTP이다.

HTTP는 클라이언트가 서버에게 데이터를 request(요구)하고 서버는 클라이언트의 요구에 맞게 그에 따른 response(응답)하는 것을 의미한다.

Hypertext
: 웹사이트에서 이용되고 있는 Hyperlinks뿐만 아니라 전반적으로 쓰이고 있는 리소스들(문서, 이미지)을 포함하는 것

AJAX(Asynchronous JavaScript And XML)

HTTP를 이용해서 서버에게 데이터를 요청해서 받아올 수 있는 방법이다.
웹페이지에서 동적으로 데이터를 받아올 수 있는 기술, 대표적으로 XMLHttpRequest라는 Object가 있다.

XMLHttpRequest

이것은 브라우저 API에서 제공하는 Object중 하나로 이 Object는 서버에게 간단하게 데이터를 요청하고 받아오는 것이 가능하다.

또한 최근에(2020년 기준) 추가된 fetch() API를 이용하면 간편하게 데이터를 주고 받을 수 있다.

브라우저에서 서버와 통신할 때는 fetch() API와 XMLHttpRequest를 사용할 수 있다. 하지만 XML은 불필요한 태그가 많이 사용되어서 파일 사이즈도 커질 뿐만 아니라 가독성도 좋지 않기 때문에 XML은 많이 사용되지 않는다.

XML대신 JSON을 많이 사용하고 있다.

JSON(JavaScript Object Notation)

1999년도 ECMAScript 3번째 버전에서 사용되는 Object에서 큰 영감을 받고 만들어진 데이터 포맷이다.

Object{key:value} 상당히 비슷하게 생겼으며 브라우저 뿐만 아니라 모바일에서도 데이터 통신을 위해 사용되어지며 또는 데이터를 주고 받지 않아도 Object를 파일 시스템에 저장할 때도 JSON타입을 많이 사용하고 있다.

데이터를 주고 받을 수 있는 가장 간단한 데이터 포맷이다.

텍스트 기반으로 이루어져 가볍고 가독성이 좋다.

키와 쌍으로 구성되어있으며

데이터를 서버와 주고 받을 때 전송 및 직렬화를 위해 쓰인다.

프로그래밍 언어나 플랫폼에 상관없이 쓸 수 있다.(C, C#, JAVA, Python, PHP, Kotlin, Go)

JSON의 전송 및 표기 과정

Client에 A Object가 있으면
이 A Object를 Server에 전송할 때는 {key: value}의 String 타입으로 전송,
Server에서 다시 받아올 때도 String타입으로 받아와서 Object로 변환해서 브라우저에 표기한다.

JSON에서 알아야 할 두가지
1. Object를 어떻게 직렬화(Serialize)해서 JSON파일로 변환할 것인지
2. Serialize된 JSON을 다시 어떻게 Deserialize해서 Object 파일로 변환할 것인지에 대해 알아야 한다.

JSON API 문서를 보면 2가지 함수가 존재하는데, 하나는 parse 나머지 하나는 stringify이다.

1. Object to JSON(stringify(obj))

JSON.stringify()

Object를 JSON으로 변경하여 반환한다.
첫 번째 매개변수로 Object를 받고 두 번째 매개변수는 replacer(option)라는 콜백함수를 받는다.
콜백함수는 결과를 변형시키는데 더 세밀하게 조정이 가능하다.

Boolean type

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

Array

json = JSON.stringify(["apple", "banana"]);
console.log(json);

Object

함수는 Object에 있는 데이터가 아니므로 제외
js자체 특별한 데이터 타입도 JSON에서 제외
ex) Symbol

const rabbit = {
  name: "tori",
  color: "white",
  size: null,
  birthDate: new Date(),
  //   Symbol: Symbol("id"),
  jump: () => {
    console.log(`${name} can jump!`);
  },
};

json = JSON.stringify(rabbit);
console.log(json);

원하는 property만 뽑아서 통제 가능하다.

json = JSON.stringify(rabbit, ["name", "color"]);
console.log(json);

replacer callback

- 모든 키와 값들이 콜백 함수에 전달됨
- 만약 키에 name이 들어오면 hashin으로 변환, 아니면 원래 값을 반환하게 JSON출력

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === "name" ? "hashin" : value;
});
console.log(json);

2. JSON to Object(parse(JSON))

JSON.parse()

어떠한 String을 받아 Object로 변경하여 반환한다.
첫 번째 매개변수는 Object를 받고 두 번째 매개변수는 reviver(option)라는 콜백함수를 받는다.
콜백함수는 결과를 변형시키는데 더 세밀하게 조정이 가능하다.

1번 예제 Object변환

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

rabbit.jump()

- 변환한 `obj`는 String으로 만들어진 Json으로 부터 다시 Object로 만들었기 때문에, 함수는 Serialize될 때 포함 되지 않는다. 따라서 다시 json으로부터 obj를 만든 것(Deserilalize)에는 jump API가 없다.

rabbit.jump();
// obj.jump(); TypeError; is not a function

rabbit.birthDate.getDate()

- `rabbit`의 `birthDate.getDate`는 Date객체의 API를 사용했지만 `obj`의 `birthDate.getDate`는 Deserialize할 때 그저 String으로 변환되었기 때문에 `getDate()`를 사용하면 에러가 발생한다.

console.log(rabbit.birthDate.getDate());
// console.log(obj.birthDate.getDate());
// Error; birthDate는 string자체로 obj에 할당되어있기 때문
console.log(obj.birthDate); // 제대로 출력

parse reviver

- 하지만 Deserialize를 할 때 콜백함수에서 세부조정을 함으로써 obj도 `getDate()`메서드를 사용할 수가 있게 된다.

// parse reviver 사용시 세밀하게 통제 가능
const obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === "birthDate" ? new Date(value) : value;
});
console.log(obj.birthDate.getDate()); // 제대로 출력