2007년 02월 12일
ASP.NET AJAX를 이용한 초간단 비동기 통신의 구현
# Atlas의 등장
사실 NoPD는 AJAX니 WEB 2.0이니 하는 용어들과 Microsoft와의 간극은 꽤나 크다고 생각을 한다. 한참 분위기 무르익은 다음에야 Internet 에서의 다양한 Business에 본격적으로 발을 담그기 시작한 것도 있거니와, 워낙에 다른 Internet Based 기술, 업체들이 먼저 선수를 쳤기 때문이기도 하다.
2005년 이었던가? 이미 Prototype을 비롯한 다양한 사용자 경험을 증대시켜줄 수 있는 스크립트 기반의 프레임 웍(Framework)들이 많이 등장하고 화자되던 시절, 아주 조용히 MSDN 한켠에 자리를 잡기 시작한 이름이 있었으니, 귀엽고 깜찍한 BoA*양의 노래에 등장하는 "아틀란티스"...가 아닌, "아틀라스(Atlas)".
"그거 쵸코바 아니었던가?"라는 우스갯 소리를 할 수도 있는 이름으로 Microsoft는 .NET 기반의 AJAX 기술 프레임 웍을 내놓았다. 하지만 여느 업체를 막론하고 개인 사용자가 .NET 호스팅을 하는 경우가 많지 않은터라, 그냥 "쓸만하다 카더라"라고 전해져만 왔던것이 현실이다.
# 닷넷은 무엇으로 AJAX를 개발하는가?
그렇다면 그동안 ASP.NET 개발자들은 AJAX스러운 웹사이트 개발을 위해서 어떤 도구들을 사용하고 있었을까? 많은 .NET 개발자들은 다른 언어 개발자들과 마찬가지로 앞서 언급한 Prototype, Spry Framework을 비롯한 Javascript 기반의 도구들을 접목시켜 사용해 왔다. 사실 .NET 개발자들의 거의 대부분이 사용하고 있는 Visual Studio는 그 사용의 편리성에서 타 언어의 추종을 불허한다.
물론 최근에는 이클립스등에도 다양한 인텔리센스 기능을 비롯하여 개발 편의성 및 생산성을 높이는 다양한 도구들이 있지만 여전히 벤더종속적이긴 하지만 에브리바디를 만족시켜줄 풀패키지(?)를 한큐에 간편히 제공하는 것은 Visual Studio가 단연 앞서지 않나 하는 생각이 든다.
이같은 편의성은 .NET Framwork 2.0과 Visual Studio 2005 이후에 더욱 가속화 되었는데, 이러한 환경하에서 스크립트 기반의 AJAX 프레임웍을 사용하는 것은 사실 익숙하지도 편안하지도 않았던 것이 사실이다. ATLAS의 경우 너무 오랜시간 베타버전으로 존재하였고, 네임스페이스를 비롯한 몇가지 미완성된 내용들로 인하여 테스트베드 이상의 적용은 다들 꺼려하는 경향이 있었다. 즉, 유일한 편리도구는 왠지모를 불신으로 한걸음 반 뒤에 서있었던 것이다.
# ASP.NET AJAX !
여하튼, 이러한 과정과 역사를 뒤로하고 2007년 1월. 드디어 ASP.NET AJAX가 정식 버전으로 세상에 모습을 드러내고 만다. 이전에 ATLAS로 개발되었던 코드들을 손을 안댈수 없는 문제가 있지만 NoPD처럼 "모든것이 준비되면 시작하리라"라고 외치던 사람들에겐 너무 편안한 도구가 드디어 등장해준 역사적 사실이라 하겠다.
ASP.NET AJAX의 많은 장점중 특히 Visual Studio와 완벽하게 씽크로나이즈 동작을 선보인 다는 것은 인텔리 센스의 지원은 물론이고 Design Time 에서도 아름다운 동작을 보여주는 것과 함께 ASP.NET AJAX가 주는 큰 장점이다. 하지만, 정말 ASP.NET AJAX가 "편하다"라고 할 수 있는 것은 코드 몇줄 넣지 않고 AJAX스럽게 웹페이지를 만들 수 있다는 것이 아닐까 싶다.
# POSTBACK을 Asynchronous POSTBACK으로
ASP.NET의 구동 모델중 가장 독특하면서도 때로는 초보자들로 하여금 어려움을 느끼게 하는 것 중 하나가 "PostBack"이 아닌가 싶다. Postback은 서버쪽으로 데이터를 한번 가지고 갔다가 다시 돌아오는 과정이기 때문에 사용자 경험을 극도의 나락으로 빠뜨리는 주범 중 하나이다.
ASP.NET AJAX를 이용하면 이같은 Postback을 아주... 아주 간결하게 Asynchronous하게 바꿔 줌으로써 기존에 개발되었던 수많은 코드들을 아주 간편하게 AJAX스러운 느낌으로 개선할 수 있게 된다. 이를 응용한 초간단 AJAX 웹페이지를 만들어 보도록 하자.
ASP.NET AJAX를 설치하게 되면, 웹사이트 템플릿으로 "ASP.NET AJAX-Enabled Web Site"가 추가된다. 나중에 설명하겠지만, 기존에 만들어진 웹사이트에 ASP.NET AJAX를 적용하기 위해서는 web.config에 손을 좀 대야 한다. 이같은 설정을 Default로 잡아줌으로써 개발 생산성을 높일 수 있도록 배려한 템플릿이라 보면 되겠다.
도구상자에 AJAX Extensions라는 이름으로 6개의 컨트롤들이 보인다. 우선은 "무작정 따라하기" 스타일로 간편함을 맛보기 위한 것이므로 자세한 설명은 생략하겠다. ScriptManager를 선택하고 Design 화면으로 끌어 놓도록 하자. 그리고나서 UpdateProgress를 화면으로 끌어 놓자.
대충 짐작하겠지만, ScriptManager는 AJAX 컨트롤들에 대한 동작 제어등을 위한 컨트롤이고 (결국 이녀석들도 JavaScript를 통하여 모든 행동을 취한다) UpdatePanel은 이름에서 알 수 있듯이 "비동기 통신을 통하여 업데이트 될 영역" 즉, AJAX 스럽게 표현할 부분을 배치해 주면 되는 것이다. 
이걸로 끝인가? 그렇다. 끝이다. 기존에 ASP.NET으로 코딩하던 방식과의 유일한 차이라면, ScripManager와 UpdatePanel 컨트롤을 추가해 준 것밖에 없다. 실행 화면을 보도록 하자.
평범하기 그지없는 화면과 간단한 드래그 & 드롭, 클릭 몇번으로 비동기 통신이 적용된 웹사이트를 만들어냈다. 내부 아키텍쳐는 우리가 아는 XMLHttpRequest객체를 사용한 것이 맞다. 단지, 동일한 객체의 사용을 얼마나 간편하고 빠르게 할 수 있는 가에 우리는 촛점을 맞춰 볼 필요가 있다.
사실 NoPD는 AJAX니 WEB 2.0이니 하는 용어들과 Microsoft와의 간극은 꽤나 크다고 생각을 한다. 한참 분위기 무르익은 다음에야 Internet 에서의 다양한 Business에 본격적으로 발을 담그기 시작한 것도 있거니와, 워낙에 다른 Internet Based 기술, 업체들이 먼저 선수를 쳤기 때문이기도 하다.
2005년 이었던가? 이미 Prototype을 비롯한 다양한 사용자 경험을 증대시켜줄 수 있는 스크립트 기반의 프레임 웍(Framework)들이 많이 등장하고 화자되던 시절, 아주 조용히 MSDN 한켠에 자리를 잡기 시작한 이름이 있었으니, 귀엽고 깜찍한 BoA*양의 노래에 등장하는 "아틀란티스"...가 아닌, "아틀라스(Atlas)".
"그거 쵸코바 아니었던가?"라는 우스갯 소리를 할 수도 있는 이름으로 Microsoft는 .NET 기반의 AJAX 기술 프레임 웍을 내놓았다. 하지만 여느 업체를 막론하고 개인 사용자가 .NET 호스팅을 하는 경우가 많지 않은터라, 그냥 "쓸만하다 카더라"라고 전해져만 왔던것이 현실이다.
# 닷넷은 무엇으로 AJAX를 개발하는가?
그렇다면 그동안 ASP.NET 개발자들은 AJAX스러운 웹사이트 개발을 위해서 어떤 도구들을 사용하고 있었을까? 많은 .NET 개발자들은 다른 언어 개발자들과 마찬가지로 앞서 언급한 Prototype, Spry Framework을 비롯한 Javascript 기반의 도구들을 접목시켜 사용해 왔다. 사실 .NET 개발자들의 거의 대부분이 사용하고 있는 Visual Studio는 그 사용의 편리성에서 타 언어의 추종을 불허한다.
물론 최근에는 이클립스등에도 다양한 인텔리센스 기능을 비롯하여 개발 편의성 및 생산성을 높이는 다양한 도구들이 있지만 여전히 벤더종속적이긴 하지만 에브리바디를 만족시켜줄 풀패키지(?)를 한큐에 간편히 제공하는 것은 Visual Studio가 단연 앞서지 않나 하는 생각이 든다.
이같은 편의성은 .NET Framwork 2.0과 Visual Studio 2005 이후에 더욱 가속화 되었는데, 이러한 환경하에서 스크립트 기반의 AJAX 프레임웍을 사용하는 것은 사실 익숙하지도 편안하지도 않았던 것이 사실이다. ATLAS의 경우 너무 오랜시간 베타버전으로 존재하였고, 네임스페이스를 비롯한 몇가지 미완성된 내용들로 인하여 테스트베드 이상의 적용은 다들 꺼려하는 경향이 있었다. 즉, 유일한 편리도구는 왠지모를 불신으로 한걸음 반 뒤에 서있었던 것이다.
# ASP.NET AJAX !
여하튼, 이러한 과정과 역사를 뒤로하고 2007년 1월. 드디어 ASP.NET AJAX가 정식 버전으로 세상에 모습을 드러내고 만다. 이전에 ATLAS로 개발되었던 코드들을 손을 안댈수 없는 문제가 있지만 NoPD처럼 "모든것이 준비되면 시작하리라"라고 외치던 사람들에겐 너무 편안한 도구가 드디어 등장해준 역사적 사실이라 하겠다.
ASP.NET AJAX의 많은 장점중 특히 Visual Studio와 완벽하게 씽크로나이즈 동작을 선보인 다는 것은 인텔리 센스의 지원은 물론이고 Design Time 에서도 아름다운 동작을 보여주는 것과 함께 ASP.NET AJAX가 주는 큰 장점이다. 하지만, 정말 ASP.NET AJAX가 "편하다"라고 할 수 있는 것은 코드 몇줄 넣지 않고 AJAX스럽게 웹페이지를 만들 수 있다는 것이 아닐까 싶다.
# POSTBACK을 Asynchronous POSTBACK으로
ASP.NET의 구동 모델중 가장 독특하면서도 때로는 초보자들로 하여금 어려움을 느끼게 하는 것 중 하나가 "PostBack"이 아닌가 싶다. Postback은 서버쪽으로 데이터를 한번 가지고 갔다가 다시 돌아오는 과정이기 때문에 사용자 경험을 극도의 나락으로 빠뜨리는 주범 중 하나이다.
ASP.NET AJAX를 이용하면 이같은 Postback을 아주... 아주 간결하게 Asynchronous하게 바꿔 줌으로써 기존에 개발되었던 수많은 코드들을 아주 간편하게 AJAX스러운 느낌으로 개선할 수 있게 된다. 이를 응용한 초간단 AJAX 웹페이지를 만들어 보도록 하자.
(참고로, 본 포스팅에서는 ASP.NET AJAX가 설치된 상태임을 명심해 두도록 하자. 설치시에 도구상자 등록등의 과정이 필요한데, 어렵지 않은 과정이고 차후 포스팅에서 다시한번 언급하도록 할 예정이다.)
이것저것 설정하기 귀찮으니, GridView와 SqlDataSource를 하나씩 끌어다 놓고 데이터베이스를 연결해 보도록 하겠다. GridView는 페이징 기능이 제공되는 컨트롤로서 기존의 DataGrid를 대체하는 유용한 컨트롤이다. 하지만, 페이징시에 화면의 Flickering이 일어나면서(Postback) 사용자 경험을 나락으로 내모든 반동 분자의 선두주자 이기도 하다.
데이터 소스 연결은 각자 가지고 있는 샘플 Database나 임의로 만든 양이 좀 되는 Table을 사용하도록 하자. 데이터가 뭐든간에 우리는 Postback 없이 웹사이트를 만드는 것이 이번 포스팅의 목적임을 잊지말자.
NoPD는 이 예제를 한번 실행해 보면서 "이정도의 생산성이면 정말 쓸만하겠다"라는 생각을 했다. 하지만 이후의 포스팅들에서 소개할 다양한 컨트롤들과 활용성에 비하자면 빙산의 일각에 불과하지 않나 싶다. 슬슬 ASP.NET AJAX의 세계에 빠져보도록 하자
- NoPD -
이 글과 관련있는 글을 자동검색한 결과입니다 [?]
- Ajax (kor) by 야구선수
- ASP.NET AJAX 1.0 릴리즈 by 플루
- [링크] MSDN 온라인 2007 2월호 中 Cutting Edge: ASP.NET AJAX에 대한 전망 by 브렉스톤
- ASP.NET AJAX : How to start an ASP.NET AJAX? by KAVIN
- Ajax와 WS-Inspection by Yozz
# by | 2007/02/12 20:31 | [IT] .NET Framework | 트랙백(4) | 핑백(1) | 덧글(3)
제목 : ASP.NET AJAX #1 , 일단 설치해보자!
이상으로 ASP.NET AJAX를 사용할 준비를 마쳤다. 손이 근질거리는 사람이라면 이전에 맛배기로 보여줬던 초간단 AJAX 구현 포스팅을 참고하도록 하자.- NoPD -...more
제목 : ASP.NET AJAX #2 , 비동기 통신 레이어..
본격적인 ASP.NET AJAX를 응용해보기 전에, AJAX 그리고 ASP.NET AJAX의 특징에 대해 한번 짚어보는 시간이 필요할 것 같다. 물론 이전부터 이야기한 것 처럼 기반지식을 아무것도 몰라도 ASP.NET AJAX를 사용하는데는 아무런 지장이 없다. 하지만 보다 탄탄한 기초 원리와 기본 지식을 이해함으로써 차후 실전 프로젝트에서 보다 유연한 구현을 할 수 있도록 하는 것도 의미가 있을 것이라 생각된다. (참고: 본 포스팅은......more
제목 : ASP.NET AJAX #3, UpdatePanel..
추가된 서버 컨트롤중 뭐하나 중요하지 않은것이 없겠지만, 그 중 가장 중요한 것은 아마 "UpdatePanel"이 아닐까 싶다. 이름에서 보여지는 것처럼 패널은 패널인데 "비동기 통신을 통하여 업데이트 되는 패널"이라는 추측을 쉽게 할 수 있을 것이다. 이번 아티클에서는 UpdatePanel 컨트롤을 중심으로, 하나의 ASPX 페이지가 구성되는 모습과 UpdatePanel 컨트롤의 동작에 관한 내용들을 살펴보도록 하겠다. ASPX 페이......more
제목 : AJAX 로딩 불릿이 필요하다면~
이미 아시는 분들은 즐겨 이용하시는 웹사이트겠지만 혹시나 모르시는 분들과, 웹사이트 주소를 자주 까먹는 NoPD의 건망증(!) 해소를 위하여 포스팅 해봅니다. (http://ajaxload.info) AJAX 기술을 응용한 웹사이트를 만드실때 개인적으로 가장 큰 고민은 "얼마나 아름다운 비주얼을 보여줄 것인가?" 입니다. (그래봐야 테스트 해보는 선에서 끝나지만 말입니다 ;;) 요즘 뜸한 ASP.NET AJAX 다음회차 강의에서 소개할 U......more
... sentimentalist</a> at 2007/02/12 20:39 # 제목 : <a href="http://nopd.egloos.com/2993924" target="_new">ASP.NET AJAX를 이용한 초간단 비동기 통신..</a># Atlas의 등장 사실 NoPD는 AJAX니 WEB 2.0이니 하는 용어들과 Microsoft와의 간극은 꽤나 크다고 생각을 한다. 한참 분위기 무르익은 다음에야 Internet 에서의 다양한 Business에 ... more
저도 어제 다운받아서 한번 해보았는데.. 정말 좋더군요...
그럼, 선의의 경쟁인가요 ^^;;
좋은 내용 많이 기대하겠습니다~
기억력 꼬라지하고는~
저도 ASP.NET AJAX에 대한 내용을 쪼까 올릴려고 하거든요...
승헌님과 쫌 겹칠것 같고, 워낙 승헌님의 글솜씨가 좋으니 꿀릴것 같은데 ^^;;
그래도 함 해보려고 합니다.
그럼, 서로간에 선의의 경쟁을~
p.s - Ready 2007에서 나누었던 것 생각하고 계신거죠? 저도 계속 생각하고 있는 중입니다.
그 누구도 따라올 수 없다는 말이 있지요~ ^_^
혼자 연습하면서 흘려보내기 아까워서 적는거니까요 흐흣..