JSON

오민영·2021년 7월 13일

json

Web API

목록 보기

2/9

JSON?

Javascript Object Notation의 의미로 데이터를 저장하거나, 전송할 때 가장 많이 사용되는 경량의 data 교환 형식이다. JS에서 객체를 만들 때 사용하는 표현식을 의미한다.

JSON표현식은 사람과 기계 모두 이해하기 쉽고 용량이 작아서 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용된다.

JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌, 단순 데이터를 표시하는 표현 방법일 뿐이다.

JSON특징

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

XML / JSON

데이터를 나타낼 수 있는 방법은 여러가지가 있지만, 대표적인 것은 XML이고, 그 다음 JSON

XML

데이터 값 양쪽으로 tag가 있다. (html을 근본으로 했기에 tag가 있음)

JSON

태그로 표현하지 않았고, 중괄호 ({}) 형식으로 나열되어 있다.

JSON 문법

{
  "employees": [
    {
      "name": "Surim",
      "lastName": "Son"
    },
    {
      "name": "Someone",
      "lastName": "Huh"
    },
    {
      "name": "Someone else",
      "lastName": "Kim"
    } 
  ]
}

JSON 형식은 자바스크립트 객체와 마찬가지로 key - value가 존재할 수 있고, key - value 문자열은 항상 쌍다옴표를 이용하여 표기한다!
객체, 배열 등의 표기를 사용할 수 있다.
일반 자바스크립트 객체처럼 원하는 만큼 중첩시켜서 사용할 수 있다.
JSON 형식에서는 null, number, string, array, object, boolean을 이용할 수 있다.

JSON 형식

name - value 형식의 쌍

{string key : string value} 의 형태

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

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

[value1, value2, ...] 의 형태

  {
    "firstName": "Kwon",
    "lastName": "YoungJae",
    "email": "kyoje11@gmail.com",
    "hobby": ["puzzles","swimming"]
  }

JSON이 가져올 수 있는 데이터

JSON으로 가져올 수 있는 데이터는 해당 자바스크립트가 로드된 서버의 데이터에 한정된다.

예를들어, http://kwz.kr/json.js 에서 불러올 수 있는 데이터는 kwz.kr 서버에 존재하는 것만 불러올 수 있다. (구글 데이터를 불러오거나, 네이버 데이터를 불러오거나 할 수 없다)

JSON은 단순히 데이터 포맷일 뿐이며 그 데이터를 불러오기 위해선 XMLHttpRequest() / Fetch 라는 자바스크립트 함수를 사용해야 하는데, 이 함수가 동일 서버에 대한 것만 지원하기 때문이다.

JSON 형식 텍스트를 Javascript Object로 변환하기

변환
JSON.parse( JSON으로 변환할 문자열 ) : JSON 형식의 텍스트를 자바스크립트 객체로 변환한다.
JSON.stringify( JSON 문자열로 변환할 값 ) : 자바스크립트 객체를 JSON 텍스트로 변환한다.

var jsonText = '{ "name": "Someone else", "lastName": "Kim" }';  // JSON 형식의 문자열
var realObject = JSON.parse(jsonText);
var jsonText2 = JSON.stringify(realObject);

console.log(realObject); // {name: "Someone else", lastName: "Kim"}
console.log(jsonText2); // {"name":"Someone else","lastName":"Kim"}

JSON.parse()

JSON 문자열 구문을 분석하고, 그 결과에서 자바스크립트 값 / 객체를 생성한다.

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

JSON.stringify()

자바스크립트 값 / 객체를 JSON 문자열로 변환한다!

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""