jQuery로 작업하기, Part 1: 매개체로서의 JQuery: 플러그인을 사용하여 jQuery 함수를 작성하고 확장하기

문서 옵션 PDF - Fits A4 and Letter 299KB (9 pages) Get Adobe® Reader® JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다. 샘플 코드 영어원문  제안 및 의견 피드백

난이도 : 중급

Michael Abernethy, Product Development Manager, Optimal Auctions

원문 게재일 : 2009 년 2 월 17 일
번역 게재일 : 2009 년 6 월 30 일

플러그인 아키텍처를 도입하기로 한 결정에 힘 입어 jQuery의 인기가 높아지고 있습니다. 이 결정으로 인해 수많은 써드파티 개발자들도 원래 라이브러리 함수 외의 다른 jQuery 함수를 작성 및 확장할 수 있게 되었습니다. 그 결과로 웹 애플리케이션에 필요한 거의 모든 유형의 함수를 제공하는 수백 개의 플러그인이 개발되었습니다. 이 기사에서는 이 플러그인 아키텍처를 살펴본 후 jQuery를 사용하여 데스크톱 애플리케이션처럼 작동하는 웹 애플리케이션을 만드는 방법에 대해 설명합니다.

소개

필자가 jQuery JavaScript 라이브러리에 대한 첫 번째 시리즈 기사(참고자료 참조)를 집필한 이후로 지난 6개월 동안 jQuery 분야에서 많은 변화가 있었다. 아마도 이러한 변화 중 jQuery 개발자를 가장 흥분시킨 변화는 Microsoft®가 Visual Studio 제품군에서 jQuery를 사용하기로 결정했다는 점과 현재까지 jQuery가 이 제품군에 유일하게 포함된 JavaScript 라이브러리라는 점일 것이다. 이는 jQuery가 웹 애플리케이션을 위한 뛰어난 JavaScript 라이브러리로서의 입지를 굳히는 데 큰 도움이 될 수 있는 획기적인 지원이다. 업데이트된 Google 트렌드 차트를 통해서도 jQuery의 인기가 높아지고 있다는 것을 확인할 수 있다. 이전 기사에서 다룬 차트에서는 jQuery가 대체 JavaScript 라이브러리와의 격차를 벌리기 시작한 단계를 살펴보았다. 그리고 6개월이 지난 현재 시점에서는 그림 1과 그림 2의 업데이트된 Google 트렌드 차트에서 볼 수 있듯이 그 격차가 더욱 커졌다는 것을 알 수 있다(12월에 나타난 주가 형태의 침체 무시).

지난 번 시리즈에 비해 한층 더 노력을 기울인 5편의 기사로 구성된 이 시리즈에서는 jQuery 작업과 관련된 몇 가지 중급 수준의 주제를 다룬다. 이 시리즈에서는 플러그인 및 플러그인 개발, jQuery UI 패키지, jQuery 위젯 작성과 관련된 고급 주제, Ajax(Asynchronous JavaScript + XML) 기술과 관련된 고급 주제 및 JavaScript 및 기타 라이브러리와 비교한 jQuery의 성능에 대해 설명한다.

이 첫 번째 기사에서는 jQuery에서 사용되는 플러그인 구조에 대해 설명한다. 플러그인은 jQuery가 다른 JavaScript 라이브러리에 비해 훨씬 빠르게 성장하는 데 가장 큰 역할을 한 원동력이다. 써드파티 개발자가 플러그인을 적극적으로 받아들이게 되면서 수백 개의 플러그인이 개발되어 jQuery 기능으로 추가되었다. 이름으로 알 수 있듯이 플러그인은 글자 그대로 jQuery에 "플러그인"되는 위젯 또는 코드 모듈이며 jQuery 코어 다운로드에 빌드되어 있는 함수를 확장한다. 플러그인 커뮤니티에서 수백 개의 플러그인을 만들어서 제공하고 있다. 믿지 않을지도 모르지만 이는 결코 과장이 아니다. 웹 사이트에서 문제가 발생할 때마다 그리고 원하는 위젯이 무엇이든지 상관 없이 jQuery 플러그인 라이브러리에서 아주 근사한 솔루션을 찾을 수 있다. 무엇보다도 모든 플러그인은 무료로 다운로드하여 웹 사이트에서 사용할 수 있다.

플러그인은 사용자 인터페이스 위젯으로만 한정되지 않고 jQuery 구문 확장, 추가 Ajax 함수 및 개발 프로세스 개선에 필요한 창의적인 기능을 포함한 다양한 기능을 포함한다. 무엇보다도 멋진 특징 중 하나는 여러 가지 내장 JavaScript 기능(예: 스레드 기능, setTimeout() 및 setInterval())을 jQuery 구문으로 변환한다는 것이다. 이 특징은 개발자에게 작업 및 유지 관리가 쉬운 완벽한 jQuery 환경을 제공한다.

플러그인

jQuery 플러그인 구조에는 많은 장점이 있다. 첫째, 사용하려는 위젯 및 함수만으로 한정해서 jQuery 코어의 외부에서 사용할 수 있다. 이는 추가 플러그인을 사용할 때마다 다운로드와 트래픽이 추가로 발생하기 때문에 웹 애플리케이션에서 중요한 고려 사항이다. 사용하려는 플러그인만을 사용할 수 있기 때문에 웹 트래픽을 더욱 효과적으로 관리할 수 있다. 두 번째 장점은 jQuery 코어 코드를 신경 쓰지 않고도 써드파티 개발자가 열의를 갖고 고유한 플러그인을 작성하여 흥미로운 위젯을 개발하고 jQuery 함수를 향상시킬 수 있다는 것이다. 따라서 jQuery를 사용하는 모든 사람의 창의적인 노력을 모아서 라이브러리를 확장할 수 있기 때문에 새로운 아이디어와 새로운 위젯이 거의 무제한으로 성장하는 결과를 얻을 수 있다. 이에 반해 폐쇄적인 구조에서는 jQuery 팀에서 각 플러그인을 검토 및 승인해야 하기 때문에 창의적인 개발자의 노력이 jQuery 팀에서 심하게 정체되는 현상이 발생할 수 있기 때문이다. 세 번째 장점은 플러그인을 만든 개발자와 플러그인을 사용하는 개발자 모두 jQuery 팀에서 개발한 이 플러그인 아키텍처를 매우 쉽게 사용할 수 있다는 점이다. 이 장점은 플러그인이 폭발적으로 성장하게 된 원동력이 되었다. 하지만 이 모든 장점의 이면에는 한 가지 부정적인 면이 있다. 그것은 바로 동료들의 검토 외에는 플러그인에 대한 공식적인 테스트 체계가 갖춰져 있지 않다는 사실이다. jQuery 코어에 대해서는 철저한 테스트가 이뤄진 것으로 확신할 수 있지만 플러그인을 사용하기로 결정한 경우에는 해당 플러그인을 테스트한 써드파티를 신뢰해야만 한다. 업무 중심적 웹 애플리케이션의 경우에는 이 단점을 항상 고려해야 한다.

플러그인을 사용하려는 경우에는 JavaScript 파일(jQuery 파일 포함)을 사용할 때와 마찬가지로 페이지에 해당 플러그인을 포함시키기만 하면 된다. 따라서 페이지에서 플러그인을 사용해야 하는 경우 Listing 1에서와 같이 jQuery 바로 뒤에 해당 플러그인을 추가할 수 있다.

		   
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.alphanumeric.plus.js" type="text/javascript"></script>
<script src="jquery.blockUI.js" type="text/javascript"></script>

이 기사에서는 플러그인을 작성하는 방법이나 플러그인의 작동 방법을 자세히 다루지 않는다. 하지만 후속 기사에서 사용자 고유의 플러그인을 작성하여 실제 jQuery 저장소에 배치하는 등의 세부 사항에 대해 설명한다. 이 기사에서는 대신 필자가 좋아하는 몇 가지 플러그인에 대해 설명한다. 이 기사의 목적은 필자가 자주 사용하는 플러그인을 소개하는 동시에 jQuery 플러그인 저장소에 어떤 플러그인들이 있는지 살펴보는 것이다. 이 기사를 통해 플러그인에 대한 관심이 높아져서 모든 플러그인을 직접 찾아볼 수 있기를 바란다.

이제 필자가 좋아하는 플러그인부터 살펴보자.

RightClick, ExtendedClick 및 Wheel

웹 애플리케이션의 가장 큰 목표 중 하나는 사용자에게 실제 데스크탑 애플리케이션에서 작업 중인 것과 같은 "느낌을 주는 것"이다. 여기서 "느낌을 준다"는 말의 의미는 웹 애플리케이션이 최대한 비슷하게 데스크탑 애플리케이션의 모습을 모방한다는 것을 뜻한다. 따라서 일반적으로 데스크탑 애플리케이션의 특정 위치에 도구 모음이 표시되는 경우 웹 애플리케이션에서도 동일한 위치에 도구 모음이 표시되도록 해야 한다. 이렇게 하면 데스크탑 애플리케이션 사용자가 웹 애플리케이션으로 쉽게 옮겨올 수 있기 때문에 웹 애플리케이션의 성공 가능성도 높아진다.

하지만 대부분의 경우 웹 애플리케이션에서 데스크탑 애플리케이션과 밀접하게 일치하지 않는 부분은 마우스 이벤트에 대한 응답이다. 웹 페이지를 마우스로 클릭할 때 웹 애플리케이션이 정상적으로 작동하기 때문에 필자가 무엇을 말하는지 모르는 사람도 있을 것이다. 물론 대부분의 웹 애플리케이션에서는 왼쪽 마우스 클릭이 완벽하게 처리된다. 실제로 웹 사이트에서 왼쪽 마우스 단추만을 사용하는 사용자가 많으며, 이 경우 웹 애플리케이션은 하나의 단추만을 사용하는 Apple 애플리케이션과 비슷하다. 하지만 모든 Windows® 애플리케이션에서는 두 개(심지어는 세 개)의 마우스 단추가 사용된다. 왼쪽 마우스 단추는 명령을 활성화하고 오른쪽 마우스 단추는 옵션을 제공한다. 많은 사용자들이 이러한 사용법에 익숙해져 있다. 그런데 오른쪽 마우스 단추를 무시하는 웹 애플리케이션이 많은 이유는 무엇일까? 더 나아가 웹 애플리케이션에서는 CTRL+클릭 및 Shift+클릭과 마우스 휠까지도 무시한다. 이처럼 많은 마우스 동작을 무시하면서 웹 애플리케이션이 어떻게 데스크탑 애플리케이션을 진정으로 모방할 수 있을까? 진정한 웹 애플리케이션이라면 제공할 수 있는 모든 마우스 기능을 활용할 수 있어야 한다.

GMail과 Yahoo Mail을 비교해 보면 오른쪽 마우스 클릭을 무시하는 웹 애플리케이션과 오른쪽 마우스 클릭을 지원하는 웹 애플리케이션의 차이점과 추가 마우스 단추를 통해 개선할 수 있는 웹 사이트 기능을 확실하게 확인할 수 있다. GMail을 애용하는 사용자에게는 미안한 말이지만 필자의 견해로 이 관점에서는 Yahoo Mail이 한결 낫다. GMail의 경우에는 오른쪽 마우스 클릭이 다른 웹 페이지와 동일한 방식으로 처리된다. 따라서 GMail에서 메시지를 마우스 오른쪽 단추로 클릭하면 "Back", "Inspect Element" 또는 "Select All"과 같은 옵션이 표시된다. 이러한 동작은 메시지 작업에 얼마나 사용될까? 사실 이 웹 페이지에서는 오른쪽 마우스 단추가 별로 사용되지 않는다. 이에 반해 Yahoo Mail에서는 오른쪽 마우스 클릭이 어떻게 처리될까? Yahoo Mail에서 메시지를 마우스 오른쪽 단추로 클릭하면 "Open", "Print", "Reply" 및 "Delete" 옵션이 표시된다. 이러한 옵션은 메일 애플리케이션에서 일반적으로 수행되는 동작이다. 이러한 선택 사항으로 인해 웹 애플리케이션은 데스크탑에서 볼 수 있는 유형의 메일 애플리케이션과 더욱 비슷해진다. (Outlook에서 메시지를 마우스 오른쪽 단추로 클릭해 보고 웹 애플리케이션의 선택 사항과 얼마나 일치한지 확인해 보자.) 그림 3과 그림 4에서는 오른쪽 클릭 옵션의 차이점을 보여 준다.

웹 애플리케이션의 마우스 클릭 문제를 해결해 주는 첫 번째 jQuery 플러그인의 이름은 rightClick 플러그인이다. 이 플러그인은 오른쪽 마우스 클릭, 오른쪽 마우스 아래로 및 오른쪽 마우스 위로 동작을 모두 캡처한다. 마지막으로 이 플러그인은 브라우저 관련 오른쪽 클릭 컨텍스트 메뉴를 해제하는 기능을 제공한다. 따라서 이 메뉴를 해제하면 FireFox에 표시되는 오른쪽 클릭 메뉴(그림 4)가 표시되지 않는다. 또한 이 플러그인을 사용하면 브라우저의 기본 동작과 충돌하지 않는 사용자 정의 오른쪽 클릭 메뉴를 작성할 수 있다.

				
// set up the div that will capture our events
<div id=rightClickSample></div>

// when the right mouse is clicked on this div, increase the width
// by 10 pixels.  Also, do not show the browser-specific pop-up
// menu
// This, of course, should be in the $(document).ready function

$("#rightClickSample").rightClick(function(e){
   $(this).width($(this).width()+10);
});

$("#rightClickSample").noContext();

이제 웹 애플리케이션에서 마우스 기능을 확장할 수 있는 다음 플러그인을 살펴보자. 이 플러그인은 Ctrl, Alt 및 Shift 단추를 캡처하는 기능을 추가한다. 일부 애플리케이션(예: Adobe Photoshop)에서는 이러한 단추를 자주 사용하기 때문에 마우스를 사용할 때보다 이러한 단추를 더 편하게 느끼는 사용자도 있다. 하지만 이러한 단추는 jQuery 코어 코드와 함께 사용하기가 어려우며 사용하더라도 코드를 추가로 작성해야 한다. 이 경우 테스트를 거친 기성 플러그인을 사용하는 것이 좋다.

extendedClick 플러그인은 마우스와 함께 누를 수 있는 다양한 도우미 키의 조합을 나타내는 다양한 함수를 제공한다. 예상대로 이러한 함수에는 ctrlclick(), shiftclick(), altclick(), ctrlaltclick(), ctrlshiftclick(), altshiftclick() 및 ctrlaltshiftclick()이 있다. 하지만 아쉽게도 이러한 함수는 왼쪽 마우스 클릭 단추에만 연결할 수 있기 때문에 오른쪽 클릭 예제에서 보았던 것처럼 마우스의 기능 중 1/2만 사용할 수 있다. 하지만 오른쪽 클릭에 도우미 키를 연결하는 플러그인은 아직 없는 상태이며 필자는 이러한 함수 중 두 개를 병합하여 새 플러그인을 만들어 볼 수 있는 기회를 제공하기 위해 예제 코드를 완성되지 않은 상태로 두었다.

그럼 이제 오른쪽 클릭 예제를 변경하여 Shift+왼쪽 클릭을 누를 때 div가 10픽셀 확장되고 Ctrl+왼쪽 클릭을 누를 때 10픽셀 축소되도록 만들어 보자.

				
// set up the div that will capture our events
<div id=extendedClickSample></div>

// when the left mouse is clicked with the shift key held down,
// grow the div by 10 pixels
$("#extendedClickSample").shiftclick(function(e){
   $(this).width($(this).width()+10);
});
   
// when the left mouse is clicked with the ctrl key held down,
// shrink the div by 10 pixels
$("#extendedClickSample").ctrlclick(function(e){
   $(this).width($(this).width()-10);
});

마지막으로 데스크탑 애플리케이션과 웹 애플리케이션의 차이를 메워주는 플러그인은 마우스 휠을 처리하는 플러그인이다. 대부분의 사용자는 마우스 휠을 사용할 수 있는 웹 사이트를 방문해 본 경험이 없을 것이다(HTML 입력 요소 제외). 그렇다고 해서 애플리케이션에서 마우스 휠을 사용할 수 없다는 뜻은 아니다. 애플리케이션에서 마우스 휠을 사용하는 예로는 사진을 업로드할 수 있는 웹 사이트에서 마우스 휠을 사용하여 확대/축소하는 경우를 들 수 있다. 물론 데스크탑 애플리케이션에서는 이 작업을 수행할 수 있지만 대부분의 웹 애플리케이션에서 이 작업을 수행할 수 있는가? 아마도 그렇지 않을 것이다.

마우스 휠 예제와 동일한 확대/축소 div를 사용하여 마우스 휠을 통해 크기를 제어할 수 있다. 마우스 휠을 위로 이동하면 div가 확대되고 마우스 휠을 아래로 이동하면 div가 축소된다. 그리고 마우스 휠이 없는 경우에는 이 기능이 올바르게 작동하는 것으로 가정할 수 있다.

				
// set up the div that will capture our events
<div id=wheelSample></div>

// attach an event handler for the wheel to this div
// notice that we use the e.delta to determine how many "notches" the wheel
// was moved.  One notch is either 1 (if up), or -1 (if down).  So, as
// a result, we can simply add it to the current width, letting the
// sign of the delta grow or shrink the div.
$("#wheelSample").wheel(function(e){
   $(this).width($(this).width()+10*(e.delta));
});

필자가 생각하기에 이들 세 플러그인은 웹 애플리케이션의 모습을 데스크탑 애플리케이션과 동일하게 만드는 데 매우 중요하다. 이러한 플러그인을 사용하면 일반적인 데스크탑 애플리케이션과 마찬가지로 웹 애플리케이션과 상호 작용할 때도 왼쪽 마우스 클릭으로만 제한되지 않고 마우스와 관련된 모든 상호 작용을 캡처할 수 있다. 또한 향후 수 년 동안에는 기존 데스크탑 애플리케이션을 웹 애플리케이션으로 변환하는 작업을 수행하게 될 개발자들이 점차 늘어날 것이다. 이러한 플러그인을 사용하면 데스크탑에서 사용하던 모든 마우스 상호 작용을 웹에서도 제공되기 때문에 변환 작업을 훨씬 쉽게 수행할 수 있다.

blockUI

blockUI는 모달 대화 상자를 작성하는 기능을 제공하는 여러 플러그인 중 하나이다. 그러나 여기서 한 가지 고려할 점은 JavaScript에도 alert() 및 confirm()과 같이 매우 유용한 모달 대화 상자가 있다는 것이다. 물론 이러한 모달 대화 상자가 개발자에게 매우 유용하고 정말 많은 사용자의 사랑을 받고 있다는 점은 분명하다. 이러한 대화 상자를 사용하면 잘 설계된 웹 사이트라는 느낌을 줄 수 있다. 하지만 이보다 유용한 옵션을 사용할 수도 있다. 즉, 실제로 사용자로부터 정보를 수집할 수도 있고 모달 대화 상자를 웹 애플리케이션에 속한 것처럼 만들 수도 있다. alert/confirm 함수를 좋아하는 개발자라면 다음 섹션을 생략해도 된다.

alert/confirm 함수는 모달 대화 상자와 관련하여 몇 가지 심각한 단점을 가지고 있다. 무엇보다도 이러한 함수는 정보를 표시만 할 수 있을 뿐이고 confirm 함수의 OK 또는 Cancel을 제외한 어떠한 정보도 수집할 수 없다. 대화 상자에 원하는 요소를 추가할 수 있는 유연성 높은 대화 상자 팝업 창 즉, 다른 프로그래밍 언어에서 사용하는 것과 동일한 대화 상자 창이 있다면 이상적일 것이다. 이 문제를 손쉽게 해결하기 위해 필자가 주로 사용하는 BlockUI는 동일한 웹 애플리케이션에서 많은 대화 상자를 처리할 때 매우 유연하게 사용할 수 있다. 이뿐만 아니라 BlockUI는 작업에 사용할 수 있는 매우 다양한 유형의 대화 상자를 제공한다.

이 기사에 포함된 샘플 코드(다운로드 참조)에서는 blockUI를 사용하여 모달 대화 상자를 작성했으며 코드 및 옵션을 자세히 살펴보기 전에 이 코드를 통해 전체적인 모습을 확인할 수 있다.

그림 5에서는 페이지 위에 표시된 모달 대화 상자를 보여 준다. 페이지의 나머지 부분에 대한 입력은 대화 상자 아래에 있는 반투명 레이어에 의해 차단된 상태이다. 즉, 대화 상자 외에는 사용자가 웹 애플리케이션과 상호 작용할 수 없도록 효과적으로 차단되어 있다. 코드에서는 IFrame을 사용하여 이 차단 작업을 수행한다. 그리고 이 기능은 플러그인 작성자가 다양한 모든 브라우저에서 테스트를 통해 올바르게 작동하는 것을 확인했으므로 걱정하지 않아도 된다.

대화 상자를 작성하는 첫 번째 단계는 해당 메시지를 지정하는 것이다. 지정할 수 있는 메시지에는 사용자에게 표시할 텍스트(alert() 함수 복제), HTML, 마크업(굵기, 색상 등)이 지정된 메시지 등이 있다. 하지만 이 플러그인의 최대 장점은 div를 메시지로 제공할 수 있다는 것이다. 이 방법을 사용하면 원하는 레이아웃에 필요한 만큼의 입력, 단추 및 정보를 가진 고유한 대화 상자를 효과적으로 만들 수 있다.

				
// this will create a dialog with our default text,
// effectively replicating the 
// alert() function
$.blockUI({message: "This is a sample dialog"});

// however, we can add any HTML we want to the message, making it look closer
// to our own Web site
// $.blockUI({message: "<h2>Sample Dialog</h2><p style='color:green;'>
              This is our message</p>"});

// perhaps most importantly, we can add a div to the message, allowing
// us to create our own dialog, with the look, feel, message, and input we want
<div id=loginMessage style="display:none;cursor:default;">
      <p><h2>Login</h2>
      <p>Username: <input type=text id=user>
      <p>Password: <input type=text id=pass>
      <p><input type=button value="OK" id=ok> 
      <input type=button value="Cancel" id=cancel>
</div>

// and the jQuery code to show this is pretty much the same
$.blockUI({ message:$("#loginMessage")});

blockUI를 사이트에서 사용하려면 먼저 간단한 두 가지 문제를 고려해야 한다. 무엇보다도 대화 상자를 아직 닫지 않았다. 이는 간단히 해결할 수 있는 문제이다. 두 번째 문제는 Listing 5의 코드에서 작성한 모든 대화 상자에 기본 blockUI 인터페이스가 사용된다는 점이다. 이렇게 되면 플러그인의 최대 장점 중 하나인 대화 상자의 인터페이스를 사용자가 직접 만들 수 있다는 매력이 드러나지 못한다. 이 문제를 해결하기 위해 blockUI와 CSS 코드를 함께 사용하면 고유한 CSS 파일을 받아서 처리하고 원하는 대로 사용자 정의할 수 있기 때문에 대화 상자의 인터페이스를 효과적으로 작성할 수 있다. 하지만 blockUI의 CSS 속성을 재정의하려면 플러그인이 기본값을 사용하지 않고 CSS 파일을 검색할 수 있도록 필요한 설정을 코드에 추가해야 한다. 예제 코드에 포함되어 있는 Listing 6의 코드에서는 대화 상자를 닫는 방법, 고유 CSS를 사용하는 방법 및 사용할 수 있는 CSS 옵션을 보여 준다.

				
// These two functions tell the BlockUI that
// you want to use your own CSS
// code to define how the dialogs will work.  The first line
// tells it you want to use your own CSS for the dialog,
// the second line tells it you want your own CSS 
// for the semi-transparent
// layer between the page and the dialog.
$.blockUI.defaults.css = {};
$.blockUI.defaults.overlayCSS = {};

// when the show button is pressed, we'll display the dialog.
// we want to display our own custom DIV.  However, note here
// that we want to override the CSS-defined height and width.
// After all, it would be difficult for an entire site to have
// predefined widths and heights if every dialog is slightly
// different.
$("#show").click(function(){
   $.blockUI({ message:$("#waitMessage"), css: {width:'500px', height:'160px'} });
});

// When the cancel button is pressed on the DIV dialog,
// we can close the dialog
$("#cancel").click(function(){
   $.unblockUI();
});

// the CSS you can override to make it look good on your site
div.blockOverlay
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
    -moz-opacity:.70;
    opacity:.70;
    background-color: #228518;
}

div.blockMsg
{
    width:  20%;
    top:    20%;
    left:   30%;
    text-align: center;
    background-color: #fff;
    border: 3px solid #044600;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    -moz-opacity:1;
    opacity:1;
    padding: 15px;
    color: #000;
}

필자의 경험에 비추어 보면 이 플러그인은 매우 유용하다. JavaScript의 confirm() 함수를 대체하려는 경우에 이 플러그인을 사용하면 매우 빠르게 구현할 수 있다. 그렇지만 이 플러그인의 모습이 좋다는 뜻은 아니다. 이메일 애플리케이션에서 파일을 업로드하는 대화 상자나 그림 감상 애플리케이션의 사진 라이트박스와 같이 좀 더 복잡한 상황에서도 이 플러그인을 사용할 수 있다. 이 플러그인을 Ajax 호출과 함께 사용하면 정보를 가져와서 화면에 오버레이하는 방식으로 지금 바로 사용할 수 없는 정보를 제공할 수 있기 때문에 페이지를 다시 로드하는 데 걸리는 시간을 절약할 수 있다. 또한 이 플러그인은 정보를 표시할 화면 영역을 효과적으로 확대할 수 있다. 마지막으로 이 플러그인을 사용하면 alert/confirm 함수와 관련된 제한 사항이 적용되지 않기 때문에 데스크탑 애플리케이션에 사용되는 것과 같은 대화 상자를 사용하여 소프트웨어를 설계할 수 있다.

printArea

printArea 플러그인은 웹 애플리케이션의 부족한 기능을 보완하는 매우 유용한 플러그인이다. 이 플러그인의 핵심 기능은 단순히 특정 HTML 요소를 인쇄하는 것이다. 이 플러그인은 웹 애플리케이션에서 window.print() 단추를 호출하여 최상의 결과가 인쇄되기만을 바라던 기존 인쇄 방식을 대체할 수 있는 효과적인 기능을 제공한다. 인터넷 브라우저 작업을 수행해 본 사람이라면 누구나 두 페이지를 서로 다른 브라우저에서 완전히 동일하게 인쇄할 수 없다는 것을 인정한다. 또한 텍스트 영역의 내부에 있는 모든 텍스트만을 인쇄하려는 경우에도 문제가 발생한다. 지금까지는 이 작업을 수행하기가 매우 어려웠다.

앞에서 말한 대로 이 플러그인을 사용하면 페이지에 있는 요소 중에서 특정 요소만을 선택해서 인쇄할 수 있다. 예를 들어, 이메일 애플리케이션에서 이 플러그인을 사용할 경우 사용자가 텍스트 영역에 포함된 메시지를 인쇄할 수 있다. 또한 보고서를 표시하는 페이지에서 사용할 경우에는 페이지의 다양한 단추와 그래픽을 제외하고 보고서만 인쇄할 수도 있다. 아마도 항공권 티켓을 인쇄해 본 사람이라면 이 기능에 익숙할 것이다. 웹 페이지에 표시되는 티켓에는 수많은 정보와 그래픽이 들어 있지만 인쇄되는 티켓에는 바코드와 기본적인 탑승 정보만 포함된다.

				
<p>An advertisement that you don't want printed out.
<p>Another advertisement that you don't want printed out.
<div id=printable>
<table width=40% cellpadding=3 cellspacing=0 border=1>
<tr><th>Name</th><th>Age</th><th>Height</th></tr>
<tr><td>John Q</td><td>23</td><td>6'1"</td></tr>
<tr><td>Jane Q</td><td>23</td><td>5'1"</td></tr>
<tr><td>Jimmy R</td><td>23</td><td>5'6"</td></tr>
</table>
</div>
<p><input type=button id=printButton value="Print">
<p>All the annoying disclaimer text you don't want printed out.
		
// Capture the click on the "Print" button.  Then, you can call the printArea()
// function on the "printable" div we used to wrap the portion of the page we want
// printed.  The only thing that will get printed to the printer will
// be the table, and all the annoying text won't be.
$("#printButton").click(function(){
   $("#printable").printArea();
});

이 플러그인을 사용하면 페이지의 요소를 인쇄하는 작업을 매우 직관적으로 쉽게 제어할 수 있다. 게다가 이 플러그인은 Internet Explorer와 Firefox 둘 다에서 정상적으로 작동하며 페이지의 인쇄 방법을 제어하는 데 사용할 수 있기 때문에 몇 가지 어려운 작업을 해결하는 데 도움이 된다. 유일한 단점은 개발자가 작성한 Print 단추 또는 개발자가 제어할 수 있는 페이지의 기타 영역을 사용자가 눌러야 한다는 것이다. 사용자가 브라우저의 Print 단추를 누를 경우에는 문제가 있는 기존 방식으로 인쇄 작업이 수행된다. 설상가상으로 이 경우에는 실행을 중지할 수 없으며 심지어는 단추 사용과 관련된 경고가 발생할 수도 있다. 따라서 사용자가 현명해서 개발자가 작성한 Print 단추를 눌러주기만을 바랄 수 밖에 없는 것이다. 물론 이 방법 대신 사용자를 완전히 배제한 채로 특정 조건에서 페이지를 자동으로 인쇄하는 방법을 사용할 수도 있다.

AlphaNumericPlus

사용자 인터페이스 설계에는 일반적으로 사용자 오류를 방지하기 위한 코드도 포함되어 있다. 사용자 오류를 방지하는 좋은 예로 양식의 텍스트 필드와 관련된 작업을 들 수 있다. 즉, 전화 번호를 캡처하는 필드를 설정했지만 이 필드에 사용자가 문자를 입력할 수도 있다는 것을 알고 있다.

이 올바르지 않은 입력은 세 가지 방법으로 방지할 수 있다. 첫 번째 방법은 데이터베이스에 입력하기 전에 서버에서 잘못된 입력을 검사하는 것이다. 따라서 Java™ 코드 또는 PHP 코드를 작성하여 모든 입력 필드를 검사하고 올바른 입력과 그렇지 않은 입력을 결정한 후 올바르지 않은 입력일 경우 클라이언트에게 메시지를 보낼 수 있다. 두 번째 방법은 JavaScript를 사용하여 클라이언트측에서 오류를 검사하는 것이다. 클라이언트측에서 오류를 검사하면 네트워크 트래픽을 줄일 수 있고 사용자에게 빠른 응답을 제공할 수도 있다. 마지막 오류 검사 방법은 "사용자 오류 방지" 설계 패턴을 적극 활용하는 방법으로 정보를 입력할 때 잘못된 정보의 입력을 차단하는 것이다. 이 방법을 사용하면 지금까지 예로 든 상황에서 전화 번호를 보낼 때 서버로 문자를 보내거나 양식을 제출하기 전에 JavaScript를 사용하여 문자를 검색할 필요가 없게 된다. 문자를 입력할 수 없게 만들면 이 모든 문제가 해결되기 때문이다.

이 플러그인의 기본 아이디어는 웹 애플리케이션의 텍스트 필드에서는 적합한 형식의 입력만을 받아들여야 한다는 것이다. 따라서 숫자만 입력해야 하는 필드의 경우 숫자만 받아들이는 텍스트 필드를 작성할 수 있다. 그리고 문자만 입력해야 하는 필드에서는 문자만 받아들인다. 아래 예제에서 이 방법을 확인할 수 있다.

				
<p>Alpha-only: <input type=text width=20 id=alphaOnly>
<p>Numeric-only: <input type=text width=20 id=numericOnly>

// This code will prevent unworthy characters from being entered
// into our text fields, assuring valid input
$("#alphaOnly").alpha();
$("#numericOnly").numeric();

표준 AlphaNumeric 플러그인은 위 코드로 끝나지만 필자는 이 플러그인을 확장하여 기능을 추가했다. 여기에서는 추가된 기능(다운로드에 있음)에 대해 설명한다. 필자는 문자나 숫자만 입력하도록 제어할 수 있다면 $, % 또는 &와 같은 특수 문자를 포함하도록 확장할 수도 있을 것이라고 생각했다. 그리고 양식의 용도에 적합한 특정 규칙을 텍스트 필드에 연결할 수도 있을 것이다. 예를 들어, 이메일 주소에 사용되는 텍스트 필드는 표준 숫자 및 문자를 비롯하여 이메일 주소에 유효한 모든 문자를 허용해야 한다. 따라서 이메일 주소 필드는 _, -, @ 및 "."를 받아들일 수 있어야 한다. 다른 모든 특수 문자는 유효하지 않으며 이메일에 사용할 경우 오류가 발생하므로 입력할 수 없도록 차단한다. 이렇게 하면 올바른 이메일 주소라고 100% 확신할 수 있는가? 그렇지 않다. "a@a@.com"과 같이 엉뚱한 주소를 입력하는 사용자가 있을 수 있다. 하지만 이 기능은 어디까지나 시작에 불과하다.

필자가 표준 AlphaNumeric 플러그인에 추가한 기능은 십진수, 환율, 이메일, 전화 번호, 시간 및 날짜를 처리한다. Listing 9에서는 필자가 작성한 코드를 보여 준다.

				
// will only allow numerals and the . 
// and , characters (because I'm thinking international 
// here, and some countries use a , for a decimal)
$("#decimalOnly").decimal();
// same as the above, but it adds support for the "%"
$("#percentOnly").percent();
// as described above, only allows valid e-mail characters
$("#emailOnly").email();
// allows only numbers and the ( and ) and - characters
$("#phoneOnly").phone();
// allows only numbers and the : character
$("#clockOnly").clock();
// allows only numbers and the / and - characters
$("#dateOnly").date();
// this is the only one that's slightly different, in that
// it requires you to pass in the valid currency symbol, so you can
// pass in a pound sign or euro if you're using this overseas
$("#currencyOnly").currency("$");

이 AlphaNumericPlus 플러그인은 사용자의 올바르지 않은 입력을 차단하는 첫 번째 레벨이다. 특정 상황에서 올바르지 않은 문자를 허용하지 않음으로써 오류의 가능성을 최소화할 뿐 아니라 올바른 정보를 입력하지 않았다는 메시지를 사용자에게 즉시 제공할 수도 있다. 따라서 사용자가 전화 번호 필드에 문자를 입력하려고 시도할 때 아무 것도 표시되지 않을 경우 오류가 발생했다는 메시지가 사용자에게 즉시 표시된다. 이처럼 빠른 응답은 프로세스를 완료한 후 모든 오류를 고쳐야 하는 불편을 피할 수 있기 때문에 사용자로부터 좋은 반응을 얻고 있다.

올바르지 않은 입력을 차단하는 두 번째 레벨은 양식 제출 시에 클라이언트측에서 검사를 수행하는 것이다. 이 경우에는 모든 데이터의 형식이 올바른지 확인할 수 있다. 예를 들어, 전화 번호가 올바른 숫자로 구성되어 있는지 검사하는 것이다. 마지막 레벨은 서버측에서 검사를 수행하는 것이다. 이 경우에는 형식이 올바른지 이중으로 확인할 수 있으며 데이터베이스에 있는 기존 정보와 비교하여 검사할 수도 있다. 이 플러그인을 제일선에서 사용할 경우에는 이와 같이 3단계로 검사를 수행했을 때 최상의 결과를 기대할 수 있다. 이 플러그인은 완벽하지는 않을지라도(모든 문자가 올바르더라도 올바르지 않은 형식을 입력할 수 있으므로) 사용자에게 피드백을 즉시 제공한다.

Calculation

특정 상황에서 유용한 또 다른 플러그인으로 Calculation 플러그인이 있다. 대부분의 좋은 플러그인과 마찬가지로 이 플러그인은 소수의 작업만을 효과적으로 수행한다. 이름으로 알 수 있듯이 이 플러그인은 필드에 있는 숫자를 계산하여 합계, 평균, 최대값 또는 최소값을 구한다. 필드의 숫자를 분석하는 기능도 제공한다. 이 플러그인은 모든 유형의 요소에 있는 숫자를 더할 수 있을 정도로 높은 유연성을 제공한다. 따라서 DIV, INPUT TEXT 및 SPAN이 포함된 요소의 배열을 전달하면 이 플러그인은 해당 필드에 있는 숫자를 찾아서 숫자로 변환한 후 합계를 리턴한다. 이 플러그인은 이와 같은 특정 상황에서 유용하게 사용할 수 있으며 모든 수학 함수에 대한 오류 검사와 같은 복잡한 작업을 손쉽게 해결할 수 있다.

하지만 이 플러그인을 사용할 때 한 가지 주의할 점은 모든 플러그인은 jQuery 오브젝트를 리턴한다는 표준 플러그인 규칙을 따르지 않는다는 점이다. 이 기사에서 설명하는 다른 모든 플러그인과 필자가 사용해 본 다른 모든 플러그인에서는 함수가 jQuery 오브젝트를 리턴하기 때문에 "체인이 끊어지지" 않는다. 하지만 이 플러그인은 이 규칙을 따르지 않고 숫자를 리턴하기 때문에 체인이 끊어지며 결과적으로 플러그인을 호출한 후 jQuery 함수를 데이지 체인 방식으로 연결할 수 없게 된다.

이 플러그인을 확장한 형태의 조금 더 복잡한 예제를 살펴보자. 그림 4의 위젯에는 사용자가 백분율을 입력할 수 있는 필드 세트가 있다. 이 위젯은 모든 필드의 합이 100%가 되는지 검사하여 100%가 아니면 오류를 나타내기 위해 백분율 합계를 빨간색으로 표시한다. 재무 기획 페이지에서 분배율을 결정할 때 이와 비슷한 위젯이 자주 사용된다.

				
// Set up the table that contains the widget.
// Note that we add a class to it called
// "percentSimple", which will be used in the jQuery 
// code, as well as adding a unique
// ID to the table "sortTable1".
// Also note that each text field that will have a percent 
// typed into it has the
// class of "percent" added to it.
// Finally, note in the table footer a field called "percentTotal"
<p><table width=300 class="percentSimple" cellpadding=0 cellspacing=0 id=sortTable1>
<tbody>
  <tr><td class="left">
    S&P 500 Index
  </td>
  <td>
    <input type=text class="percent textfield"> %
  </td>
  </tr>
  .......
<tfoot>
  <tr><td>
    Total
  </td>
  <td>
    <span class=percentTotal></span> %
  </td>
  </tr>
</tfoot>
  
// take advantage of our previous plug-in and limit the percent fields
// to just numbers
$(".percent").numeric();

// capture any keyup events from all the "percent" fields
// when these occur, we are going to recalculate the total percent
$("table.percentSimple input.percent").keyup(function(){
    // figure out which table this occurred in (in case there's more than 
    // 1 widget on a page
    var table = $(this).parents().filter("table.percentSimple");
    var ID = table.attr("id");
    // Find the sum of all the "percent" fields, by using
    // our calculation plug-in
    var sum = $("#" + ID + " input.percent").sum();
    // cache the span called "percentTotal"
    var totalField = $("#" + ID + " .percentTotal");
    // update the total in the "percentTotal" field
    totalField.html(sum);
    // if the sum != 100%, then we'll attach an error to it
    if (sum != 100 && sum != 0)
    {
       totalField.addClass("error");
    }
    else
    {
       totalField.removeClass("error");
    }
});

지금까지 살펴본 것처럼 이 플러그인은 제한된 상황에서만 사용할 수 있지만 올바르게 사용할 경우 매우 효과적이고 시간을 절약할 수 있다. 여기에서는 max/min, average 및 sum 함수만 사용했지만 열의가 높은 사람이라면 Microsoft Excel 애플리케이션에 있는 모든 함수가 포함된 전체 스프레드시트 플러그인도 충분히 상상해 볼 수 있을 것이다. 이 스프레드시트 플러그인이 표준 편차, 결제 금액 및 미래 가치를 계산하는 함수(재무 업무를 담당하는 필자에게 가장 유용한 함수)를 제공하는 모습을 그려 보자. 더 나아가 웹 사이트에서 이 스프레드시트 플러그인을 사용하여 기본적인 스프레드시트 함수를 제공할 수도 있을 것이며 복잡한 수식을 입력하지 않고도 고유한 스프레드시트 형태의 페이지를 만들 수 있는 기능도 사용자에게 제공할 수 있을 것이다.

Timeout/Interval

필자가 JavaScript에 대해 불만을 가지고 있는 부분 중 하나는 JavaScript가 일반적인 스레드 설계와 호환되지 않는다는 점이다. Swing으로 작성한 Java 사용자 인터페이스를 JavaScript 웹 애플리케이션으로 옮겨올 때 Java 코드에 있는 일반적인 멀티스레드 인터페이스를 JavaScript에서 복제할 수 없다. 대신 JavaScript에서는 필자가 Java 코드에서 사용했던 스레드 설계와 비슷하지만 완전히 동일하지는 않는 setTimeout() 및 setInterval() 메소드를 사용한다. setTimeout() 메소드는 콜백 메소드 역할을 수행하는 문자열 인수와 제한 시간(밀리초) 역할을 수행하는 숫자를 받는다. 또한 setInterval() 메소드도 동일한 인수를 받는다. 하지만 이 메소드는 호출 사이의 간격을 의미하는 제한 시간을 사용하여 콜백 메소드를 반복해서 호출한다.

스레드 오브젝트를 생성한 후 동일한 오브젝트에 대해 start() 및 stop()을 호출하여 실행 시기를 제어할 수 있고 클래스 정의에서 run() 메소드를 정의할 수 있는 Java 스레드 설계와 앞에서 설명한 설계를 비교해 보면 그 차이를 알 수 있다. JavaScript 스레드 설계에서는 스레드를 쉽게 시작할 수 있지만 스레드를 중지시키기가 어렵다. 이는 JavaScript 스레드 설계에서 제한 시간/간격을 중지할 때 ID를 사용하기 때문이다. 이러한 ID는 setTimeout/setInterval 함수로부터 다시 전달된다. 다음을 살펴보자.

				
// creates a thread with ID of threadID,
// which will call myCallBack()
// every 1 second (1000 ms = 1 sec)
var threadID = setInterval('myCallBack', 1000);

// will stop the thread from calling myCallBack()
clearInterval(threadID);

Listing 11의 코드는 스레드가 실행되기도 전에 스레드를 해제하기 때문에 실용성이 없다. setInterval()을 호출한 후 다음 행에서 clearInterval()을 효과적으로 호출하지만 setInterval() 호출 이후에 일시 정지되는 시간이 없기 때문에 아무 작업도 수행되지 않는다. Listing 12에서는 이에 대한 해결 방법을 보여 준다.

				
$(document).ready(function() {
  // store the ID as a global variable
  var threadID;

  // creates a thread with ID of threadID, which will call myCallBack()
  // every 1 second (1000 ms = 1 sec)
  threadID = setInterval('myCallBack', 1000);

  // will stop the thread from calling myCallBack()
  $("#hypotheticalStopButton").click(function(){
    clearInterval(threadID);
  });

이 코드는 threadID를 JavaScript 코드의 어디에서나 참조할 수 있는 전역 변수로 저장하기 때문에 정상적으로 작동한다. 간단한 예제에서는 이 방법이 잘 통하기는 하지만 웹 애플리케이션에 더 많은 스레드를 추가하게 되면 상호 작용을 처리하기가 훨씬 더 어려워진다. JavaScript 코드에서 올바른 스레드를 선택하여 다양한 시간에 중지/시작하기 위해 여러 개의 전역 변수를 사용하면 코드를 관리하기가 어려워진다. 웹 애플리케이션에서 일반적으로 발생할 수 있는 또 다른 상황 즉, 함수를 정확히 10번만 호출하려는 상황을 이 문제와 함께 고려해 보자. 이렇게 하면 또 다른 전역 변수가 기존 전역 변수에 추가된다. 또한 스레드 생성 시에 인라인 함수를 작성할 수 없기 때문에 독립된 함수를 참조해야 한다. 페이지에서 스레드의 복잡도가 높아지는 것 만큼 빠르게 복잡도가 높아진다는 것을 알 수 있다.

Timers 플러그인의 목적은 JavaScript 코드에서의 스레드 작업 방식을 Java 코드와 비슷한 방식으로 변경하여 웹 애플리케이션에서 수행되는 JavaScript 스레드와 관련된 작업을 단순화하는 것이다. setInterval() 함수로부터 돌려 받는 threadID를 이용하는 대신 Timers 플러그인은 스레드 생성 시에 스레드 이름을 선택하도록 설계를 변경했기 때문에 코드의 다른 위치에서 사용하기 위해 스레드 ID를 저장할 필요가 없다. 다른 유용한 변경 사항과 더불어 이 미묘한 변경 사항으로 인해 JavaScript의 스레드 작업을 훨씬 쉽게 수행할 수 있다. Listing 13에서는 Listing 12의 샘플 코드를 변경하여 Timers 플러그인을 사용하는 방법을 보여 준다. 필자의 말대로 훨씬 더 쉽게 작업을 수행할 수 있는지 확인해 보자.

				
// attach an event to the start button,
// kicking off the thread
$("#start").click(function(){

// using the Timer plug-in, we attach a thread to a page element
// we call the "everyTime" function, which is analagous to the
// setInterval function.
// This function takes several arguments:
// - the timeout interval
// - the name of the thread, notice how we can choose the name here
//   and not have to worry about storing the value anywhere
// - the function to call each interval, notice how we can define
//   the inline function here, without creating an extra function
//   elsewhere, simplifying development of the thread.
// - (optional) how many times to run it before stoppping, so if
//    you put a 10 there, it would run it 10 times and then stop
// - (optional) a true/false of whether to start the next interval
//   if the previous one isn't completed yet
 $("#timerSample").everyTime(500, 'growSquareThread', function(){
 var t = $(this);
 t.height(t.height()+5);
 t.width(t.width()+5);
 });
});

// attach an event to the stop button.  Notice how we can simply
// call a stop with the name of the thread, without worrying
// about the threadID
$("#stop").click(function(){
  $("#timerSample").stopTime("growSquareThread");
});

Timers 플러그인을 사용하면 실제로 JavaScript의 스레드 작업이 쉬워진다. 처음에는 변경 사항이 미미해 보일 수도 있겠지만 자세히 보면 코드를 훨씬 더 명료하게 작성할 수 있다는 것을 알 수 있을 것이다. 기본적으로 전체 스레드를 한 곳에서 정의할 수 있다. 즉, 시작 메커니즘, 지연, 수행할 루프 수 및 각 반복을 실행할 코드를 정의할 수 있다는 뜻이다. 이는 기존의 JavaScript 스레드 작업보다 쉬울 뿐만 아니라 Java 스레드 작업보다도 쉽다. Timers 플러그인을 사용하면 전체 스레드 자체가 하나의 코드 블록에 자체적으로 포함된다. 코드의 어디에나 있을 수 있는 함수를 더 이상 참조하지 않아도 되고 전역 변수에서 threadID를 추적하지 않아도 된다. 또한 복잡한 코드를 사용하여 스레드가 수행한 반복의 수를 더 이상 추적하지 않아도 된다. 스레드를 쉽게 중지할 수도 있다. 스레드를 생성할 때 사용한 것과 동일한 스레드 이름을 사용하여 스레드를 중지할 수 있다. 이제는 threadID를 몰라도 된다.

결론

이 기사에서 여러 가지 플러그인을 자세히 다루기는 했지만 jQuery에서 사용할 수 있는 모든 플러그인을 살펴본 것은 아니다. jQuery 플러그인 사이트에 있는 200-400개의 플러그인 중 8개만을 다루었을 뿐이다. 약간의 샘플에 불과할지라도 이 기사에서 설명한 플러그인은 데스크탑 애플리케이션과 웹 애플리케이션 사이의 차이를 메우는 데 도움이 되는 중요한 플러그인이다. 이러한 플러그인은 JavaScript와 jQuery 사이에 현재 존재하고 있는 차이를 메우고자 하는 노력이다. 지금까지 설명한 8개의 플러그인을 통해 배운 내용이 무엇인지 그리고 이러한 플러그인이 작업에 어떤 도움이 되는지 생각해 본 후 다른 수백 개의 플러그인을 활용해서 어떤 작업을 수행할 수 있는지도 생각해 보자. jQuery 사이트에 있는 플러그인 저장소를 살펴보기 바란다. 필자 또한 이 사이트에서 각각의 플러그인 살펴보다가 이 기사에서 언급한 몇 가지 플러그인을 찾았었다. 좋은 플러그인을 찾을 수 있는 또 다른 방법은 작업의 요구 사항을 면밀히 파악하는 것이다. 그리고 지금부터는 "이 기능을 제공하는 플러그인이 이미 있지 않을까?"라는 질문을 던질 줄 알아야 한다. 다른 사람이 이미 수행한 작업을 반복해서 수행할 필요는 없기 때문이다.

마지막으로 이 기사에서 설명한 플러그인을 통해 웹 애플리케이션을 어떻게 개선할 수 있는지 검토해 보자. 세 가지 마우스 클릭 플러그인을 사용하면 웹 애플리케이션에서 단순한 왼쪽 마우스 클릭을 넘어선 다양한 작업을 수행할 수 있으며 마우스로부터 받을 수 있는 모든 상호 작용을 캡처할 수 있다. 데스크탑 애플리케이션에서는 이미 이 기능이 지원되고 있기 때문에 이러한 플러그인을 통해 사용자 인터페이스와 관련된 웹 애플리케이션의 단점을 실질적으로 보완할 수 있다. 두 번째로 설명한 플러그인인 blockUI를 통해서는 웹 사이트의 모습과 일치하는 대화 상자를 작성할 수 있으며 결과적으로 고유한 대화 상자 창을 설계할 수 있다. 지금까지는 웹 애플리케이션이 alert()와 confirm()으로만 제한되어 있었기 때문에 이 플러그인을 통해 웹 사이트 사용자와 상호 작용하는 방법을 획기적으로 개선할 수 있다. 세 번째로 설명했던 printArea 플러그인은 다른 부분은 제외하고 웹 사이트의 특정 부분만을 인쇄하는 기능을 제공한다. 이 기능 또한 데스크탑 애플리케이션에서만 지원되고 웹 애플리케이션에서는 지원되지 않았던 기능이다. 특정 위젯을 쉽게 만들 수 있는 calculation 및 alphanumeric 플러그인에 대해서도 살펴보았다. 이러한 플러그인은 코드의 오류를 줄이고 사용자에게 빠른 응답 메커니즘을 제공하는 데 도움이 된다. 마지막으로 JavaScript 스레드와 관련된 작업 방법을 개선할 수 있는 Timer 플러그인에 대해 설명했다.

이 기사에서 설명한 모든 플러그인과 관련된 한 가지 기본 주제는 데스크탑 애플리케이션에 비해 웹 애플리케이션에 인터페이스 및 코드와 관련된 제한이 많을지라도 이러한 모든 차이를 보완할 수 있는 코드를 작성하는 방법이 있다는 것이다. jQuery를 사용하면 플러그인을 통해 이러한 차이를 보완할 수 있다. 이 기사에서 살펴본 플러그인은 궁극적인 목표인 데스크탑 애플리케이션과 동일하게 작동하는 웹 애플리케이션을 만드는 데 큰 도움을 준다.

위로

다운로드 하십시오

	다운로드 방식에 대한 정보

참고자료

• 이 기사를 집필하던 시점에 가장 안정적인 버전이었던 1.2.6 Minimized jQuery를 다운로드하여 사용자의 코드에 추가할 수 있다.
  
  
• 전체 jQuery API Page에서 라이브러리의 모든 함수를 볼 수 있다.
  
  
• jQuery에 사용할 수 있는 플러그인을 모두 살펴보자.
  
  
• IPod Menu Selection은 가장 멋진 jQuery 위젯 중 하나이다.
  
  
• W3Schools에서 CSS, JavaScript 및 기타 웹 언어에 대한 자세한 정보를 볼 수 있다.
  
  
• 다음은 jQuery 라이브러리에 대해 소개하고 있는 필자의 jQuery 시리즈 기사이다.
  • "jQuery로 작업하기, Part 1: 브라우저로 데스크톱 응용 옮기기"(developerWorks, 2008년 9월)
  • "jQuery로 작업하기, Part 2: 내일 나올 웹 응용을 오늘 구현해보자"(developerWorks, 2008년 9월)
  • "jQuery로 작업하기, 3부: jQuery와 Ajax로 RIA 만들기: JQuery: 내일 나올 웹 응용을 오늘 구현해보자"(developerWorks, 2008년 10월)
  
  
• "Ajax 오버홀, Part 2: jQuery, Ajax, 툴팁, 라이트박스로 기존 사이트 개선하기"(developerWorks, 2008년 5월)에서 jQuery에 사용할 수 있는 다른 플러그인에 대한 설명을 볼 수 있다.

필자소개

		10년에 걸친 기술 경험을 통해 Michael Abernethy는 광범위한 기술을 토대로 광범위한 클라이언트와 작업해 왔다. 현재 경매 소프트웨어 회사인 Optimal Auctions에서 제품 개발 관리자로 일하고 있다. Abernethy는 요즘 RIA(Rich Internet Applications)에 초점을 맞춰 복잡함과 단순함을 동시에 추구하고 있다. 컴퓨터 앞에 앉아 있지 않을 때는 양서를 끼고 멕시코 해변가에서 여유를 즐긴다.

기사에 대한 평가

보다 나은 서비스를 제공하기 위함이오니 잠시 짬을 내어 이 양식을 제출하여 주십시오. 귀하께서 원하시는 정보를 얻었습니까? 예 아니오 잘 모르겠음   이 페이지 개선을 위한 의견을 주십시오:   이 정보가 얼마나 유용했습니까? (1 = 전혀 도움이 되지 않음, 5 = 매우 유용함) 1 2 3 4 5

이 문서 북마킹 하기 mar.gar.in naver eolin del.icio.us

위로