프론트 엔드를 하면서 JSON을 사용하는 경우가 무수히 많은데 헷갈릴 때마다 찾아보는 것보다 오늘 내 블로그에 정리하면서 완벽히 내 것으로 만들기 위해서 이렇게 정리해본다.
JSON(JavaScript Object Notation)은 데이터를 주고 받을 수 있는 데이터 형식이다.
JSON이 자바스크립트와 문법과 유사하긴 하지만 자바스크립트도 아니고, 자바스크립트에서만 사용할 수 있는 것도 아니다. 많은 프로그래밍 언어에서 JSON 파싱과 직렬화를 지원한다.
front는 거의 모두 js를 사용하지만 back은 다양한 언어를 사용한다. 이 때문에 json으로 통신을 하면 언어가 달라도 소통을 할 수 있다.
1. JSON에서 사용 가능한 타입
- String
- Number
- boolean
- null
- object
- array→ 일반적으로 객체와 배열이 JSON 데이터 구조에서 최상위 레벨에 있다.
- 사용할 수 없는 것
- function
- date
- undefined
2. 자바스크립트와 다른 점
- String을 감쌀 때, "쌍따옴표"만 유효함.
- 객체의 Property Name도 "쌍따옴표"로 감싸야함.
{ "name": "wecode" }
3. 파싱과 직렬화(Parse & Stringify)
JSON 데이터는 자바스크립트를 이용하여 데이터를 자바스크립트 객체로, 자바스크립트 객체는 JSON 데이터로 손쉽게 변환할 수 있습니다.
서버로 부터 JSON 데이터가 전송되면 이 데이터는 문자열입니다. 이 문자열을 자바스크립트 객체로 변환해야 하는데 이를 객체의 역직렬화 (deserializing) 라고 합니다. 역직렬화는 다른 말로 “문자열을 파싱한다” 라고도 합니다.
역직렬화는 JSON 내장 객체의 parse() 메서드를 이용하며 그 후, 객체의 데이터에 접근해 페이지에서 사용할 HTML을 생성할 수 있습니다.
자바스크립트 객체에 저장된 데이터를 서버로 전송하기 위해서는 객체를 JSON 형식의 문자열로 변경 해야 합니다. 이 과정을 객체의 직렬화 (serializing) 라고 합니다.
직렬화는 stringify() 메서드를 이용하게 됩니다.
JSON.stringify()메서드 : JavaScript Object —> JSON 데이터JSON.parse()메서드 : JSON 데이터 —> JavaScript Object
