[JS] JSON

JSON (JavaScript Object Notation)

의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식으로 Javascript에서 객체를 만들 때 사용하는 표현식을 의미합니다.

• JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 적어서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.
• JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.

특징

• 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다.
• 자바스크립트 객체 표기법과 아주 유사하다.
• 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있는 이점이 있다.
• JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌다.
• 자바스크립트의 문법과 굉장히 유사하지만 텍스트 형식일 뿐이다.
• 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있다.
• 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링할 수 있는 라이브러리를 제공한다

※ 데이터 핸들링 : 파일의 기본 구성 요소인 레코드를 기반으로 하여 이들의 필드를 조작하는 것을 말합니다. 

※ 레코드 : 기본적인 자료 구조로 데이터베이스나 스프레드시트의 레코드는 보통 로우(row)라고 부릅니다.

구조

{
  "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"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

• SON 형식은 자바스크립트 객체와 마찬가지로 key / value가 존재할 수 있으며 key값이나 문자열은 항상 쌍따옴표를 이용하여 표기해야 합니다.
• 객체, 배열 등의 표기를 사용할 수 있습니다.
• 일반 자바스크립트의 객체처럼 원하는 만큼 중첩시켜서 사용할 수도 있습니다.
• JSON형식에서는 null, number, string, array, object, boolean을 사용할 수 있습니다.

타입	설명
Number	JavaScript에서 배정되는 정밀한 부동 소수점 형식입니다.
String	큰 따옴표를 사용한 유니코드입니다.
Boolean	true 또는 false
Array	연속된 값들의 정렬입니다.
Object	정렬되지 않은 key:value 콜렉션입니다.
null	비어있음을 나타냅니다.

형식

1. name-value형식의 쌍

• 여러가지 언어들에서 object등으로 실현되어 있습니다.
• { key : value }

{
  "firstName": "Kwon",
  "lastName": "YoungJae",
  "email": "kyoje11@gmail.com"
}

2. 값들의 순서화된 리스트 형식

• 여러가지 언어들에서 배열(Array) 등으로 되었습니다.
• { key : [value1, value2, ...] }

{
  "firstName": "Kwon",
  "lastName": "YoungJae",
  "email": "kyoje11@gmail.com",
  "hobby": ["puzzles","swimming"] // 값들의 순서화된 리스트 형식
}

문제점

AJAX 는 단순히 데이터만이 아니라 JavaScript 그 자체도 전달할 수 있다.

☞ JSON 데이터라고 해서 받았는데 단순 데이터가 아니라 JavaScript가 될 수도 있고, 그게 실행 될 수 있다는 것이다. (데이터인 줄 알고 받았는데 악성 스크립트가 될 수 있다.)

 

※ 위와 같은 이유로 받은 내용에서 순수하게 데이터만 추출하기 위한 JSON 관련 라이브러리를 따로 사용하기도 한다.

 

XML 과 JSON 차이점

XML

https://ko.wikipedia.org/wiki/XML

• 데이터 값 양쪽으로 태그가 있다.
  (HTML을 근본으로 했기에 태그라는 것이 없을 수가 없는데, 그 태그를 줄인다 해도 최소한 표현하려면 양쪽에 몇글자씩이 있어야 한다.)

JSON

• 태그로 표현하기 보다는 중괄호({}) 같은 형식으로 하고, 값을 ','로 나열하기에 그 표현이 간단하다.