JavaScript에서 JSON 다루기
JavaScript에서 JSON format 다루기
HTTP에서의 Data Request / Response 방법
HTTP를 이용해서 서버에서 데이터를 요청해서 받아올 수 있는 방법으로 AJAX(Asynchronous JavaScript and XML)를 이용함, AJAX의 대표적 예로는 브라우저 API에서 제공하는 Object중 하나인 XHR(XMLHttpRequest)라는 Object가 있음, 최근 브라우저 API에 추가된 fetch() API를 이용하면 간편하게 데이터 Request/Response가 가능함.
AJAX와 XHR에 XML이 포함된 이유
XML은 HTML과 같은 markup language로서, 데이터를 표현하는 format 중 하나임. 현재 서버와의 데이터 통신에서는 XML뿐만 아니라 다양한 File format으로 통신 가능함. XML이 HTTP와 데이터 통신에서 통신방법이나 Object에 포함 된 이유는 그 당시 Microsoft Outlook 개발 팀이 서버와 클라이언트 간 데이터 송수신을 XML을 이용하였기 때문임.
XML의 한계
상대적으로 태그가 많고 복잡, 가독성의 문제
상대적으로 데이터 용량 차지가 크다
보안 문제
이에 따라 XML 대신 JSON format을 이용
JSON (JavaScript Object Notation)
1999년 ECMAScript 3rd에서 도입된 Object(객체)의 구조인 { key : value } 구조에 영감을 받아 구성된 Data Format임
서로 다른 언어들간에 데이터를 주고 받는 여러 방법이 있다. 대표적인 것이 XML인데, XML은 문법이 복잡하고, 엄격한 표현규칙으로 인해서 json 대비 데이터의 용량이 커진다는 단점이 있다. JSON은 경량의 데이터 교환 형식으로 JavaScript에서 숫자와 배열등을 만드는 형식을 차용해서 이것을 다른 언어에서도 사용할 수 있도록 한 텍스트 형식이다.
JSON(JavaScript Object Notation)의 약자로 JavaScript에서 객체를 만들 때 사용하는 표현식을 의미한다. 이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다. 이런 이유로 최근에는 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송등에 많이 사용된다. JSON에 대한 자세한 내용은 아래 JSON의 공식홈페이지를 참조한다.
http://www.json.org/json-ko.html
JavaScript에서의 JSON format 처리
Object to JSON
// 1. Object to JSON (Object를 JSON으로 변환)
// stringify(obj)
let json = JSON.stringify(true);
console.log(json);
// 결과 : true (boolean 또한 가능)
json = JSON.stringify(["apple", "banana"]);
console.log(json);
// 결과 : ["apple", "banana"] (double quote[""]가 JSON의 규격임)
const rabbit = {
name: "tokki",
color: "white",
size: null,
birthDate: new Date(),
jump: () => {
console.log(`${name} can jump!`);
},
};
json = JSON.stringify(rabbit);
console.log(json);
// 결과 : {"name":"tokki","color":"white","size":null,"birthDate":"2020-05-29T13:21:16.5282"} (Object의 함수, JavaScript에만 존재하는 Symbol()등은 JSON화 되지 않음)
json = JSON.stringify(rabbit, {'name', 'color'});
console.log(json);
// 결과 : {"name":"tokki","color":"white"} (원하는 데이터 항목만 JSON화 가능)
json = JSON.stringify(rabbit, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return value;
});
console.log(json);
// 결과 : 제일 처음(최상위)에는 Object그 자체가 출력되고 이후 key, value 쌍이 각각 출력 된 후 전체 json data가 출력 됨
json = JSON.stringify(rabbit, {key, value} => {
console.log(`key: ${key}, value: ${value}`);
return key === 'name' ? 'tokkeng' : value;
// key가 name일 경우 key의 value를 tokkeng으로 바꾸고,
// 다른 key일 경우 원래 value 그대로 출력한다.
});
console.log(json);
// 결과 : 위와 같으나, name만 tokkeng으로 바뀌어 출력 됨.
JSON to Object
// 2. JSON to Object
// parse(json)
json = JSON.stringify(rabbit);
// 우선 rabbit Object를 JSON으로 바꿈.
const obj = JSON.parse(json);
// 바꾼 JSON format을 다시 Object로 바꿈. (JSON.parse() 이용)
console.log(obj);
// 기존에 있던 rabbit.jump(); 는 다시 Object로 만들었을 경우 사용 불가
const obj = JSON.parse(json, (key, value) => {
return key === "birthDate" ? new Date(value) : value;
});
// key가 birthDate 일 경우, 문자열(string) 그대로 받아오지 말고 Date Object로 받아오도록 변환해줌
