본문 바로가기
FRONT-END/JAVASCRIPT

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

by 썬키 2023. 2. 2.
JSON 이란?

 

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

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

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

 

JSON의 장점

 

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

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

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

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

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

 

 

직렬화

 

출처 : Youtube 드림코딩

 

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

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

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

 

 

1. 직렬화 문법

 

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

 

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

 

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

 

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

 

 

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

 

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

 

JSON.stringify() - JavaScript | MDN

JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함

developer.mozilla.org

 

2. 역직렬화 문법

 

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

 

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

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

 

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

 

JSON.parse() - JavaScript | MDN

JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다. 선택적으로, reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있습니다.

developer.mozilla.org

 

'FRONT-END > JAVASCRIPT' 카테고리의 다른 글

[JS] SpeechSynthesisUtterance API  (0) 2023.04.02
[JS] XMLHttpRequest  (0) 2023.02.01
[JS] 특정 <tr>, <td> 값에 접근하기  (0) 2023.01.31
[JS] JS를 이용하여 TABLE 만들기  (0) 2023.01.31
[JS] onkeydown, onkeypress 차이점  (0) 2023.01.31

댓글