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

dev_vming·2023년 12월 2일

목록 보기

6/7

📚 JavaScript JSON

📕 JSON 개념정리

사용이유

브라우저 위의 Client가 어떻게 Sever와 통신할 수 있는지 정의한 것이 바로 HTTP이다. HTTP는 Hypertext Transfer Protocal 의 약자로 Hypertext를 어떻게 주고받을 수 있는지 규약한 프로토콜의 하나이다.

HTTP를 이용해 서버에서 데이터를 받아올 수 있는 방법으로는 AJAX(Asynchronous JavaScript and XML)가 있다. 대표적인 예로는 XHR (XMLHttpRequest)라는 오브젝트가 있고, 이는 브라우저 API에서 제공하는 API중 하나이다. 이를 이용해 간단하게 서버에 데이터를 요청하고 받아올 수 있다.

AJAX와 XHR 모두 이름에 XML이 포함되어 있는데, 서버와의 통신에 XML을 사용하면 불필요한 태그들이 많이 들어가 파일의 용량이 커질 뿐 아니라 가독성도 좋지 않기 때문에 이 대신 JSON을 많이 사용하는 추세이다.

사용방법

JSON은 Javascript Object Notation의 약자로, 자바스크립트의 오브젝트와 같이 key:value의 형식으로 이루어져 있다.

{
  "이름": "John Doe",
  "나이": 30,
  "도시": "서울",
  "관심사": ["프로그래밍", "음악", "여행"]
}

이러한 JSON 파일은 자바스크립트에서 파생되었지만 언어에 독립적이며, 여러 프로그래밍 언어에서 지원된다. 다양한 응용 프로그램 및 서비스에서 설정 파일, 데이터 교환 형식, 웹 API 등에 사용된다.

📗 object to string

stringify

Object 형태에서 JSON string 형식으로 만들기 위해서는 JSON api 중 stringify를 사용한다.

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

// Array
json = JSON.stringify(['apple','banana']);
console.log(json); // ["apple","banana"] 큰따옴표 사용하여 배열처럼 나타남

불리언 값과 배열은 위와 같이 나타나게 된다.

이 외의 값들에 대해서는 한가지 예시를 통해 알아보도록 하겠다.

// Object
const rabbit = {
		name: 'tori',
		color: 'white',
		size: null,
		birthDate: new Date(),
		symbol: symbol("id"),
		jump: () => {
				console.log(`${this.name} can jump`);
},
};
json = JSON.stringify(rabbit);
console.log(json);
/* {"name":"tori",
	"color":"white",
	"size":null,
	"birthDate":"2023-09-30S03:08:22.670Z"}} */

위와 같이 rabbit이라는 객체가 있을 때, stringify를 거치게되면 오브젝트에 포함되지 않은 데이터인 함수와 자바스크립트에서만 사용되는 symbol은 제외된다.

이 외에 원하는 값만 JSON 형태로 변경하거나 콜백함수를 이용해 변경하는 방법도 있다.

// 원하는 값만 전달하기 위해서는 배열에 원하는 property 작성
json = JSON.stringify(rabbit,['name', 'color']);
console.log(json); // {"name":"tori", "color":"white"}

// 콜백함수를 이용하는 방법
json = JSON.stringify(rabbit,(key,value) => {
		console.log(`key: ${key}, value: ${value}`);
/* key: , value: [object object] → rabbit을 감싼 가장 최상위의 것
key: name , value: tori
key: color , value: white
key: size , value: null
key: birthDate , value: 2023-09-30S03:08:22.670Z
key: jump , value: () => { console.log(`${this.name} can jump`);}
 */
		return value;
});
console.log(json); // {"name":"tori","color":"white","size":null,"birthDate":"2023-09-30S03:08:22.670Z"}}

json = JSON.stringify(rabbit,(key,value) => {
		console.log(`key: ${key}, value: ${value}`);
/* key: , value: [object object] → rabbit을 감싼 가장 최상위의 것
key: name , value: tori
key: color , value: white
key: size , value: null
key: birthDate , value: 2023-09-30S03:08:22.670Z
key: jump , value: () => { console.log(`${this.name} can jump`);}
 */
		return key === 'name' ? 'ming' : value;
});
console.log(json); // {"name":"ming","color":"white","size":null,"birthDate":"2023-09-30S03:08:22.670Z"}}

📘 string to object

parse

string에서 object 형태로 변경하기 위해서는 parse를 이용하면 된다.

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

let json = JSON.stringify(rabbit); // object의 직렬화
const obj = JSON.parse(json); // JSON을 obj로

console.log(obj); // {"name":"tori","color":"white","size":null,"birthDate":"2023-09-30S03:08:22.670Z"}}
obj.jump(); // Error (JSON 파일에 함수 미포함 유의)

console.log(rabbit.birthDate.getDate()); // Date라는 API사용 가능하여 오늘의 날짜 전달
console.log(obj.birthDate.getDate()); // string 값이기 때문에 Error

obj = JSON.parse(json, (key, value) => {
		return key === 'birthDate' ? new Date(value) : vaule;
}); // console로 obj.birthDate.getDate() 가능