HTC의 활용
|
|
강좌 최초 작성일 : 2005년 06월 19일|
강좌 전 태오의 잡담> www.egocube.pe.kr 사이트를 운영하고 있는 송원석 군이 보내준 강좌입니다. 재미있는 자바스크립트, TABLE 태그와 HTCs 의 활용 - 01 대부분의 경우, 조금 과장한다면 거의 모든 종류의 웹 프로그래밍에서 빠지지 않고 사용되는 것 중의 하나가 바로 TABLE 태그로 구성된 표일 것이다. 지금 이 순간에도 전 세계의 웹 프로그래머들 중 상당수는 TABLE 태그를 사용하여 무엇인가를 만들어내고 있는 중이라고 얘기한다고 한들 필자의 오버센스는 아닐 것이라고 믿는다. 마이크로소프트사의 ASP.NET 서버 컨트롤 중 데이터그리드 컨트롤이나 데이터리스트 컨트롤 그리고 리피터 컨트롤을 사용하여 간접적으로 TABLE 태그 관련 작업을 하고 있는 개발자들의 수만 고려해봐도 그 규모는 결코 작은 것이 아닐 터이다. 본문에서는 자바스크립트를 가지고서 바로 이런 TABLE 태그를 다루어 볼텐데 필자로서도 본문에서 논의하고자 하는 내용들이 실무에 얼마나 도움이 될런지는 모르겠다. 솔직하게 고백하건데 본문은 순전히 필자 자신의 프로그래머적인, 그리고 개인적인 재미를 위해서 작성된 글이며 적용 대상 자체도 인터넷 익스플로러만을 감안한 글이다. 즉 본문에서 논의되는 모든 자바스크립트 코드들은 파이어폭스라는 고유 명사로 대표되는 기타 다른 웹 브라우저에서의 동작을 보장하지 않는다. 다음은 TABLE 태그를 사용하여 작성한 너무나도 일반적인 형태의 표이다. 아마도 웹 프로그래머라면 각자 태그 사용법에 관한 취향의 차이는 있을지언정 이런 유형의 TABLE 태그 구성에 어려움을 겪거나 곤란을 느끼시는 분들은 그다지 많지 않을 것이다. 만약 곤란을 느낀다면 그게 더 큰일이 아닐까? 아무튼 본문에서는 표의 세부적인 형태는 그다지 중요하게 논의되지 않으므로 그저 임의의 표가 하나 있다는 정도로만 생각하기 바란다.
그런데 실무에서 작업을 하다보면 난처한 경우를 종종 접하게 된다. 이를테면 화면에 출력하고자 하는 데이터의 수량이 애매모호한 경우가 가장 대표적인 사례로, 요컨데 페이징 처리를 구현하기에는 데이터가 너무 적어서 민망할 지경이고, 반면에 있는 그대로 아무 처리없이 출력해버리자니 그러기에는 데이터가 조금 부담스러운 분량인 경우다. 이런 경우 필자의 기억을 뒤져보면 몇 년 전까지는 IFRAME 태그를 하나 삽입하고 별도의 페이지에 TABLE 태그를 출력한 다음 페이지를 그 IFRAME 태그에 연결하여 IFRAME 태그에서 자체적으로 구현되는 스크롤바 특성을 이용하여 처리를 하기도 했었지만, 물리적으로 페이지를 하나 더 만들어야만 된다는 번거러움과 부모 페이지와의 연동 불편 등을 이유로 최근에는 거의 사용되지 않고 있으며, 그 대안으로 근래에는 케스케이딩 스타일시트 (Cascading Sytle Sheet) 를 사용하여 비교적 간단하게 처리하는 방법이 매우 보편적으로 사용되고 있다. 이렇게 케스케이딩 스타일시트를 이용하면 TABLE 태그의 출력 결과가 다음과 같이 렌더링된다.
무엇보다도 렌더링 결과 자체가 매우 세련되었으며 개발자의 입장에서는 그 결과를 얻어내기 위해 요구되어지는 노력의 수준이 다른 방법과 비교했을 때 매우 적다. 꽤나 매력적인 방법이라고 평가할 수 있는데, 위와 같은 결과를 얻기 위해서 개발자가 해주어야 할 일은 단지 DIV 태그를 하나 추가하고 style 속성에 적당한 값들을 채워넣는 것 뿐이다. 다음은 실제로 위와 같은 결과를 얻어내기 위해서 필자가 사용한 HTML 태그 코드 블럭의 전부이다.
기본적인 구현 원리 자체는 매우 간단하다. 즉 TABLE 태그를 하나 더 추가하여 원본 표의 타이틀 부분만을 그대로 복사하고 동일한 크기와 모양으로 구성한다. 그리고 케스케이딩 스타일시트를 적절히 사용하여 복사본에 해당하는 표, 즉 타이틀만 존재하는 TABLE 태그가 위쪽에 위치하도록 동일한 좌표에 두 표가 정확하게 겹치도록 구성해 놓고 스크롤바가 이동할 때마다 자바스크립트를 이용하여 스크롤바가 이동한 좌표만큼씩만 복사본 표의 위치를 조절해주는 것이다. 그러면 지금부터 이 작업을 한 단계씩 따라해보도록 하겠다. 단순하게 스크롤바가 추가된 상태에서부터 다시 시작해보자. 표의 본래 모습은 다음과 같았으며, 이미 알고 있는 바와 같이 현재 상태에서는 스크롤바를 위, 아래로 움직이면 타이틀이 여지없이 가려져버린다.
이제 원본 표의 타이틀 부분만을 복사한 새로운 TABLE 태그를 하나 생성하여 DIV 태그안에 추가한다. 그저 단순하게 TABLE 태그를 하나 추가하기만 한 상태이므로 다음과 같이 두 개의 타이틀이 존재하는 것처럼 보일 것이다. 자 지금부터 기대하시라! 진짜 재미있는 부분이 이제 본격적으로 시작된다.
먼저 캐스케이딩 스타일시트를 설정하여 타이틀 부분만 가지고 있는 복사본 표를 원본 표의 타이틀 부분과 정확하게 겹쳐지도록 조정해야 한다. 이 때 원본 표의 TABLE 태그와 복사본 표의 TABLE 태그를 혼동하지 않도록 주의하기 바란다. 참고로 본문에서는 캐스케이딩 스타일시트에 관해서는 그다지 깊게 설명하지 않을 것이므로 캐스케이딩 스타일시트에 대한 궁금증들은 관련 서적이나 기타 문서들을 참고하기 바란다. 실제로는 복사본 표의 TABLE 태그에 다음과 같이 style 속성을 추가하고 값을 적절히 설정해주면 된다. 이 설정이 가지고 있는 의미는 해당 TABLE 태그의 좌표 체계를 절대 좌표로 바꾸고 Z 축를 원본 표보다 위쪽으로 설정한 것일 뿐이다. 다만 top 과 left 의 좌표값을 모두 0 으로 설정한다고 해서 해당 태그가 무조건 전체 페이지상의 좌상단을 기준으로 이동되는 것은 아니라는 점에 주의하도록 한다.
이제 자바스크립트에서 사용하기 위한 id 속성을 설정해보도록 한다. 먼저 가장 바깥쪽에 위치한 DIV 태그에는 SAMPLE_DIV 라는 값을, 복사본 표, 즉 타이틀만 존재하는 표의 TABLE 태그에는 SAMPLE_TABLE 이라는 값을 설정한다. 아마 결과적으로는 다음과 비슷한 형태의 태그가 구성될 것이다.
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onscroll.asp 이제 자바스크립트 함수를 하나 작성해야 하는데, 직접 코딩에 들어가기 전에 어떤 작업을 처리해 주어야만 하는지 잠시 생각해보도록 하자. 현재 문제의 핵심은 스크롤바가 아래쪽으로 x 만큼 이동을 하면, 상대적으로 표는 -x 만큼, 즉 절대값 x 만큼 위로 이동을 하게 된다는 점이다. 따라서 복사본 표의 위치를 스크롤바가 이동한 위치와 똑같이 x 만큼 아래쪽으로 조정을 해주면 마치 타이틀이 제자리에 고정되어 있는 것처럼 보이게 된다. 이러한 작업을 처리하는 자바스크립트 함수는 정말 깜짝 놀랄만큼 단순하기 그지 없다.
http://msdn.microsoft.com/workshop/browser/mshtml/reference/ifaces/element2/scrolltop.asp 결국 이 자바스크립트 함수가 처리하는 작업은 스크롤바가 이동한 만큼 복사본 표의 위치를 조절해주는 것 뿐이다. 그리고 그 코드는 우리들이 언제나 일상적으로 처리하던 코드와 별반 다른점이 없다. 마지막으로 이 자바스크립트 함수를 적당한 위치에 선언해주고 다음과 같이 DIV 태그의 onScroll 이벤트 헨들러에 지정해주면 관련된 모든 작업들이 마무리 된다. 자바스크립트 함수에 인자로 this 를 넘기는 부분에 주의하기 바란다.
다만 동일한 작업을 가로축에 대해서 구현하고자 한다면 몇 가지 부분에 있어서 더 많은 고려가 있어야만 한다. 먼저 대부분의 경우 표에 몇 개의 행이 존재하게 될지 미리 알 수가 없다는 점도 감안해야 한다. 그리고 거기에서 조금만 더 깊게 생각해 본다면 가장 좌측열에 출력되는 실제 내용들이 매번 달라지게 된다는 점을 알 수 있을 것이다. 따라서 복사본 표를 만드는 작업이 더 어려워지게 되는 것은 물론이다. 그리고 한 가지 더 짚어봐만 할 부분은 이와 같은 기능들을 구현하는 방법에는 지금 필자가 소개한 방법외에도 실로 다양한 방법들이 존재한다는 점이다. 단적으로 말해서 필자가 추가적으로 알고 있는 방법만도 벌써 두 가지 정도의 다른 방법들이 존재한다. 그러므로 여러분들의 상상력을 제한하지 말기 바란다. 만약 필자가 본문을 여기에서 끝내버린다면 여러분들은 자바스크립트의 재미를 반정도 밖에는 경험해보지 못하게 될 것이다. 조금만 더 이야기를 진행해보도록 하자. 지금까지 살펴본 작업 자체도 그리 난해하다고는 평가하기 어려운 것들이다. 다만 단호하게 말해서 조금 번거로운 작업임을 부정하지는 못한다. 게다가 한창 프로젝트가 진행중일 때라면 동일한 코드를 몇 번이고 반복해야만 할 것이다. 정말 원치 않는 작업이다. 그렇다면 뭔가 개선의 여지는 없을까? 다행스럽게도 이런 현실을 개선할 수 있는 방법이 존재한다. 그것도 아주 강력한 방법으로. 이제 지금까지의 작업들을 HTCs (HTML Components) 로 구현해보도록 하겠다. 그러나 본문에서는 HTCs 가 무엇인지, 실제로 어떻게 구현하는 것인지와 같은 근본적인 부분들에 대해서는 다루지 않을 것이다. 이러한 부분들에 대해서는 이어질 다음 글에서 논의할 예정이며 본문에서는 일단 그 강력함을 느껴보는 일에만 집중하도록 한다. 다음의 표를 살펴보도록 하자. 지금까지 설명한 내용들의 결과와 조금도 틀리지 않다는 것을 알 수 있을 것이다. 그러나 놀랍게도 그 내부가 이전까지와는 전혀 틀린 방식으로 구현되어 있다.
본문의 소스를 살펴보면 어렵지 않게 알 수 있겠지만 명시적으로 추가된 DIV 태그도 존재하지 않을뿐만 아니라 복사본 표를 구성하는 TABLE 태그도 존재하지 않는다. 심지어는 onScroll 이벤트를 처리해주는 자바스크립트 함수도 찾아볼 수가 없을 것이다. 물론 내부적으로는 이러한 요소들이 어딘가에 존재하고 있는 것이 사실이지만 일단 표면적으로는 다음의 한 문장이 지금까지 우리가 논의해왔던 그 모든 작업들을 전담하여 일괄로 처리해 버리게 된다. 너무나도 간단해서 지금까지 얘기해온 많은 이야기들이 허탈하게 느껴질 지경이다.
다음의 두 파일이 바로 위의 사례에서 사용된 HTCs 파일들이다. 두 개의 파일이 내부적으로 모두 사용되므로 모두 다운로드 받아서 각자 살펴보기 바란다. 현실적으로 개선의 여지가 많은 코드이긴 하지만 HTCs 가 대략 어떠한 형태로 구성되는지를 살펴보기에는 충분할 것이라고 생각한다. 테이블의 폭이나 높이를 인자로 전달받아 적용하거나 타이틀에 해당하는 TR 태그의 갯수를 가변적으로 설정하는 등의 여러가지 확장을 생각해 볼 수가 있을 것이다. 각자 이러한 기능들을 직접 구현해보기 바란다. 필자 스스로도 만들어 놓고서는 마음에 들지 않아서 투덜대고 있는 코드들이므로 마음놓고 여러분들이 원하는 대로 바꿔버려도 좋다. TableScroll.htc (2.27k), AttachScrollEH.htc (0.6k) 이처럼 업무상 요구되어지는 특정 작업을 처리하는 HTCs 파일이 일단 하나 작성되고 나면 그 다음부터는 해당 기능을 필요로 하는 HTML 태그에 적절한 캐스케이딩 스타일시트를 설정해주기만 하면 똑같은 코드를 여러차례 반복할 필요없이 모든 작업이 종결된다. 따라서 HTCs 파일에 자바스크립트로 구현되어진 프로그램의 완성도가 높으면 높을수록 다양한 패턴에 대응이 가능해지며, 해당 HTCs 파일 하나만 수정하면 그 결과가 모든 부분에 반영되어진다. 게다가 몇 번이고 반복하여 사용할 수 있다. 마치 다음과 같이 말이다.
그렇지만 매우 안타깝게도 HTCs 가 모든 웹 브라우저에서 동작하는 것은 아니므로 그 도입 여부는 신중하게 결정되어야만 한다. 무엇보다도 HTCs 는 인터넷 익스플로러 5.5 에서 처음 도입된 기술이다. 따라서 같은 인터넷 익스플로러라고 하더라도 그 이전의 버전에서는 사용이 불가능하다. 그러나 기업체 내부에서와 같이 임의의 제한된 구성원들에게만 서비스를 제공하는 웹 기반의 시스템들에서라면 상당히 매력적인 모습으로 다가올 수 있을 것이다. 그리고 HTCs 가 아직까지는 그다지 널리 알려지지는 않은 기술이어서 처음 접하는 개발자들이 참고할 만한 사례나 레퍼런스가 많이 부족한 편이라는 점도 아쉽다. 필자의 경우 HTCs 를 처음 접하게 된 계기가 바로 태오님의 코드를 통해서였는데 개인적으로 그 편의성에 놀라서 감탄을 했던 기억을 가지고 있다. 어쨌거나 덕분에 필자는 고품질의 코드 샘플을 직접 눈으로 살펴보면서 천천히 HTCs 를 검토해볼 수 있는 일종의 행운과 같은 기회를 누려봤다고나 할까. 그러나 필자의 이런 빈약한 설명들만으로는 여러분들에게 HTCs 에 대한 강렬한 인상을 심어주기에는 많이 부족하다고 느껴진다. 그래서 실무에 HTCs 가 사용된 사례를 몇 가지 소개하도록 하겠다. 그 첫 번째 사례는 약간 놀라실지도 모르겠지만 MSDN 라이브러리, 바로 그 자체다. 영문 MSDN 라이브러리에 접속해보면 이제는 많이 친숙해진 좌측의 트리뷰를 볼 수 있을 것이다. 놀랍게도 이 트리뷰 전체가 바로 HTCs 이다. 트리뷰를 담고 있는 프레임에서 소스 보기를 해보면 썰렁할 정도로 허전한 HTML 소스를 볼 수 있는데 그저 다음과 같은 간단하기 그지없는 네 줄의 태그가 BODY 태그의 내부에 존재하는 태그들의 전부다. 그 결과물의 대단함과 비교해 볼 때 말 그대로 허탈할 지경이다.
개인적으로 필자가 생각하는, HTCs 의 기능을 그야말로 극대화시킬 수 있는 또 하나의 용도는 ASP.NET 사용자 정의 서버 컨트롤, 또는 사용자 지정 서버 컨트롤을 작성하는 경우이다. 한편으로 생각해보면 너무나도 당연한 것이 ASP.NET 서버 컨트롤이 아무리 잘 작성되었다고 하더라도 웹 브라우저단에서 보다 다이나믹하게 실행되기 위해서는 결국 자바스크립트 코드가 개입되어야 한다. 그런데 문제는 기존의 .js 파일만으로는 배포와 그 적용에 있어서, 예를 들자면 이벤트 헨들러를 설정해주는 부분과 같은 면에서는 약간의 아쉬움이 남는다는 점이다. 물론 이 부분은 어느 정도 개인의 성향이 반영될 수 있는 부분이라는 점에는 동의한다. 게다가 인터넷 익스플로러의 하위 버전과 다른 웹 브라우저를 감안하는 경우에는 HTCs 가 그다지 좋은 선택이 아니라는 점도 명확하게 짚고 넘어가기로 하겠다. 그러나 지금 본문의 주제는 HTCs 의 활용 사례를 소개하는 것이므로 현실적인 이 문제에 대한 결정은 여러분들 각자에게 넘기기로 한다. 이미 알고 계시는 분들도 많이 계시겠지만 MSDN 에서 무료로 소스 코드를 다운로드를 받아 컴파일하여 사용이 가능한 ASP.NET 서버 컨트롤 중에 Microsoft® Internet Explorer WebControls 라는 것이 있다. 이 컨트롤들이 제공된지는 상당히 오래됐는데 .NET 프레임워크 1.0 을 기준으로 작성된 컨트롤들이긴 하지만 사용에 그다지 문제가 없고 꽤나 유용한 기능들을 제공하기 때문에 실무에서도 종종 사용되는 것으로 알고 있다. 예를 들어본다면 탭 기능을 구현해주는 TabStrip 컨트롤이라든가 TreeView 컨트롤 같은 재미있는 컨트롤들이 제공되는데 다음의 URL 에서 다운로드 받을 수 있으므로 참고하기 바란다. http://msdn.microsoft.com/archive/en-us/samples/internet/asp_dot_net_servercontrols/webcontrols/default.asp 다운로드 받은 파일을 설치하면 바로 컨트롤들이 설치가 되는 것이 아니라 소스 코드들이 설치되는데 컨트롤들을 사용하기 위해서는 먼저 메뉴얼에 따라서 이 소스 코드들을 컴파일하고 몇 가지 설정을 해줘야만 한다. 그러나 지금 우리들은 컨트롤 자체에 관심을 기울이기 보다는 ASP.NET 서버 컨트롤에서의 HTCs 적용 실례를 살펴봐야만 하므로 소스 코드들이 어떻게 구성되어 있는지만 살펴보기로 하자. 기본값으로 해당 파일들은 C:\Program Files\IE Web Controls 폴더에 설치된다. 그리고 그 하위를 살펴보면 바로 \src\Runtime 폴더에 몇 개의 HTCs 파일들이 존재하는 것을 볼 수 있다. 그 중에 파일 크기가 가장 큰 treeview.htc 의 자바스크립트 코드는 약 4,000 라인에 달한다. 그야말로 어마어마한 자바스크립트 코딩량에 먼저 놀라게 되고 실제로 문제없이 모든 기능들이 작동하는 것을 직접 보게되면 또 한번 놀라게 된다. 그리고 중요한 점은 .js 파일은 관련된 폴더 그 어디에도, 단 하나도 존재하지 않는다는 사실이다. 이처럼 HTCs 는 ASP.NET 서버 컨트롤의 클라이언트측 기능을 효과적으로 구현하기 위해 선택할 수 있는 또 하나의 적절한 장소다. 이제 마지막으로 마이크로소프트에서 제시하고 있는 수 많은 HTCs 관련 샘들들 중에서 흥미로운 몇 가지 것들을 살펴보도록 하자. 아마 상당히 재미있기도 하고 또 한편으로는 놀랍기도 할 것이다. 그리고 또 한 가지 주의해서 살펴봐야 될 부분은 해당 관련 샘플들이 릴리즈된 날짜들이다. 과연 우리 국내 웹 개발자들이 얼마만큼이나 마이크로소프트의 트렌드를 따라가고 있는지, 혹은 그렇지 못한지 스스로 생각해보는 시간이 될 것이다. 다음은 Dave Massy 라는 마이크로소프트의 에반젤리스트가 2001 년 07 월 24 일, DHTML Dude 라는 컬럼에 기고한 내용이다. 필자는 처음 이 문서를 보았을 때 그 충격을 말로 다 설명할 수가 없을 정도였다. http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude07232001.asp 모두 세 가지의 간단한 HTCs 프로그램을 소개하고 있는데, 그 중 첫 번째는 Highlighter 로서 마우스 커서의 이동에 따라 TABLE 태그의 열, 즉 TR 태그들의 색상이 반전된다. 또한 마우스로 특정열을 클릭하면 그 열이 선택되면서 역시 특정 색상으로 반전이 된다. 물론 이 정도 수준의 기능은 일반적인 자바스크립트 기술만으로도 무난하게 구현이 가능한 정도에 불과하다. 그러나 필자가 다시 한 번 강조하고 싶은 것은 그 적용이 매우 간단하고 프로젝트 단위의 개발팀에서 팀 전원으로부터 비교적 동일한 수준의 퀄리티를 별다른 노력 없이도 보장받을 수 있다는 점이다. 아무튼 Highlighter 의 실제 동작을 확인해보려면 다음의 링크를 클릭해보기 바란다. 그리고 이 HTCs 와 관련된 저작권 및 기타 권리는 모두 마이크로소프트사에 있으며 단지 필자는 논의상 편의를 위하여 링크만을 제공하는 것이라는 사실을 다시 한 번 명시하고자 한다. MSDN Sample Page : Highlighter 이 정도는 그저 간단한 몸풀기에 지나지 않는다. 두 번째 HTCs 는 바로 Sorter 라는 것인데, 그 적용 결과로서 어떠한 포스트백이나 서브밋도 일어나지 않지만 TABLE 태그의 내용들이 선택한 컬럼, 즉 TD 태그를 기준으로 실시간 정렬된다! 그리고 여기서 다시 한 번 강조하지만 이 HTCs 들은 2001 년도에 작성된 것이라는 점을 감안하고 내용들을 살펴보기 바란다. 이런 점을 고려해본다면 그야말로 놀랍기만 하다는 것이 사실 솔직한 필자의 심정이다. 샘플 페이지를 열어서 마우스로 TABLE 태그의 헤더들을 클릭해보기 바란다. MSDN Sample Page : Sorter 마지막 세 번째 HTCs 는 더 놀랍다. 바로 Drag 라는 것인데, 그 이름 그대로 TABLE 태그의 헤더 컬럼들을 드래그 & 드롭하여 컬럼들의 순서를 재지정 할 수 있다. 이 정도라면 약간의 기능들을 추가하는 것만으로도 일반 윈도우즈 응용 프로그램의 그리드 컨트롤과 비슷한 수준으로까지 퀄리티를 끌어올리는 것도 불가능하지는 않을 것 같다. 너무 과대평가하는 것이 아니냐고 반문할지도 모르겠지만 마지막 샘플을 보고나면 대부분의 분들이 필자의 생각에 어느 정도까지는 동의하시리라고 믿는다. MSDN Sample Page : Drag 가장 놀라운 마지막 샘플에서는 지금까지 설명한 세 개의 HTCs 를 동시에 적용하고 있다. 게다가 그 방법도 단순하기가 그지없다. 그저 앞에서 살펴본 세 가지 HTCs 를 동시에 설정하는 것만으로도 모든 작업이 마무리 되어진다. 즉 다음과 같은 케스케이딩 스타일시트 설정만으로 일반 개발자는 모든 작업이 끝나는 것이다.
MSDN Sample Page : Together 물론 이 세 가지의 HTCs 를 하나의 HTCs 로 구현할 수도 있으며 실제로 해당 문서의 맨 마지막 부분에서는 그렇게 구현한 샘플을 제시하고 있다. 그러나 필자가 강조하고자 하는 진짜 중요한 점은 이런 기능들 자체가 아니라는 것을 이해하기 바란다. 이렇게 HTCs 로 구현이 가능하다는 얘기는 일반적인 자바스크립트 코드만으로도 얼마든지 동일한 기능의 구현이 가능하다는 것을 의미한다. 그럼에도 불구하고 HTCs 는 이벤트 헨들러 설정 부분과 재사용성면에서 일반적인 자바스크립트를 사용한 구현보다 월등히 뛰어나기 때문에 비로소 그 가치가 돋보이게 된다는 것이다. 만약 위의 세 HTCs 를 일반적인 자바스크립트 코드로 구현했다면 작업의 대상이 되는 TABLE 태그에는 꽤나 많은 양의 이벤트 헨들러가 지정되었을 것이다. 또한 중구난방식으로 여기저기에 코드가 널려있을 터이기 때문에 프로젝트 팀원 개개인의 스킬에 따라서 매번 상당한 퀄리티상의 차이가 나타나게 된다. 그러나 앞에서 본 것처럼 HTCs 를 사용했기 때문에 style 속성에 약간의 설정을 해주는 것만으로도 모든 작업이 끝나게 되고 결과적으로 누가 작업을 하던지 편차없는 동일한 퀄리티의 결과물을 얻게 되는 것이다. 이제 마지막으로 하나의 사례만 더 살펴보고서 본문을 마무리하도록 하겠다. 아마도 여러분들 중에서는 리모트 스트립팅 (Remote Scripting) 이라는 기술을 알고 계시는 분들이 적지 않으실 것으로 생각된다. 리모트 스크립팅은 한 때 상당한 기대를 모았던 기술이었으나 언제부터인가 웬일인지 시들해져서 지금은 그다지 사용되지 않고 있다. 이 기술을 잠시 간단하게 설명하고 넘어가자면 페이지를 리프레쉬하지 않고서도 서버로부터 필요한 정보들을 가져와서 DHTML 적인 기법등을 활용하여 현재 페이지의 일부, 또는 다수의 부분들을 갱신할 수 있게 해주는 기술이다. 생각하기에 따라서는 활용 가능성이 무궁무진한 기술로서 서버측의 비주얼 베이직 스크립트 클래스와 클라이언트 웹 브라우저측의 경량 애플릿 조합으로 동작된다. 현재 마이크로소프트에서는 이러한 리모트 스크립팅의 최신 버전이라고 할 만한 기술을 WebService Behavior 라는 이름으로 제공해주고 있다. 물론 그 기본적인 목적과 활용면에서는 리모트 스크립팅과 그다지 다를바가 없으나 그 세부 구현에 있어서는 많은 부분들이 변화되었다. http://msdn.microsoft.com/workshop/author/webservice/webservice_node_entry.asp 먼저 서버측 비주얼 베이직 스크립트 클래스는 웹 서비스로 대체되었으며 그에 대응하여 클라이언트 웹 브라우저측의 경량 애플릿도 내부적으로 Microsoft.XMLDOM 과 MSXML2.XMLHTTP 를 사용하여 구현된 HTCs 로 대체된 것이다. 물론 실제로도 이 기술을 사용하려면 WebService.htc 를 다운로드 받은 후 개발하고자 하는 웹 서버에 복사하여야 한다. 이 파일에는 자바스크립트를 사용하여 작성된 2,300 여 라인 가량의 코드가 구현되어져 있으며 SOAP 프로토콜을 사용하여 리퀘스트를 전송하고 그 결과를 받아오는 등의 핵심적인 처리들이 그 핵심적인 내용이다. 만약 이러한 코드를 프로젝트 팀원들 각각에게 그 때마다 작성하여 사용하라고 한다면 그 결과를 장담하기가 매우 힘들 것이다. 그러나 HTCs 를 사용하기 때문에 그러한 문제점들이 수월하게 해소되어 진다. 만약 여러분들이 본문을 읽고서 처음으로 리모트 스트립팅이나 WebService Behavior 류의 프로그래밍 기법을 접하게 되었으며 다소라도 흥미를 느끼게 되었다면 참고로 다음의 자료를 다운로드 받아서 천천히 살펴보기 바란다. MSDN : ASP.NET 2.0 스크립트 콜백! 이 자료는 태오님이 작년 12 월경 ASP.NET 2.0 관련 MADN 세미나 내용의 일부로 작성한 문서인데, 프리젠테이션 문서와 약간의 소스 코드를 같이 포함하고 있어서 처음 접하시는 분들에게는 간략한 개요와 앞으로의 전망등을 부담없이 살펴볼 수 있는 좋은 참고 자료가 될 수 있을 것이다. 특히 ASP.NET 2.0 에서의 관련 기법의 변화 등과 같은 부분은 미리 한 번쯤 인지해두고 있을만한 가치가 있다고 생각한다. 宋
|
