[JSON] JSON이란?

 

 

JavaScript Object Notation.

Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷
객체 리터럴과 매우 흡사하지만 순수한 텍스트로 구성된 데이터 형식이다.
데이터를 교환하거나 저장하기 위한 문법(XML과 같은용도)

 

• 일반 자바스크립트의 객체처럼 원하는 만큼 중첩시켜서 사용할 수도 있다.
• JSON 형식에서는 null, number, string, array, object, boolean을 사용할 수 있다.
• JSON 객체를 .json 확장자를 가진 단순 텍스트 파일에 저장할 수 있으며 MIME 타입은 application/json 이다.
• JSON은 순수히 데이터 포맷으로 오직 프로퍼티만 담을 수 있다. 메서드는 담을 수 없다
• JSON은 문자열과 프로퍼티의 이름 작성시 큰 따옴표만을 사용해야 한다.
• 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있다.
• 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다

---

+++(비교)XML의 특징

XML의 중요한 특징은 다음과 같습니다.

 

1. XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어입니다.

2. XML은 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해줍니다.

3. XML은 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋습니다.

4. XML은 데이터를 보여주지 않고, 데이터를 전달하고 저장하는 것만을 목적으로 합니다.

5. XML은 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어집니다.

---

JSON형식(js 객체형식

/ 예시

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
  ]
}

 

 

JSON.stringfy()

 

자바스크립트 객체를 JSON 텍스트로 변환

이를 문자열화(Stringification)라고 한다.

let o = {
  homeTown: "Metro City",
  formed: 2016,
};


let strObject = JSON.stringify(o);
console.log(typeof strObject, strObject); 


// string '{"homeTown": "Metro City", "formed": 2016}'

 

 

 JSON.parse()

 

JSON 형식의 텍스트를 자바스크립트 객체로 변환

 

서버로부터 전송된 JSON 데이터는 문자열이다.
이 문자열을 객체화하여야 하는데 이를 역직렬화(Deserializing) 또는 파싱(Parsing)이라고 하며 이에 사용되는 내장함수이다.

 

// strObject '{"homeTown": "Metro City", "formed": 2016}'
let obj = JSON.parse(strObject);

console.log(typeof obj, obj); 
// object { homeTown: "Metro City", formed: 2016 }

console.log(obj.formed)
// 2016