JSON 방식이란?

오늘은 지난 번 Ajax 포스팅에서 잠깐 나왔던 JSON에대한 소개를 할 예정입니다.

 

JSON은 JavaScript ObjectNotation의 약자로, 말 그대로 자바스크립트의 오브젝트를 표기하기 위한 표기법입니다. 

Web에서 데이터를 주고받을 때 사용하는 표현 방법의 일종이지영.

 

JSON 방식에 대한 이해를 위해서는 자바스크립트의 배열에 대한 이해가 필요하므로 소개하고넘어가도록 하겠습니다.

일반적인 프로그래밍 언어, 예를 들어 Java에서는 배열을 기본적으로 이런식으로 정의합니다.

Stringblog = new String [4]; 

blog[0] = “string 배열입니다.”; 

blog [1] = “블로그를 이용하면 좋습니다.”;

또는 배열의선언과 동시에 값을 대입하는 초기화 방식으로

Stringblog = {3, 4, 5, 2, 10};

이러한 형태로도 사용할 수 있는 건다들 아시죠?

JavaScript도 비슷한 형태를 보이고 있습니다. 하지만 JavaScript는 Java에서의 배열과는 다르게, 배열의 길이가 자동으로 늘어나고 

자동으로 줄어드는특성을 가지고 있기 때문에 배열을 선언만 하는 경우에도 길이는 별도로 선언하지 않아도 됩니다.

var price = new Array();

price [0]= 10; 

price [1] = 20;

또는 값의 초기화를 한 번에 할 수도 있지용. 이렇게!

var money = [500, 100];

 

다시 배열이라는 큰 개념에서 얘기하자면, 위에서 보인 두 가지의 예시 모두는 색인배열을 나타내고 있습니다. 

색인배열은 Index( [], 색인 ) 로 접근하게 되는 배열을 얘기하기 때문에 Index가 색인이기 때문에 색인배열이라 부릅니당. 

대표적으로 대부분이 배열이라고알고 계시는 것들이 색인배열이 아닐까 생각합니다.

그러나, 색인배열과 다른 배열이 존재합니다! 이런 경우의 배열을보신적이 있으신가요?

var fruit= {};

fruit[“melon”] = 22000; fruit [“grape”] = 8000; fruit.orange = 5000;

var array= {melon:22000, grape:8000, orange:5000};

 

언뜻 보기에도 색인배열과 느낌이 다르다는것을 알 수 있습니다. 배열 내에 속해있는 값은 

어떠한 기준 값에 연관된 다른 하나의 값을 달고 있는형태를 띄고 있습니다. 

이러한 배열을 연관배열이라하고, 배열은 { Key:Value } 형태의 값을 가진다는것이 특징입니다.

위 예제에서 ‘orange’와 ‘grage’는 사용하는 형태는다르지만, 같은 동작을 수행하는 내용입니다. 

그리고 맨 아랫줄 같이 한 줄로 선언 할 수도 있습니다. 따라서 array와 fruit는똑 같은 내용을 가지게 됩니다.

여기서 주목할 점은 JavaScript의 모든 객체는 연관배열을기초로 구성되어 있습니다. 그렇기 때문에 

document.location 과 document[“location”] 은 똑같은 기능을 수행하게 되는거지영. 아항.

 

연관배열과 색인배열과의 가장 큰 차이점은 length(길이를 반환하는 Method)을 지원하는가? 입니다. 

연관배열은 별도로 길이를 선언하는 부분이 존재하지 않으므로, 길이를검사할 수 있는 로직도 없습니다. 흑 ㅠ_ㅠ 

그러나 색인 배열은 길이를 지정해주기 때문에 length를 지원하여 길이의 값을 불러올 수 있지용.

 

배열에 색인배열과 연관배열, 이 두 종류가 있다면 JavaScript의 배열은 연관배열에 속해있다는내용이었는데요. 

JSON 방식은 JavaScript의 객체를표기하는 방법이므로, 연관배열을 표시하는데 매우 효율적입니다. 

일례로 JSON방식의 표시방법과 text 방식의 표시방법을 비교해드리면 이해에도움이 되실거라 생각됩니다.

위에서 정의한 fruit라는 배열을 이용해보겠습니다.

text방식의 출력 : melon[22000], grape[8000], orange[5000]   (약간 변형된 형태입니당.)

JSON방식의 출력 : { "melon":22000, "grape":8000, "orange":5000 }

JSON의 출력형태가 나온 김에 어떤 식의 규칙이 있는지를 살펴봅시당.

1. JSON은 규칙이 있는! 텍스트 포맷이며 유니코드 인코딩입니다.

2. 앞에서 언급했듯이 {} (중괄호) 안에 정의된 키:값 형태이다.  ==> { key : value }

3. 다수의 객체를 정의하기 위해서 [] (대괄호) 를 사용하며 배열요소는 ,(콤마)로 구분한다.

ex) { "eat" : "cookie", "drink" : [ {"milk" : "white"} , { "coffee" : "black" } ] }

4. JSON으로 숫자, 문자, 참/거짓, null, 객체, 배열등을 표현할 수 있다

실제적인 구조를 보고싶으시다면, 아래의 링크를 타고 슝~

http://json.org/json-ko.html 한글로 설명되어있으며 그림으로도 제공합니다.

지난 포스팅에서 Ajax에서 DataType을 지정해주었던 부분이 있었답니당. 왜 text가 아닌 json방식을사용했을까요?

이는 배열의 값에 접근하는 용이성을높이기 위해서라고 할 수 있습니다.

JavaScript의 모든 객체가 연관배열의 형태를 띄고 있기 때문인건지, Ajax에서 dataType = “json” 방식으로썼을 경우 

eval() 메소드를 사용하지 않아도 key값을바로 불러올 수 있습니다. 

하지만 dateType =“text” 일 경우에는 eval() 메소드를 써야 key값에 쉽게 접근할 수 있답니당. 

eval메소드를 사용하는 경우의 예제를 볼까요?

ex)var array = eval(‘(‘ + msg + ‘)’);

위의 예를 보면 알 수 있듯이 eval 함수로 어떠한 배열의 내용을 가져오고자 할 때는, 가져올내용의 양 쪽을 ( ) 괄호로 둘러 싸야 합니다. 

이한 줄의 차이라면 text도 상관없지 않겠느냐라고 볼 수도 있겠지만, 쓸데없이 메모리 할당을 할 필요는 없으니까요.

JSON은 자바스크립트의 오브젝트를 표시하기 위한 표기법이긴 하지만, 특정 언어나 플랫폼에 구애받지 않고 사용이 가능합니다.

Java, C, C#, C++, ASP, PHP 등에서 모두 JSON 방식의 표기법을 사용할 수 있습니다. 

이러한 JSON은 특히 Ajax와 같은 비동기 방식으로 데이터를 주고 받을 때 사용하면 편리합니당. 

웹서비스로 데이터를 요청하여 받아오고 그것을 클라이언트에서 뿌려줄 때 사용하면 좋고, 

또한 데이터를 보내주는 쪽에서도 몇 개의 반복문만 사용하면 쉽게 휙 보내줄 수 있기 때문이지영!

데이터를 보내는 것이 JSON만으로 가능한 건 아닙니다. 이전에도 여러 방식이 있어왔고 그 중 XML로도 주고 받을 수 있겠지만, 

데이터에 의미를 부여할 수 있다는 데에서는 매우 뛰어나지만, 매번 열고 닫아야 하는 태그 쌍이 존재하는 XML은 데이터의 크기를 

증가시키는 원인이고 이를 파싱할 때의 브라우저 호환성도 신경써야 했다는군요 ㅠ_ㅠ

그리하여! 스크립트 언어에서 XML을 사용하는 것 보다 JSON을 이용하는 것이 더 손쉽고 효율적인방법이기 때문에 

많이들 사용한다고 봅니다~

아직 JSON 표기법에 대해 많이 다뤄보지 않아 미흡한 점이 있으리라 생각됩니다.

하지만 이제 대표적인 웹 개발의 표기법이 되어가고 있는 JSON 방식에 대한 사용이 늘어가는 만큼 소개가 필요할 거라는

생각과 이에 대해 더 공부해둬야겠다는 생각이 들어 정리해봅니다~

2011.03 오혜영 작성