JSON이란 무엇이고 어떻게 쓰이는지 알아보도록 하겠습니다.
1. JSON이란
JSON : JavaScript Object Notation
영어 그대로 해석하자면 자바스트립트를 객체형식으로 표현하는 것입니다.
JSON은 XML보다 빠르고 변환하기도 쉬워 많이 대체해서 쓰고 있습니다. 그리고 적은양의 데이터가 송수신 되므로 모바일쪽에서 쓰기에도 부담이 적습니다.
2. JSON 표기법
JSON의 표기법은 다음과 같습니다.
JSON 데이터는 key/value형식으로 구성되어 있습니다.
알아보기 쉽게 자바스크립트 문장으로 바꾸면 다음과 같습니다.
이중에서 value에는 다음과 같은 형식을 넣을 수 있습니다.
- a number(integer or float)
- a string(큰 따옴표 포함)
- a boolean(true or false)
- an object(중괄호 포함)
- an array(대괄호 포함)
- null
[a number]
integer형이나 float형을 넣을 수 있습니다.
[a string]
string형을 표현하고 싶을 때는 큰 따옴표로 묶어줍니다.
[a boolean]
true 나 false를 넣을 수 있습니다.
[an object]
여러개의 key/value를 입력하여 중괄호로 둘러싸여집니다.
{"firstName" : "길동", "lastName" : "홍"}
[an array]
여러개의 object를 대괄호를 통해 둘러싸여집니다.
{
"employees" : [
{"firstName" : "길동", "lastName" : "홍"},
{"firstName" : "철수", "lastName" : "김"},
{"firstName" : "영순", "lastName" : "박"}
]
}
JSON은 자바스크립트 문법을 사용하기 때문에, JSON으로 작업할 때 별도의 소프트웨어가 필요없습니다.
자바스크립트를 사용해서 다음과 같이 생성할 수 있습니다.
var employees = [
{"firstName" : "길동", "lastName" : "홍"},
{"firstName" : "철수", "lastName" : "김"},
{"firstName" : "영순", "lastName" : "박"}
];
3. JSON 예제
<html>
<header></header>
<body>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</body>
<script type="text/javascript">
var employees = {
"name":"홍길동",
"street":"서울시 서초구 서초동",
"age":33,
"phone":"010-1234-5678"};
document.getElementById("jname").innerHTML=employees.name
document.getElementById("jage").innerHTML=employees.age
document.getElementById("jstreet").innerHTML=employees.street
document.getElementById("jphone").innerHTML=employees.phone
</script>
