JSON이란 무엇인가?

JSON이란 무엇인가?

 

JavaScript Object Notation의 축약어로 데이터를 저장하거나 전송할때 트래픽을 최소화하기 위한

데이터가 들어있는 가벼운 종이 같은 개념이다.

XML이 HTML기반으로 만들어졌듯이,

JS에서 객체 표기법을 기반으로 만들어졌기 때문에 이와 상당히 유사하다.

보통 ajax나 rest api에서 XML , JSON 형식으로 응답 받게 된다.

JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 데이터 전송시 XML을 대체하여 사용되고 있다.

XML과 같이 데이터 포맷일 뿐이며, 단순히 데이터를 표현하는 방법일 뿐이다.

 

JSON 특징

 

서버와 클라이언트간의 교류에서 일반적으로 많이 사용된다.

JS 객체 표기법을 기반으로 만들어졌기 때문에 이와 상당히 유사하다.

이 특징을 이용하여 JSON형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있다.

JS가 아닌 다른 언어로도 쉽게 만들 수 있기때문에, 특정언어에 종속되지 않으며

대부분의 언어에서 JSON포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.

 

JSON 예제

// JSON 객체

{
    "name": "식빵",
    "family": "웰시코기",
    "age": 1,
    "weight": 2.14
}

// JSON 배열

"dog": [
    {"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14},
    {"name": "콩콩", "family": "포메라니안", "age": 3, "weight": 2.5},
    {"name": "젤리", "family": "푸들", "age": 7, "weight": 3.1}
]

객체, 배열등의 표기를 사용할 수 있으며 일반 JS의 객체처럼 원하는 만큼 중첩시켜 사용할 수 있다.

JSON형식에는 null, number, string, array, object, boolean을 사용할 수 있다.

 

JSON 문법

1. name-value 형식의 쌍
2. 값들의 순서화 된 리스트.

 

JSON의 문제점

 

데이터 뿐만아니라, JS 그 자체도 전달 할 수있다.

즉 JSON 데이터라고 해서 받은게 악성 스크립트가 될 수도 있다.

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

 

JSON이 가져올 수 있는 데이터

 

JSON으로 가져올 수 있는 데이터는 해당 JS가 로드된 서버의 데이터에 한정된다.

JSON은 단순히 데이터 Format일 뿐이며 XMLHttpRequest() 라는 Javascript 함수를 사용해야 하는데 이 함수가 동일 서버에 대한 것만 지원하기 때문이다.

 

JSON형식 텍스트를 JS object로 변환하기

 

JSON.parse()

JSON.stringify()

 

const TODOS_KEY = "todos";

let toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos))
}

const savedToDos = localStorage.getItem(TODOS_KEY)

if (savedToDos !== null) {
  const parsedToDos = JSON.parse(savedToDos);
  toDos = parsedToDos;
  parsedToDos.forEach(paintToDo);
}