[JS] JSON의 정의와 함수 사용 방법

JSON 이란?

 

웹 브라우저 위에서 동작하고 있는 웹 사이트 또는 웹 애플리케이션(이하 Client)은

서버에 데이터를 요청하고 원하는 데이터를 받을 수 있는데

이 때 데이터의 파일 포맷은 여러가지가 있는데 그 중 하나가 JSON 이라고 할 수 있다.

 

JSON의 장점

 

ㆍClient와 Server가 데이터를 주고 받을 때 사용할 수 있는 가장 간단한 파일 포맷

ㆍClient와 Server가 데이터를 주고 받을 때 직렬화(serialize) 하기 위해 사용

ㆍ텍스트를 기반으로 하고 가독성이 좋음

ㆍKey와 Value의 쌍으로 이루어져 있음

ㆍ프로그래밍 언어나 플랫폼에 상관없이 사용할 수 있음

 

 

직렬화

 

출처 : Youtube 드림코딩

 

웹 사이트에 토끼라는 Object가 존재한다고 가정하자.

이 Object를 JSON 문자열로 변환하는 것을 직렬화(serialize) 라고 한다.

반대의 경우는 역직렬화(deserialize) 라고 한다.

 

 

1. 직렬화 문법

 

javascript

닫기 줄바꿈

// rabbit object
const rabbit = {
‌name: 'tori',
‌color: 'white',
‌birthDate: new Date(),
‌jump: () => {
‌‌console.log(`${this.name} can jump!`);
‌}
};

 

먼저, rabbit 이라는 object를 생성한다.

 

javascript

닫기 줄바꿈

// object → JSON (직렬화)
const json = JSON.stringify(rabbit);

 

JSON 객체의 stringify(obj) 함수를 사용하면 rabbit 객체는 JSON 형식으로 변환된다.

 

 

key의 값 또는 value의 값이 문자열인 경우 쌍따옴표(")로 묶이는 것이 JSON의 규격이라고 할 수 있다.

 

stringify() 함수에 대한 조금 더 자세한 정보는 링크를 남겨 놓겠다.

JSON.stringify() - JavaScript | MDN

 

2. 역직렬화 문법

 

javascript

닫기 줄바꿈

const obj = JSON.parse(json);
console.log("역직렬화 후 : " + obj);

 

JSON 객체의 parse(json) 함수를 사용하면

JSON 형식의 데이터가 Object 타입으로 변환되는 것을 확인할 수 있다.

 

parse() 함수에 대한 조금 더 자세한 정보는 링크를 남겨 놓겠다.

JSON.parse() - JavaScript | MDN