ASP.NET AJAX가 궁금해? Part 8 - Microsoft AJAX Library의 특징과 자바스크립트 확장

[웹지니™]

안녕하세요? 웹지니입니다.

ASP.NET AJAX가 궁금해? 8번째 시간! 오늘은 Microsoft AJAX Library의 개략적인 특징을 살펴보고 Microsoft AJAX Library가 Array나 String, Number 등 기본 자바스크립트 객체들을 어떻게 확장하는지에 대해 살펴 보겠습니다.

목차

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를 활용한 비동기 네트워크 프로그래밍

Microsoft AJAX Library의 특징

지금까지의 ASP.NET AJAX 강좌는 UpdatePanel 컨트롤로 대변되는 ASP.NET AJAX의 서버 측 프레임워크를 통해 얻을 수 있는 편의성과 강력한 생산성에 대한 내용이 위주였으며 지난 강좌를 시작으로 ASP.NET AJAX의 클라이언트 측 프레임워크에 대한 이야기를 풀어보고 있습니다.

Microsoft AJAX Library는 ASP.NET AJAX의 클라이언트 스크립트 지원을 위한 프레임워크입니다. 이 프레임워크의 특징은 아래와 같습니다.

1. 완벽한 크로스 브라우저 환경 지원

Microsoft AJAX Library (이하 MSAL)는 크로스 브라우저 환경을 완벽하게 지원합니다. 즉, Windows 운영체제 상에서 실행되는 IE, FireFox, Opera 및 Safari 브라우저를 공식적으로 지원하며 매킨토시 환경에서도 동일한 환경이 지원됩니다.

2. 객체 지향 스크립트 프로그래밍이 가능

MSAL은 자바스크립트를 확장하여 자바스크립트에 객체지향적 특징을 구현했습니다. 예를 들어 여러분은 MSAL을 이용하여 자바스크립트 클래스를 구현하거나 이를 상속하는 파생 클래스를 생성하거나 또는 인터페이스를 설계하고 이 인터페이스를 구현하는 클래스를 별도로 구현하는 등 지금까지 C#이나 VB.NET을 이용하여 진행했던 객체 지향 프로그래밍의 특징을 자바스크립트에서도 고스란히 재현할 수 있습니다.

3. ASP.NET 응용 프로그램 서비스와의 연동

MSAL은 ASP.NET의 응용 프로그램 서비스인 Membership 서비스 및 Profile 서비스와의 연동이 가능합니다. 즉, 클라이언트 스크립트를 통해 Membership 서비스에 기반한 로그인이나 로그아웃, Profile 서비스에 기반한 사용자 프로필 정도의 Load 및 Save가 가능합니다.

4. 클라이언트 컴포넌트 지원

MSAL은 클라이언트 스크립트에서 활용 가능한 다양한 컨트롤 및 컴포넌트를 제공합니다. 예를 들어 타이머 컴포넌트를 이용하면 일정 간격으로 특정 작업을 반복하는 코드를 손쉽게 개발할 수 있습니다. 또한 2번 항목의 OOP적 특징을 이용하여 직접 이런 컨트롤이나 컴포넌트를 구현하는 것도 가능합니다.

Microsoft AJAX Library의 구성

MSAL은 자바스크립트로 구현된 프레임워크이며 총 3개의 자바스크립트 파일로 구현되어 있습니다. 이 파일들은 C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 폴더에 위치하고 있으며 아래와 같은 역할을 담당합니다.

1. MicrosoftAjax.js / MicrosoftAjax.Debug.js

이 파일은 Microsoft AJAX Library의 거의 모든 기능이 구현된 자바스크립트 파일입니다. ScriptManager 컨트롤을 웹 폼 페이지에 추가하면 기본적으로 추가되는 스크립트 파일 중 하나입니다. 파일명에 debug가 붙은 파일은 이 파일의 디버그 버전 스크립트로 우리가 흔히 작성하는 스타일의 자바스크립트가 구현되어 있습니다. Debug가 생략된 파일은 프로젝트를 Release 모드로 컴파일할 때 사용되는 파일로 파일의 크기를 줄이기 위해 공백 및 줄바꿈 문자가 제거되어 있습니다.

2. MicrosoftAjaxTimer.js / MicrosoftAjaxTimer.Debug.js

이 파일은 클라이언트 측 타이머 컨트롤이 구현된 자바스크립트 파일입니다. 파일을 열어보면 Sys.UI._Timer 라는 이름의 객체가 구현되어 있는 것을 볼 수 있으며 기본적으로 ScriptManager 컨트롤에 의해 웹 폼 페이지에 포함되지는 않습니다. 또한 클래스 이름 앞에 언더 스코프 문자(_)가 있는 것으로 미루어볼 때 내부적으로 사용되는 private 클래스로서 구현되어 있음을 알 수 있습니다.

3. MicrosoftAjaxWebForms.js / MicrosoftAjaxWebForms.Debug.js

이 파일에는 웹 폼 페이지가 비동기 요청을 수행하는데 사용하는 PageRequestManager 클라이언트 클래스가 구현되어 있으며 웹 페이지의 클라이언트 측 라이프 사이클을 지원하기 위한 이벤트 매개 변수 클래스들(~EventArgs 클래스들)이 구현되어 있습니다. 이 파일 역시 ScriptManager 컨트롤에 의해 웹 폼 페이지에 기본적으로 포함됩니다.

MSAL을 구성하는 자바스크립트 파일은 위의 세 가지이며 이 중 MicrosoftAjax.js 파일과 MicrosoftAjaxWebForms.js 파일이 MSAL의 핵심 구현 파일이므로 시간이 되시면 이 파일들의 내용을 한 번 살펴보시는 것이 좋을 것입니다.

Micrsoft AJAX Library의 자바스크립트 확장

MSAL은 기본적으로 자바스크립트의 기본 객체를 확장하여 사용합니다. 예를 들면 자바스크립트의 기본 내장 객체인 Array 객체에 CLR과 유사한 add 및 addRange 등의 메서드가 추가되어 있습니다. MSAL이 궁극적으로 추구하는 것은 자바스크립트 코드를 마치 C#이나 VB.NET과 동일하게 사용할 수 있도록 하는 것입니다. 그러면 MSAL이 자바스크립트에 어떤 마법을 부렸는지 한 번 살펴볼까요?

1. 타입 시스템의 정의

기본적으로 자바스크립트는 객체에 대한 타입이 정의되어 있지 않습니다. 물론 String이나 Number, Date 객체 등은 기본적으로 typeof 연산자를 통해 해당 객체의 타입을 알아낼 수 있으나 개발자가 직접 구현한 객체는 단순히 Object로 표시됩니다. 따라서 특정 객체의 명확한 타입을 알아낼 수는 없습니다.

MSAL은 이런 자바스크립트의 단점을 극복하기 위해 자바스크립트의 모든 객체에 타입 정보를 추가했습니다. 예를 들어 Sys.UI.DomElement 클래스의 타입 정보는 "Sys.UI.DomElement"라는 문자열로 표현됩니다. 이를 통해 각 객체의 명확한 타입을 알아낼 수 있으며 이를 이용하여 간단한 수준의 리플렉션 코드를 작성할 수도 있습니다.

2. 자바스크립트 기본 객체의 확장

MSAL은 자바스크립트의 기본 객체 (String, Object, Number, Array, Date, Function, Boolean, Error 등)에 확장 메서드를 추가로 구현해 두었습니다. 각 객체별로 추가된 메서드 및 그에 대한 설명은 아래와 같습니다. 참고로 이 강좌에서는 MSAL이 새롭게 추가한 메서드를 소개만 할 뿐이며 자세한 사용법은 MSAL 도움말 웹사이트 (http://ajax.asp.net/docs)를 참고 하시기 바랍니다.

2.1 Array 객체에 추가된 메서드

• add 메서드: 배열에 새로운 원소를 추가합니다. 기존의 push 메서드와 동일한 기능을 수행합니다.
• addRange 메서드: 지정된 배열에 다른 배열의 원소들을 모두 추가합니다.
• clear 메서드: 배열 내의 모든 원소를 제거합니다.
• clone 메서드: 현재의 배열과 동일한 원소를 가지는 별도의 배열을 생성하여 리턴합니다.
• contains 메서드: 배열이 지정된 원소를 가지고 있는지를 나타내는 Boolean 값을 리턴합니다.
• dequeue 메서드: 배열의 첫 번째 원소를 리턴하고 배열에서 해당 원소를 제거합니다.
• enqueue 메서드: 배열에 새로운 원소를 추가합니다. 이는 MSAL의 내부에서 사용하는 메서드이며 일반 개발자에게는 add 메서드의 사용을 권장합니다.
• forEach 메서드: 배열의 각 원소에 대해 지정된 함수를 수행합니다.
• indexOf 메서드: 배열에서 지정된 원소의 인덱스를 가져옵니다.
• insert 메서드: 배열의 지정된 위치에 새로운 원소를 삽입합니다.
• parse 메서드: 배열 표현식 문자열을 파싱하여 동일한 배열 객체를 만들어 리턴합니다.
• remove 메서드: 배열에서 지정된 원소를 제거합니다.
• removeAt 메서드: 배열에서 지정된 위치의 원소를 제거합니다.

2.2 Date 객체에 추가된 메서드

• format 메서드: Date 객체가 표시하는 날짜와 시간을 지정된 형식의 문자열로 변환합니다.
• localeFormat 메서드: format 메서드와 동일하지만 현재 시스템의 로캐일을 적용합니다.
• parseLocale 메서드: 특정 로캐일 형식의 날짜 및 시간 문자열을 Date 객체로 변환합니다.
• parseInvarient 메서드: 일반적인 날짜 및 시간 문자열을 Date 객체로 변환합니다.

2.3 Number 객체에 추가된 메서드

• format 메서드: Number 객체의 값을 지정된 형식의 문자열로 변환합니다.
• localeFormat 메서드: Number 객체의 값을 현재 시스템 로케일을 이용하여 문자열로 변환합니다.
• parseLocale 메서드: 지정된 로케일 형식의 숫자 문자열을 Number 객체로 변환합니다.
• parseInvarient 메서드: 로케일이 적용되지 않은 형식의 숫자 문자열을 Number 객체로 변환합니다.

2.4 Object 객체에 추가된 메서드

• getType 메서드: 특정 객체를 문자열로 가져옵니다.
• getTypeName 메서드: 특정 객체의 타입을 표현하는 문자열을 가져옵니다.

2.5 String 객체에 추가된 메서드

• endsWith 메서드: 문자열이  지정된 문자열로 끝나는지를 표시하는 Boolean 값을 리턴합니다.
• format 메서드: C#에서의 String.Format 메서드와 동일한 기능을 수행합니다.
• localeFormat 메서드: 형식 문자열 내에 숫자나 날짜 등에 대해 현재 시스템의 로케일을 적용합니다.
• startsWith 메서드: 문자열이 지정된 문자열로 시작하는지를 표시하는 Boolean 값을 리턴합니다.
• trim, trimEnd, trimStart 메서드: 각각 문자열의 양 끝, 오른쪽 끝, 왼쪽 끝의 공백을 제거합니다.

2.6 Error 개체에 추가된 메서드

• argument 메서드: .NET의 ArgumentException 예외와 동일한 의미를 가지는 에러를 발생시킵니다.
• argumentNull 메서드: .NET의 ArgumentNullException 예외와 동일한 의미를 가지는 에러를 발생시킵니다.
• argumentType 메서드: 매개 변수가 undefined 타입인 경우 사용할 수 있는 에러를 발생시킵니다.
• create 메서드: 새로운 Error 객체를 생성합니다.
• invalidOperation 메서드: .NET의 InvalidOperationException 예외와 동일한 의미를 가지는 에러를 발생시킵니다.
• notImplemented 메서드: .NET의 NotImplementedException 예외와 동일한 의미를 가지는 에러를 발생시킵니다.
• parameterCount 메서드: 매개 변수의 개수가 틀린 경우 사용할 수 있는 에러를 발생시킵니다.
• popStatckFrame 메서드: Error 객체가 에러가 생성된 위치가 아닌 에러가 발생한 위치에 대한 정보를 가지도록 수정합니다.

이상으로 MSAL의 특징과 자바스크립트의 기본 객체를 어떻게 확장하고 있는지에 대해 알아보았습니다. 다음 강좌에서는 MSAL을 이용한 객체 지향 자바스크립트 프로그래밍의 기초에 대해 알아보겠습니다.

다음 이 시간에... ^^

written by 웹지니

Microsoft MVP: Visual Developer - ASP/ASP.NET

http://www.bullog.net

[워나비]

Thank you!

[심재운]

[사자돌이]

감사요!!