안녕하세요? 웹지니입니다.
페이지 메서드를 마지막으로 서버 측 라이브러리에 대한 소개를 마치면서 잠시, 아주 잠시 (ㅡㅡ;;) 중단되었던 ASP.NET AJAX가 궁금해? 강좌를 다시 이어가고 있습니다.
이번 강좌부터는 ASP.NET AJAX의 클라이언트 측 라이브러리인 Microsoft AJAX Library에 대해 소개할 예정입니다. 우선 예상 목차를 잡아보자면...
1. JSON: Microsoft AJAX Library를 이해하기 위한 필수 코스
2. Microsoft AJAX Library의 특징과 자바스크립트 확장
3. Microsoft AJAX Library의 기본 네임스페이스와 클래스 소개 1
4. Microsoft AJAX Library의 기본 네임스페이스와 클래스 소개 2
5. Microsoft AJAX Library를 활용한 객체지향 자바스크립트 프로그래밍 1
6. Microsoft AJAX Library를 활용한 객체지향 자바스크립트 프로그래밍 2
7. Microsoft AJAX Library를 활용한 비동기 네트워크 프로그래밍 1
8. Microsoft AJAX Library를 활용한 비동기 네트워크 프로그래밍 2
이와 같이 대략적인 목차를 설정해 봤습니다. 물론 뭐 저대로 강좌가 진행되면 얼마나 좋겠습니까마는 강좌를 진행해 가는 과정에서 다소나마 목차의 변동이 있을 수 있다는 사실을 미리 밝혀 드립니다. ^^;;
JSON: Microsoft AJAX Library를 이해하기 위한 필수 코스
여러분도 이미 아시다시피 대부분의 Ajax 라이브러리들은 아직 우리에게 익숙하지 않은 이상한(?) 형태의 자바스크립트 코드로 구현되어 있는 경우가 많습니다. 그 이상한 형태의 코드가 바로 JSON 표현식이라는 것은 이제 많은 개발자들이 인지하고 있을 것입니다.
이번 강좌에서는 Microsoft AJAX Library를 이해하기 위한 필수적인 지식인 JSON 표현식에 대해 알아보는 시간을 가져보겠습니다.
JSON, 영화 13일의 금요일의 그 머더라(Murderer)?
조금만 움직여도 땀이 줄줄 흐르는 이맘때쯤이면 TV에서 너도나도 공포 영화를 내보내곤 합니다. 영화 "13일의 금요일"에 보면 "제이슨"이라는 이름의 살인마가 나오지요. 나름 애처로운 과거를 간직한 이 살인마의 이름과 발음상 동일한 JSON, 왠지 이름만으로는 절대 친하고 싶지 않은 녀석이지만 Ajax가 판을 치는 세대를 살아가는 우리들은 어쩔 수 없이 친해져야 하는 녀석이기도 합니다.
JSON은 Javascript Object Notation의 약자로 한글로 풀어보면 "자바스크립트 객체 표현식" 정도로 해석할 수 있겠습니다. 이름에서 알 수 있듯이 자바스크립트 객체를 표현하기 위한 하나의 문법인 셈이지요. JSON 표현식은 Duglas Crockford라는 개발자가 넷스케이프에 제안하여 채택된 문법으로 사실은 매우 오래전부터 자바스크립트에서 제공되던 표현식입니다. Ajax 덕분에 뒤늦게 빛을 보게 된 셈이지요.
일반적으로 여러분은 지금까지 자바스크립트에서 객체를 구현하기 위해 아래와 유사한 코드를 사용했을 것입니다.
예제 1: 전통적인 자바스크립트 객체 표현식
function JsObject() {
this.property1 = 0;
this.property2 = "Hello!";
this.method1 = function( ) {
}
this.method2 = function( ) {
}
}
위의 예제 코드는 여러분에게 이미 상당히 익숙하지요? 물론 자바스크립트를 단지 함수 수준에서만 활용한 정도에 그친 개발자들도 있기 때문에 위의 예제 코드마저 생소한 분이 계실지도 모르겠습니다만 어쨌든 위의 예제는 property1과 property2라는 필드와 method1, method2라는 메서드를 가진 JsObject라는 이름의 객체를 정의하는 코드입니다.
위의 예제에서 구현된 객체를 사용하는 코드는 어떤가요? 대략 아래와 같을 것입니다.
var myObj = new JsObject();
alert(myObj.property1);
예, 대략 이와 같이 사용했었지요. 위의 예제가 무슨 문제가 있느냐? 그렇지는 않습니다. 다만 JSON 표현식을 이용하면 조금 더 간단하게 이와 동일한 객체를 표현할 수 있다는 것이지요. 그렇다면 JSON 표현식으로는 이 객체를 어떻게 표현하는지 한 번 살펴볼까요?
예제 2: JSON 객체 표현식
var JsObject = {
property1: 0,
property2: "Hello",
method1: function( ) {
},
method2: function( ) {
}
}
어떤가요? 앞서 예제 1의 코드에 비하면 조금, 아~~~주 조금 간단해졌지요? 하지만 이 때문에 JSON 표현식을 "별 것 아닌" 것으로 치부해 버리면 안됩니다. 왜냐하면 JSON 표현식은 많은 장점을 가지고 있기 때문이지요.
JSON 표현식을 굳이 써야 하는 이유는 뭔가요?
언뜻 보기에 JSON 표현식을 써야 하는 이유를 잘 알 수가 없습니다. 대체 왜 JSON 표현식을 이해하고 사용해야 할까요? 또 왜 많은 Ajax 라이브러리들이 JSON 표현식을 고집할까요? (쓸데없이 말야 쯧...ㅡㅡ;;) 제 나름대로 그 이유를 아래와 같이 정리해 봤습니다.
1. XML에 비해 간편하게 데이터 교환이 가능하다.
Ajax가 Asynchronous Javascript And Xml의 약자임은 이제 다들 알고 계실 것입니다. 여기서 XML의 역할이 바로 데이터 교환 수단으로서의 역할이었지요. Jess James Garett의 에세이를 보시면 아시겠지만 Ajax 웹 응용 프로그램에서 서버와 클라이언트 사이의 데이터 교환을 XML이 담당하고 있습니다. 그렇다면 대략 아래와 같은 형식이겠군요.
예제 3: Ajax에서 데이터 교환 수단으로서의 XML의 활용 예시
<user>
<id>webgenie</id>
<age>100</age>
<gender>M</gender>
</user>
그러면 이와 동일한 표현을 JSON 형식으로 바꿔보겠습니다.
var JsonObject = {
id: "webgenie",
age: 100,
gender: "M"
}
이와 같이 표현할 수 있겠네요. 자, 어떤 차이가 있을까요? 우선 눈으로 확인하기에도 JSON 표현식을 위한 문자열의 크기가 훨씬 적다는 것을 알 수 있습니다. 따라서 서버 측의 응답으로 XML을 사용하는 것보다 JSON 표현식을 사용하는 것이 네트워크 대역폭 측면에서 조금 더 유리하겠지요? 예제의 JsonObject 객체의 멤버에 액세스하는 방법은 아래와 같습니다.
alert(JsonObject.id); // "webgenie"가 출력됩니다.
2. XML에 비해 사용이 편리하다.
앞서 1번 항목의 연장선상에서 생각해 보면 서버의 응답으로 XML을 사용하는 것보다는 JSON 표현식을 사용하는 것이 더 편리할 것입니다. 왜 그런지 살펴볼까요? 우선 XML을 응답 데이터 로 전달하면 클라이언트 측, 즉 자바스크립트에서는 XMLHttpRequest 객체의 responseXml 속성을 이용하여 IXMLDomDocument 인터페이스를 조작하는 코드를 작성해야 합니다.
반면 JSON 표현식을 사용할 경우 아래와 같이 responseText 속성에 전달된 응답 데이터를 eval 함수를 이용하여 간단하게 자바스크립트 객체로 변환할 수 있습니다.
var user = eval("(" + xmlHttpReqObject.responseText + ")");
이렇게 하면 아래와 같이 user 객체를 사용할 수 있습니다.
alert(user.id); // "webgenie"가 출력됩니다.
언뜻 보기에도 상당히 쉬워 보입니다. 이 외에도 몇 가지 장점이 있지만 아마도 가장 큰 장점은 이 두 가지가 아닌가 생각이 됩니다. 그러면 JSON 표현식에 대해 본격적으로 알아볼까요?
JSON 표현식 살펴보기
앞서 살펴본 것과 같이 JSON 표현식은 중괄호( {와 } )로 객체를 표현하며 콤마를 이용하여 멤버를 구분합니다. 또한 멤버와 값 사이는 콜론(:)으로 구분합니다. 즉 대략 아래와 같은 형식을 가집니다.
{ member1: value1 [, member2: value2 [, member3: value3]]] }
물론 앞서 예제에서 볼 수 있듯이 멤버는 일반적인 자바스크립트의 내장 객체 (Number, String 등) 뿐만 아니라 함수도 멤버가 될 수 있습니다.
{
function1: function() {
},
function2: function(param1) {
}
}
당연한 이야기겠지만 자바스크립트의 내장 객체를 멤버로 가질 수 있으므로 배열 역시 JSON 객체의 멤버가 될 수 있습니다.
{
numericArrayMember: [1, 2, 3],
stringArrayMember: ["1", "2", "3"]
}
그렇다면 특정 객체의 배열도 가능할까요? 물론 가능합니다.
{
objectArrayMember: [
{ prop1: value1 },
{ prop1: value2 },
{ prop1: value3 }
],
dateMember: new Date()
}
예제에서 보듯이 객체의 배열은 물론 new 연산자를 이용하여 새로운 객체의 인스턴스를 멤버에 할당할 수도 있습니다. 이상의 내용으로 미루어 볼 때 JSON 객체는 자바스크립트에서 사용 가능한 모든 객체를 간단하게 하나의 객체로 그룹화할 수 있다는 장점이 있습니다. 또한 이를 잘 활용한다면 데이터베이스가 리턴한 결과 데이터 셋을 하나의 JSON 객체로 표현할 수도 있습니다.
지금까지 JSON 표현식에 대해 알아보았습니다. 언급한 내용이 그다지 많지는 않았지만 사실 그만큼 JSON 표현식이 쉽게 사용할 수 있는 것이기에 이번 강좌의 내용만으로도 개략적인 감을 잡는데는 큰 무리가 없을 것 같습니다.
다음 강좌에서는 Microsoft AJAX Library의 특징에 대해 알아보고 기본 자바스크립트 객체들을 어떻게 확장하고 있는지 살펴보도록 하겠습니다.
참고 자료
JSON Official Website: http://www.json.org
