JSON (JavaScript Object Notation)이란?
- 네트워크를 통해 데이터를 주고받는 데 자주 사용되는 경량의 데이터 형식
- Javascript에서 객체를 만들 때 사용하는 표현식
- 어떠한 통신 방법이나 프로그래밍 문법을 의미하는게 아닌,
단순히 데이터를 표시하는 언어 독립형 표현 방법이다.
⇒ 프로그래밍 언어나 플랫폼에 독립적이므로, C, C++, C#, JAVA, PYTHON 등 여러 프로그래밍 언어에서 사용 할 수 있다.
더 쉽게 말하면, { name: value } 형태의 쌍들의 집합이다!
{
"nickname": "chloe",
"age": 26,
"hobby": [ "game", "cooking", "tennis" ] // object 안에 array
"favoriteFood": {
"1": "chicken",
"2": "rawFish",
"3": "tiramisu"
} //object 안에 object
} // object☝️ 예제의 "nickname"이 { name: value } 에 해당한다.
✌️ 이때, { name: value } 인 애들은 무조건 string이어야 한다.
(예제에서는 큰따옴표로 묶어줬다.)
🤟 { name: value } 는 string, number, null, boolean 등의 기본 자료형 또는 array[ ], object{ }가 올수도 있다.
⇒ 만약 string이 온다면 name과 마찬가지로 큰따옴표로 묶어준다!
{ } : 중괄호로 object 시작!
- JSON에서의 객체는, 위에서 말한 name-value의 쌍의 집합이다.
- name과 value는 콜론
:으로 이어져있다. - 각 쌍들을 쉼표
,로 구분한다.
[ ] : 대괄호로 array 시작!
객체는 반드시 name-value의 쌍이라는 조건만 만족한다면 배열안에 객체도 들어갈 수 있다.
[ 10, {"b": 26}, [30, "c"] ]XML vs JSON
XML(EXtensible Markup Language)
HTML에서 출발한 표현식이기 때문에 데이터 값 양쪽으로 태그가 들어간다.
다만, JSON과 마찬가지로 HTML의 태그를 따라가는게 아닌, 데이터를 저장하고 전달하기 위해 표현식만 가져온것이기 때문에 HTML 태그처럼 태그명이 미리 정의되어 있지 않고 사용자가 직접 정의할 수 있다.
<dog> => 형식은 HTML처럼 <></>태그를 사용하지만, 태그명은 사용자가 정의
<name>아리</name>
<family>웰시코기<family>
<age>1</age>
<weight>2.14</weight>
</dog>데이터의 검증을 사용자가 직접 해야하는 JSON과 달리, XML은 DTD, 스키마를 이용해 검증이 가능하기 때문에 JAVA나 C# 처럼 엄격한 타입 시스템의 언어들에서 많이 사용된다.
JSON
JavaScript의 object에서 출발한 표현식이기 때문에 { }로 시작해서 : 으로 name:value 쌍을 묶어주고, , 으로 나열하면 끝!
{
"name": "아리",
"family": "웰시코기",
"age": 1,
"weight": 2.14
}용량이 작고 파싱이 속도가 빨라서 자바스크립트가 자주 사용되고, HTML과 연동되어 빠른 응답이 필요한 웹 환경에서 많이 사용된다.
⚠️ JSON의 문제점
JSON 데이터 뿐만 아니라, JavaScript 자체도 전달할 수 있다.
단순한 JSON 데이터인줄 알고 받았다가, 악성 스크립트가 실행될 수 있다는 것.
이런 보안상의 문제가 있기 때문에 순수한 데이터만 추출하기 위해 JSON 관련 라이브러리를 따로 사용하기도 한다.
JSON parsing
🤷🏻♀️ JSON을 파싱?
⇒ JSON data의 형태를 이해하고 데이터를 사용할 수 있도록 분석
(예를 들어 java의 JsonObject와 JsonArray가 JSON을 파싱하는데 이용된다.)
JavaScript에서는 JSON 데이터를 처리하기 위해 다음과 같은 메서드를 제공한다.
JSON.stringify()
인수로 전달받은 Javscript 객체를 문자열로 변환하여 반환
const dog = {name: "아리", family: "웰시코기", age: 1, weight: 2.14}; // Javascript 객체
const data = JSON.stringify(dog); // Javscript 객체를 문자열로 변환
document.getElementById("json").innerHTML = data;value에는 변환할 자바스크립트 객체를 전달한다.
UTF-16으로 인코딩된 JSON 형식의 문자열로 반환
JSON.parse()
JSON.stringify() 메서드와 반대로 인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환
const data = '{"name": "아리", "family": "웰시코기", "age": 1, "weight": 2.14}'; // JSON 형식의 문자열
const dog = JSON.parse(data); // JSON 형식의 문자열을 Javscript 객체로 변환
document.getElementById("json").innerHTML = dog + "<br>";
document.getElementById("json").innerHTML += dog.name + ", " + dog.family;text에는 변환할 문자열을 전달한다.
이때 해당 문자열은 반드시 유효한 JSON 형식의 문자열이어야 한다. ⇒ JSON 형식에 맞지 않으면 오류 발생
toJSON()
자바스크립트의 Date 객체의 데이터를 JSON 형식의 문자열로 변환하여 반환
⇒ 이 메서드는 Date.prototype 객체에서만 사용 가능
const date = new Date(); // Javscript Date 객체
const str = date.toJSON(); // Date 객체를 JSON 형식의 문자열로 변환
document.getElementById("json").innerHTML = date + "<br>";
document.getElementById("json").innerHTML += str;