한빛출판네트워크

제공 : 한빛 네트워크
저자 : Jesse Liberty, Dan Hurwitz
역자 : 이대엽
원문 : The Three Faces of ASP.NET AJAX

새로운 Microsoft ASP.NET AJAX 웹 개발 프레임워크는(이 기사의 나머지 부분에서는 간단하게 AJAX라고 하겠다) 그 안에 내재된 특성 때문에 신화에 나오는 3가지 얼굴을 가진 그림과 유사한데, 즉 하나는 친근하지만 엄숙하며, 또 하나는 쾌활하며, 그리고 나머지 하나는 대부분의 ASP.NET 개발자들을 다소 놀래켜 주기 때문이다.

첫 번째로 살펴볼 ASP.NET AJAX의 면모는 친근한 ASP.NET 스타일의 AJAX인데 이것은 마치 여러분이 표준 ASP.NET 서버 컨트롤을 추가했던 것처럼 자바스크립트나 문서 객체 모델(DOM; Document Object Model), DHTML, 혹은 호스트와의 비동기 통신(Asynchronous communication)과 같은 것들에 대해 이해해야 할 필요 없이 매우 빠르고 간편하게 AJAX 컨트롤을 클라이언트 측에 추가할 수 있도록 해준다. 멋지지 않은가? 필자는 AJAX의 그러한 면이 아주 마음에 드는데 이렇게 경이롭고, 사랑스럽고, 아름다운 ASP.NET 스타일의 면모가 종종 ASP.NET 프로그래머들에게 좀처럼 부각되고 있지 않다는 것에 상당히 불쾌함을 느끼고 있으며 이것이 내가 지난 여름에 이 주제에 대하여 열정적으로 기사를 작성했던 이유이기도 하다.

그런데 여러분이 서버 측이든 클라이언트 측이든 AJAX가 제공해 주는 것 이상의 컨트롤을 필요로 할 때가 있는데 그것이 서버측일 경우 커스텀 컨트롤을 작성하고자 하는 것일 수도 있고, 클라이언트 측일 경우에는 여러분만의 AJAX 익스텐더(extender)을 만들어 AJAX 클라이언트측 컨트롤의 행위를 변경하고자 하는 것일 수도 있다. 이것이 바로 AJAX의 두 번째 면모이며 Microsoft에서는 이러하리라는 것을 예상하고 여러분만의 커스텀 AJAX 익스텐더를 만들 수 있도록 해주고 있다.

마지막으로 가끔씩(여러분이 믿고 있는 것에 비해 훨씬 덜 하긴 하지만) 여러분은 모든 지도와 안내책자를 옆에 끼고 예전에 가보지 못한 곳에 용감하게 발을 내디뎌야 할 때가 있다. 여러분이 자바스크립트나 DHTML 프로그래머라면 이는 식은 죽 먹기일 것이다. 그것은 여러분이 매일매일 하는 일이기 때문에 얼마나 하찮은 일인지 우습게 여길 것이다.

그렇지만 만약 여러분이 우리처럼 몹시도 자바스크립트(불쾌하고, 타입이 불명확하며, C 언어처럼 생겨먹은 불쾌한 언어이면서 코드를 작성해 보기 시작하자마자 여러분을 괴롭힐)를 작성하길 싫어한다면, 여러분은 바닥에다 조심스럽게 부적을 그리고 바로 오른쪽에다 양초를 켠 다음 아라비아의 고대 주문을 외워 AJAX의 세 번째 얼굴, 즉 그 모든 것들을 돌아가도록 만들어줄 주문이 들릴 때 그것에 가까이 붙어 귀를 기울여야 할 것이다.

설치하기

이러한 특성들을 이용해 보려면 여러분은 AJAX를 여러분의 개발 환경에 설치할 필요가 있다. 운 좋게도 이것들을 설치하는 것은 이제 믿기 어려울 만큼 쉬워졌다(더군다나 안전하게). 첫째, 컴퓨터를 한 대 장만한다. 둘째, 비주얼 스튜디오 2005(Visual Studio 2005)를 설치한다(여러분은 Visual Web Developer도 사용할 수 있는데, 이 기사에서 설명된 두 번째 얼굴인 여러분만의 AJAX 컨트롤 익스텐더(AJAX Control Extender)를 작성하는 것이 불가능하다는 점을 제외하고는 무료로 다운로드 할 수 있다).

셋째, 마지막으로 AJAX 소프트웨어를 다운로드 하여 설치한다. AJAX 사이트(http://ajax.asp.net)로 가서 다음 단계들을 완료한다:

1. ASP.NET 2.0 AJAX Extension 1.0 설치 파일을 다운로드 한다. 이 파일의 이름은 ASPAJAXExtSetup.msi이다. 이 파일을 시스템의 아무 폴더에 저장한 다음, 윈도우 탐색기에서 파일을 더블클릭하여 설치 과정을 시작한다. 마법사를 따라서 설치한다.
2. AJAX Control Toolkit을 다운로드하여 PC의 아무 폴더에 저장한다. 이 파일은 zip으로 압축된 파일이다. 여기에는 AjaxControlToolkit.zip and AjaxControlToolkit-NoSource.zip의 두 가지 버전이 있는데, 첫 번째 것은 파일에 포함된 컴포넌트들의 소스코드를 담고 있으며 두 번째 것은 소스코드를 포함하고 있지 않다. 여러분은 프로그래머이므로 어떤 것이 필요한지는 알아야 한다.
3. AJAX Control Toolkit 압축파일을 여러분의 컴퓨터의 아무 폴더에 푼다.
4. 파일(File) 메뉴를 열어 새 웹 사이트(New Web Site…)를 클릭하고 나서 “Visual Studio에 설치되어 있는 템플릿(Visual Studio installed templates)” 아래에 있는 ASP.NET AJAX-Enabled Web Site를 선택하여 ASP.NET AJAX 웹 사이트 템플릿으로부터 새로운 웹 사이트를 생성한다.
5. 도구상자에서 오른쪽 버튼을 클릭하여 탭 추가를 선택한 다음 새 탭의 이름을 “AJAX Control Toolkit”이라고 입력한다.
6. 탭 안에서 오른쪽 버튼을 클릭한 다음 “항목 선택(Choose Items…)”을 선택한다.
7. “도구상자 항목 선택(Choose Toolbox Items)” 대화상자가 나타나면 찾아보기 버튼을 클릭한다. 여러분이 ASP.NET AJAX Control Toolkit 패키지의 압축을 풀어놓은 폴더로 찾아 들어간다. 여러분은 SampleWebSite라는 이름을 가진 폴더를 발견할 수 있는데, 그 안에는 Bin이라는 이름의 폴더도 포함되어 있을 것이다. 그 폴더 내에 포함되어 있는 AJAXControlToolkit.dll을 선택하고 열기 버튼을 누른다. 확인을 클릭하여 도구상자 항목 선택 대화상자를 닫는다.
8. 이제 여러분은 웹 사이트에 포함된 예제 컨트롤을 사용할 수 있게 된다.

만약 여러분이 VS2005를 사용하고 있고 여러분만의 컨트롤 익스텐더를 만들어 보고 싶다면 다음의 추가적인 단계를 완료한다:

1. 여러분이 AJAX Control Toolkit 압축 파일을 풀었던 폴더에서 AjaxControlExtender라는 이름의 폴더를 발견할 수 있을 것이다. 그 폴더 내에 포함되어 있는 AjaxControlExtender.vsi라는 이름의 파일을 더블클릭하여 설치한다.
2. 여러분이 설치하고자 하는 (모두) 템플릿을 선택하고 다음을 클릭한다. “예”를 클릭하여 서명되지 않은 내용을 허락하고 “완료”를 클릭한 다음 닫기를 클릭한다.

사용하기 편한 드래그 앤 드롭 AJAX

AJAX의 사용하기 편한 측면은 드래그 앤 드롭인데, 이것은 마치 여러분이 ASP.NET에서 서버 컨트롤을 여러분의 웹 페이지에 위치시켰던 것처럼 클라이언트측 컨트롤을 여러분의 웹 페이지에 끌어다 놓을 수 있도록 해준다. Visual Studio (혹은 VWD)를 열고 “웹 사이트 만들기(Create Web Site)”를 선택한다. 템플릿으로부터 ASP.NET AJAX-Enabled Web Site를 선택한다. 개발 언어(이 기사에서는 Visual Basic를 이용한다)를 선택하고 하드 드라이브로 이동한 다음 여러분의 새로운 애플리케이션의 이름을 DragAndDropAjax로 입력하고 확인을 클릭한다.

시작해 보자면 여러분은 관리자가 사용자의 이름을 입력할 텍스트 상자(text box)와 삭제(Delete) 버튼(초기 설정은 ‘사용불가(disabled)’로 지정되어 있는)을 가진 간단한 애플리케이션을 작성할 것이다. 관리자가 텍스트 상자에 이름을 입력하면 삭제 버튼이 ‘사용가능(Enabled)’ 상태로 변경될 것이며 삭제 버튼이 눌렸을 때 사용자 이름이 회원 데이터베이스에서 삭제될 것이다(마지막 부분에서는 그렇게 되는 것처럼만 할 것이다).

스크립트 관리자(Script Manager)

비주얼 스튜디오(혹은 VWD)는 여러분의 개발환경이 AJAX-enabled 애플리케이션을 지원하도록 설정할 것이다. 설정과정에는 그림 1에 보여지고 있는 것과 같이 ScriptManager 타입의 객체를 여러분의 default.aspx 파일에 추가하는 것을 포함한다.


[그림 1] 템플릿 마크업에 포함된 스크립트 관리자(확대하려면 클릭하시오)

스크립트 관리자의 역할은 웹 페이지상의 모든 AJAX 컨트롤의 행위(action)를 조정하는 것이다. 이제 다음 컨트롤들을 도구상자에서 페이지로 끌어다 놓자.

컨트롤	ID	텍스트
Label	Label1	Name:
TextBox	Name
Button	Delete	Delete

버튼의 Enabled 속성을 false로 설정한다.

---

만약 이것이 실제 제품 애플리케이션일 경우 입력되는 이름이 시스템상에서 삭제할 수 있는 실제 사용자에 대응되는지에 대한 검증이 이루어진다면 훨씬 더 좋을 것이다. 그러나 예제를 단순하게 유지하기 위해(또한 필자는 굉장히 게으르기 때문에) 그러한 것들은 독자의 몫으로 남겨 놓겠다.

---

소스 보기 화면은 [그림 2]처럼 보여질 것이다.


[그림 2] 디자인 보기에 포함된 텍스트 상자와 삭제 버튼(확대하려면 클릭하시오)

여러분은 텍스트가 입력될 때 삭제 버튼이 사용 가능해지는지 확인해 보고 싶을 것이다. 그렇게 하려면 여러분은 텍스트 상자의 TextChanged 이벤트에 대한 이벤트 핸들러(event handler)를 구현해야 할 것이다. TextChanged는 텍스트 상자의 기본 이벤트이므로 여러분은 디자인 보기로 전환하여 TextBox를 더블클릭하여 이 이벤트 핸들러를 재빨리 생성할 수 있다. IDE는 여러분이 명명했던 컨트롤의 이름(Name)과 이벤트(TextChanged)로 이벤트 핸들러를 생성한 다음 여러분을 Name_TextChanged 이벤트 핸들러 안으로 위치시켜 다음에 나타나 있는 코드를 입력할 수 있는 상태로 만들어줄 것이다:

Protected Sub Name_TextChanged( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles Name.TextChanged

   Delete.Enabled = Name.Text.Length > 0

End Sub

여러분도 알 수 있겠지만 Name 텍스트 상자에 텍스트가 입력될 때 버튼이 사용가능(Enabled) 상태로 바뀐다; 반대로 입력하지 않으면 버튼은 사용불가(Disabled) 상태로 바뀐다. 우리의 다음 목표는 관리자가 삭제 버튼을 클릭했을 때 발생하는 이벤트를 처리하는 것이다. 일반적으로 입력된 이름을 데이터베이스에서 확인한 다음 그 사용자를 데이터베이스에서 삭제한다(아마도 확인을 받은 다음에 그렇게 할 것이다). 일단 당분간은 텍스트 상자의 필드를 비우고 버튼을 사용불가 상태로 되돌려 놓도록 하자.

버튼의 기본 이벤트 핸들러는 Click이므로 여러분은 단순히 버튼을 더블클릭 하기만 하면 이벤트 핸들러가 생성될 것이다. 아래의 코드를 입력하도록 하자:

Protected Sub Delete_Click( _
ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Delete.Click
   Name.Text = String.Empty
   Delete.Enabled = False
End Sub

애플리케이션을 실행시켜 텍스트 상자에 이름을 입력해 본다. 불행히도 버튼은 결코 사용가능 상태로 바뀌지 않을 것이다. 텍스트 상자는 각각의 키 입력이 이루어진 후에 자동적으로 포스트 백(post back)되지는 않는다(이렇게 되어 있으면 귀찮아 질 수도 있는데, 왜냐하면 그것이 엄청난 불편함을 초래할 수도 있기 때문이다!). 디자인 보기로 전환하여 텍스트 상자를 클릭한 다음 속성 창에서 텍스트 상자의 AutoPostBack 속성을 True로 지정하여 그것을 고칠 수 있다. 이제 애플리케이션을 다시 실행해 본다. 텍스트를 입력한 다음 텍스트 상자에서 탭을 눌러 이동한다(강제로 서버로 포스트백 시킨다). 아하! 이제 페이지가 포스트백되어 버튼이 사용 가능한 상태로 바뀐다!

만약 여러분이 버튼을 클릭하면 페이지는 다시 포스트백을 수행하고 텍스트 상자가 비워진 다음 버튼이 사용불가 상태로 바뀐다.

이러한 자그마한 예제에서 전체 페이지를 포스트백하는 것이 불편하다는 것을 알아차리는 것이 어려울 수도 있겠지만 일반적으로 한 페이지에는 이러한 다른 컨트롤들이 여럿 포함되어 있으며 그것들은 업데이트 필요도 없고 여러분의 데이터가 업데이트되었을 때 깜박거릴 필요도 없는 것들이다. 이러한 상황을 실험해 보기 위하여 임시로 다른 두 가지 컨트롤들을 페이지에 추가하여 이러한 컨트롤들에 대한 포스트백이 미치는 영향을 확인해 보도록 하자. 여기에서는 CheckBoxList와 Calendar 컨트롤을 각각 하나씩 추가해 볼 것이다.

여러분이 디자인 보기에 있는지 확인하고 도구상자에서 CheckBoxList를 페이지에다 끌어다 놓는다. 스마트 태그에 있는 “항목 편집(Edit Items)”를 이용하여 항목을 몇 개 목록에 추가한다([그림 3]에 항목을 추가한 예가 나타나 있다). 이번에는 Calendar 컨트롤을 페이지에 끌어다 놓는다. 결과는 [그림 3]과 비슷할 것이다.


[그림 3] 페이지에 항목 추가

예제를 다시 실행시키고 여러분이 페이지를 포스트백 할 때마다 새로운 항목들이 깜박거리는지 지켜보라! 우리는 AJAX 업데이트 패널(AJAX Update Panel)을 이용하여 이러한 깜박거림을 제거할 것이다.

업데이트 패널(Update Panel) 추가하기

디자인 보기에서 도구상자의 AJAX Extensions 섹션으로부터 UpdatePanel 컨트롤을 페이지의 다른 모든 컨트롤들 아래에 끌어다 놓는다. 그런 다음 세 가지 기본 UI 컨트롤들—레이블, 텍스트 상자, 버튼— 모두를 직접 UpdatePanel 안으로 끌어다 놓는다. 대충 [그림 4]처럼 보일 것이다.


[그림 4] 디자인 뷰에서 UpdatePanel 위치시키기

소스 보기로 전환하여 업데이트 패널(아래 코드에서 UpdatePanel1)을 찾아본다.

ContentTemplate을 추가하는 것 외에 레이블, 텍스트상자, 버튼 컨트롤들은 UpdatePanel에 영향을 받지 않는다. 여기서 중요한 점은 AJAX 컨트롤들은 ASP.NET 컨트롤들을 변경하는 것이 아니라 단지 이미 존재하는 ASP.NET 컨트롤들의 마법을 늘려준다는 것뿐이다. 애플리케이션을 실행해 본다. 업데이트 패널은 전체 페이지를 포스트백하는 대신 AutoPostBack을 처리할 것이므로 패널의 내용만 비동기적으로 포스트백되고 페이지의 나머지 부분들은 포스트백 될 수고로움도 덜고 깜박거리지도 않을 것이다. 아.. 훨씬 낫군!

---

현 시점에서는 CheckBoxList와 Calendar 컨트롤을 지워도 상관없으며 그것들은 단순히 업데이트 패널의 효과를 보여줄 목적으로 추가했던 것뿐이다.

---

ConfirmButtonExtender 익스텐더(Extender) 사용하기 AJAX 컨트롤들은 두 개의 패키지를 제공하는데, AJAX 탭에 위치한 다소 개수가 적은 것들과 여러분이 툴킷을 설치할 때 직접 생성했던 AJAX Control Toolkit에 위치한 훨씬 더 개수가 많은 것 두 가지이다. AJAX Control Toolkit에 들어있는 수많은 도구들은 독립형(standalone) 컨트롤이 아니라 익스텐더(extender)이다. 다시 말하자면 그것들은 기존 AJAX 컨트롤들의 기능을 확장한다는 의미이다. 실제로 돌아가는 것을 확인해 보기 위하여 앞에서 만들었던 웹 사이트를 그대로 복사한 ToolkitExtenders라는 이름의 새 웹 사이트를 생성한다.

이번에는 익스텐더를 사용하여 관리자가 정말로, 진짜로 사용자를 삭제하고자 하는지를 확인해 보도록 하겠다. 사용자의 의도를 확인하는 특수한 버튼을 만들거나 심지어 버튼의 Click 이벤트에 코드를 추가하는 것이 아니라 ConfirmButtonExtender를 하나 추가하고 그것의 “대상 컨트롤(target control)”이 삭제 버튼임을 알려주는 클라이언트측 코드를 추가하여 사용자의 결정을 확인할 것이다. 이렇게 하면 서버로 왕복할 필요 없이 사용자의 결정을 확인하는 클라이언트측 코드가 작성될 것이며 따라서 훨씬 더 빠르고 응답성 있는 애플리케이션을 작성할 수 있다.

소스 보기로 가서 UpdatePanel에 들어있는 삭제 버튼에 위치한 다음 ContentTemplate 엘리먼트에 들어있는 새 컨트롤들을 건드리지 않도록 조심해서 AJAX Control Toolkit 탭으로부터 Confirm Button을 삭제 버튼 바로 아래에다 끌어다 놓는다. 여러분의 새 컨트롤은 CC1(혹은 AjaxToolkit이 될 수도 있으며 이것은 여러분의 시스템이 어떻게 설정되어 있느냐에 따라 달라진다)라는 접두사를 가질 것이다. 여러분은 두 가지 변화를 알게 될 것인데, Register 지시자(Register directive)가 페이지의 최상단에 위치한다는 것과, 그리고 만약 여러분이 bin 디렉터리를 펼쳐볼 경우 AJAX Control Toolkit에 관련된 .dll과 .pdb 파일들을 볼 수 있을 것이라는 점이다.

ConfirmButtonExtender가 자동적으로 ID를 할당받긴 하지만 TargetControlID 속성을 여러분이 직접 할당해야 할 것이다. 물론 Intellisense 기능이 도움될 것이다. 여러분은 또한 ConfirmText 속성의 확인 문구를 직접 지정하고자 할 수도 있는데, 그럴 경우 다음의 코드를 이용할 수 있다:

관리자가 삭제 버튼을 클릭하면 그림 5에 나타나 있는 것과 같이 ConfirmButtonExtender가 제어를 획득하고 여러분이 지정했던 확인 문구를 가진 확인 대화상자를 나타나게 할 것이다.


[그림 5] Confirmation Extender(확대하려면 클릭하시오)