-
JSON이란?웹 프로그래밍/FE(Front-End) 2021. 7. 5. 22:52
JSON은 JavaScript Object Naotation의 약어로 말 그대로 번역해 보면 자바스크립트에서의 객체 표기법으로 작성된 텍스트이다.
이러한 JSON은 데이터 저장 및 교환을 위한 개방형 표준 포맷으로 사용되고도 하고 넓은 범위로는 AJAX를 위해 XML을 대체하는 데이터 포맷으로 사용되기도 한다.
자바스크립트 개게 표기법 구문에서 파생된 JSON의 구문은 다음과 같다.
- 데이터는 이름/값(속성-값 쌍 또는 키-값쌍)이다.
- 데이터는 쉼표로 구분되다.
- 중골호는 객체를 유지한다.
- 대괄호는 배열을 유지한다.
JSON에서의 값(value)은 문자열, 숫자, 객체(JSON 객체), 배열, Boolean, null 중 하나이여한다.
JSON 안에 있는 값(value)에 접근하기 위해서는 도트(.) 표기법과 대괄호([ ]) 표기법을 사용하면 된다.
<script> var Json, x, y; Json = {"name":"Ratel", "age":null, "city":"jungle"}; x = Json.name; // 결과: Ratel y = Json["name"]; // 결과: Ratel </script>
도트(.) 표기법과 대괄호([ ]) 표기법을 사용하면 JSON의 값(value)를 수정할 수도 있다.
<script> var Json, x, y; // JSON의 값으로 문자열뿐만 아니라 새로운 객체, 배열도 가능. Json = {"name":"Ratel", "age":null, "cars":["Genesis", "kia", "BMW"], "cities":{"city1":"Seoul", "city2":"Suwon"} }; Json.name = "blog"; // 결과: Json = {"name":"blog",...}; Json[cars][0] = "Benz"; // Json = {..., "cars":["Benz", "kia", "BMW"], ...}; Json.cities["city1"] = "Jeonju"; // Json = {..., "cities":{"city1":"Jeonju", "city2":"Suwon"}}; </script>
JSON의 장점은 복잡한 파싱 및 번역 작업없이 데이터를 자바스크립트 객체로 처리할 수 있다는 것이다.
브라우저와 서버 간에 데이터를 교환할 때 데이터는 텍스트뿐이다.
JSON은 이러한 텍스트의 일종이며 모든 자바스크립트 객체를 JSON으로 변환하여 서버로 보낼 수 있다.
또한, 서버에서 받은 JSON을 자바스크립트 객체로 변환할 수도 있다.
자바스크립트 객체를 JSON으로 변환하여 서버로 보내는 코드를 봐보자.
<script> var Obj = {"name":"Ratel", "hobby":"basketball", "city":"jungle"}; var Json = JSON.stringify(Obj); window.location = "demo_json.php?x="+Json; </script>
이런식으로 JSON.stringify()함수를 통해 자바스크립트 객체를 텍스트(JSON)으로 변환하여 데이터를 보낼 수 있다.
만약, 서버로부터 JSON 형시의 데이터를 받았다면 JSON.parse()를 통해 손쉽게 자바스크립트 객체로 변환하여 데이터를 이용할 수 있다.
JSON의 또 다른 장점은 JSON 형식이 텍스트 전용이라는 것이다.
이것이 왜 장점일까?
텍스트는 모든 프로그래밍 언어에서 데이터 형식으로 읽고 사용할 수 있기 때문에 언어에 독립적일 수 있다.
즉, JSON이 자바스크립트 이외에 어떠한 언어에서도 읽고 쓰는데 문제가 발생하지 않는다.
'웹 프로그래밍 > FE(Front-End)' 카테고리의 다른 글
flex box layout (display : flex ;) (0) 2021.07.08 브라우저 객체(BOM) (0) 2021.07.04 form 태그 파헤치기 (0) 2021.07.01 [에러 수정] Uncaught TypeError: $.ajax is not a function (0) 2021.06.29 JQuery 접해보기 (0) 2021.06.27