[Javascript] JSON

youngseo·2022년 2월 14일
0

Javascript

목록 보기
12/46
post-thumbnail

JSON

웹이 발전하는데 있어 AJax가 굉장히 큰 영향을 끼치게 되었습니다. 이 JSON또한 마찬가지로 웹 생태계에 큰 영향을 미쳤습니다.

JSON이란?

JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다.

JSON은 속성-값 으로 구분된 자바스크립트와 비슷한 문제의 경량 포맷이라고 할 수 있습니다. 굉장히 보기 편하고 사람도 알아볼 수 있을 만한 문법으로 표기가 되어 있습니다. 즉, 기존에 일반이 읽을 수 있도록 하기 위한 포맷에 가깝다고 할 수 있습니다.

Json.stringify()

일반적인 자바스크립트 객체를 JSON문자열로 반환을 할 수 있도록 합니다. 일반적으로 서버로 데이터를 보낼때 사용을 합니다.

const obj = { x:5, y:6 };
const jsonObj = JSON.stringify({ x: 5, y: 6 });

console.log(obj); // { x: 5, y:6 } 일반적인 객체
console.log(jsonObj);  //{"x":5, "y":6} 완전한 문자열

console.log(typeof obj) //object
console.log(typeof jsonObj) // string

Json.parse()

JSON객체를 JS Object로 변환할 때 Json.Parse를 사용합니다. 일반적으로 서버에서 데이터를 가져올 때 사용을 합니다.

const obj = { x: 5, y: 6 };

const json = JSON.stringify({x: 5, y: 6});
const jsonParseObj = JSON.parse(json);

console.log(typeof obj) // object
console.log(typeof json) //string
console.log(typeof jsonParseObj) //object

정리하기

정리1

프론트엔드 대부분 JavaScript로 개발을 합니다. 만약, JAVA, Python, Ruby, Go 등 백엔드 언어와 소통을 할 때는 JSON을 이용해 소통을 하고 각자 변환을 한다고 생각하면 되겠습니다.

정리2

우리는 HTTP통신을 활용하며 AJax로 통신을 하는데 사용할 수 있는 API에는 HMLHttlRequest와 Fetch API 가 있고 거기서 주고 받는 데이터의 경우 XML이 아니라 JSON을 활용한다고 보면 되겠습니다.

추가

JSON을 JS로 변환해서 데이터를 다룰 수 있으며,요즘은 axios를 많이 이용합니다.

0개의 댓글