login register Sysop! about ME  
qrcode
    최초 작성일 :    2010년 06월 14일
  최종 수정일 :    2010년 06월 14일
  작성자 :    Taeyo
  편집자 :    Taeyo (김 태영)
  읽음수 :    39,496

강좌 목록으로 돌아가기

필자의 잡담~

이번 강좌는 실전! jQuery 쿡북의 원고 중 일부를 출판사의 허락을 얻어 강좌로 제공하는 것입니다.
도움이 되시기를 바라고요~
원고를 그대로 옮기는 것이다보니 경어체가 아닌 점에 양해를 부탁드립니다.

jQuery 자바스크립트 라이브러리의 기본 목적은 오픈 소스 세계에서 이용할 수 있는 다른 자바스크립트 라이브러리들보다 효과적이고 간결한 대안이 되는 것이다. 이러한 목적을 위한 핵심 원칙은 jQuery 코어가 효과적이고 간결해야 하는 동시에, 대부분의 개발자 요구사항을 만족시켜 주어야 한다는 것이다. 하지만, jQuery 코어만으로는 개발자들의 요구사항을 완벽하게 만족시켜 주지 못할 수도 있다. 그래서, 개발자들은 jQuery 사용자들에게 유용할 수 있지만 jQuery 코어에는 포함되어 있지 않은 jQuery 기능을 확장하고자 할 수 있다.

jQuery는 다양한 방법으로 확장이 가능하도록 설계되어 있다. 이후의 레시피들은 여러분에게 jQuery 플러그인의 세계를 소개시켜 줄 것이다.


jQuery 플러그인은 어디에서 찾아야 하는가?

문제점

jQuery 코어에는 존재하지 않는 기능이 필요하기에, jQuery를 가지고 무언가를 만들어 보고자 한다. 문제는 이미 다른 개발자가 이전에 같은 것을 시도해 보았을 수 있으며, 관련 플러그인이 이미 존재하고 있을 수 있다는 것이다. 그렇다면, 필요한 플러그인들을 찾기 위해서는 어디서부터 어떻게 살펴봐야 하는 것일까?

해결 방법

다음과 같은 jQuery 플러그인 저장소들을 살펴보도록 하자.

jQuery 플러그인 저장소 사이트 : http://plugins.jquery.com
구글 코드 사이트 : http://code.google.com
GitHub 사이트 : http://github.com
특정 질의를 사용하여 구글에서 검색 : http://google.com
SourceForge 사이트 : http://sourceforge.net

논의

jQuery 플러그인을 찾을 수 있는 몇몇 사이트들이 있다. jQuery 플러그인의 성향 때문에, jQuery 플러그인들은 다른 소스들보다 jQuery 플러그인을 주로 호스팅하는 특정 오픈 소스 사이트들에 주로 존재하고 있다. 추가적으로 말하자면, jQuery 프로젝트는 jQuery 플러그인의 중앙 저장소인 http://plugins.jquery.com에서 호스팅되고 있다.

플러그인을 찾는 가장 좋은 방법은 일단 사용 가능한 모든 플러그인을 살펴본 다음에, 필요한 몇몇 플러그인들을 골라내는 것이다. 세상에는 매우 다양한 플러그인들이 존재하고 있으니 말이다. 즉, 동일한 문제를 해결하기 위한 플러그인이지만 서로 완전히 다른 방식으로 제작된 것들도 존재하며, jQuery 코어 라이브러리를 대체하기 위해서 작성된 플러그인들도 존재한다.

jQuery 플러그인을 찾고자 한다면, 다음의 순서가 가장 최근에 업데이트된 플러그인 및 최신 버전의 플러그인을 찾기 위한 최선의 순서일 것이다.

jQuery 플러그인 저장소를 통한 검색

jQuery 프로젝트는 현재 플러그인 저장소(http://plugins.jquery.com)에서 호스트되고 있으며, 이 글을 번역하고 있는 시점에 대략 2,000개 이상의 플러그인이 존재하고 있다. 대부분의 플러그인 제작자들은 자신의 플러그인을 이곳에 게시한다.

jQuery 플러그인 저장소에서 호스팅되는 플러그인은 검색하는 수고를 덜어주기 위한 몇 개의 카테고리로 구성되어 있다. 물론, 하나의 플러그인이 여러 카테고리에 속할 수도 있다. 또한, 여러분이 찾고 있는 플러그인이 jQuery 코어 라이브러리의 어떤 버전과 잘 맞는지를 확인할 수 있도록 API 호환성(compatibility)에 의해 나열되어 있기도 하다. 또한, 배포일 기준으로 검색해볼 수도 있는데, 이를 통해서 관심 있던 플러그인의 새로운 버전이 출시될 때마다 확인해 볼 수가 있을 것이다.

구글 코드를 통한 검색

구글 코드(http://code.google.com)는 jQuery 플러그인을 위한 매우 풍부한 저장소를 제공하고 있다. 일반적으로, 이전에 설명한 jQuery 플러그인 저장소에서 여러분이 원하는 플러그인을 찾지 못했다면, 구글 코드에서 찾아보는 것이 좋을 것이다.

GitHub를 통한 검색

GitHub(http://github.com) 사이트는 수 많은 jQuery 플러그인 작성자들이 애용하기 시작하는, 코드 호스팅 계에 있어 떠오르는 샛별 사이트이다. 점점, 많은 플러그인들이 이 사이트로 옮겨오고 있으며, 특정 플러그인을 찾고자 할 때 검색해 볼만한 가치가 있는 사이트이다. 이 사이트에서 제공하는 기능들 중 가장 주목할 만한 기능 중 하나는 Git 소스 코드 관리 시스템의 기능을 이용하여 친화적인 방식으로 저장소를 유지할 수 있는 능력을 들 수 있다. 만약, 여러분이 기존 플러그인을 편집해야 하는 상황에 놓인다면, GitHub의 기능을 이용하는 것이 기존의 업데이트들을 추적할 수 있는 매력적인 방법이 되어줄 것이다.

GitHub 사이트에 존재하는 플러그인을 찾기 위한 최선의 방법은 GitHub의 뛰어난 검색 기능을 활용하는 것이다. GitHub 사이트는 검색을 위한 수 많은 뛰어난 연산자를 제공하고 있으며, 이들 연산자들에 대한 정보는 http://github.com/search에서 좀 더 상세하게 볼 수 있다. 구체적으로 jQuery 플러그인을 찾고자 한다면, 언어를 선택할 수 있는 select 요소에서 자바스크립트를 선택한 후에 플러그인을 찾는 것이 최선의 방법일 것이다.

구글을 통한 검색

이전의 방법들은 플러그인의 출처를 알고 있는 경우에 유용한 반면, 구글(Google)을 통해서 웹 전체를 검색하는 것 또한 상당히 유용하다. 다만, 검색된 자료가 상당히 많을 수 있기에, 그만큼 많은 결과를 조사해야 할 필요가 있다. 또한, 구글 질의 검색을 사용한다면, 더 빠르게 찾을 수도 있다.

{searchterm} "jquery*.js"
- 플러그인의 이름이 jquery-{myplugin}.js 또는 jquery.{myplugin}.js인 경우에 최선의 검색 결과가 나온다.
{searchterm} "*jquery.js"
- 플러그인이 명명 규칙을 따르는 경우에 최선의 검색 결과가 나온다.

SourceForge를 통한 검색

SourceForge(http://sourceforge.net) 사이트에는 극소수의 jQuery 플러그인들이 호스트되고 있다. 그러나, 이 사이트에 존재하는 많은 프로젝트들은 IDE 코드 완성과 같은 jQuery 지원 도구들을 제공하고 있다. 만약 여러분이 어떤 독특한 플러그인을 찾고 있다면, SourceForge 사이트도 훌륭한 검색장소가 될 것이다.


언제 jQuery 플러그인을 작성해야 하는가?

문제점

여러분의 목적에 적합해 보이는 jQuery 플러그인을 찾긴 했지만, 알고 보니 그 플러그인이 여러분의 목적에 부합하지 않거나, 플러그인을 사용하는 방식이 올바르게 구성되어 있지 않았다는 것을 알게 되었다. 이 경우, 동일한 요구사항을 가지고 있는 다른 사람들과의 공유를 위해서 새로운 jQuery 플러그인을 작성하는 것이 가치가 있을까?

해결 방법

이 문제에 대한 정답은 없다. 수많은 jQuery 플러그인들이 존재하긴 하지만, 특정 요구사항을 충족시키는 플러그인은 존재하지 않을 가능성이 더 높은 것이 사실이다.

필자는 여러분이 자체 jQuery 플러그인을 작성하고 공개하기로 결정하는 기준이 다음의 세 가지 사항에 의해서 결정된다고 생각한다.

- 동일한 문제점을 갖고 있는 다른 사람들이 있을 법한가?
- 여러분이 제공하려는 지원의 수준은 어느 정도인가?
- 여러분이 기대하는 커뮤니티 참여의 수준은 어느 정도인가?

논의

잠재적인 지지자들이 존재한다면 플러그인을 만들도록 하자.

만약, 여러분이 아직 풀지 못한 숙제를 가지고 있다면, 동일한 문제 때문에 고민하고 있는 다른 개발자들도 있을 수 있다. 이 경우, 문제를 직접 해결하기 전에 다른 이들은 어떻게 그 문제를 해결했는지 알아보는 것이 무엇보다 중요하다. 현재 여러분은 어느 정도의 예비 조사를 끝낸 상태이며, 해결 방법을 검색하고 있다고 가정해보자. 검색하는 동안에 답변이 없는 포럼의 글이나 메일링 리스트의 질문들을 보게 된다면 여러분은 플러그인에 대한 필요성을 느낄 수 있을 것이다. 하지만, 플러그인을 만들만한 가치가 있는지의 여부를 결정하는 것은 쉬운 일이 아니며, 결국, 그 결정은 플러그인을 만들려고 계획하고 있는 사람에게 달려있다. 하지만, 잠재적인 지지자들이 있을 것 같은지를 알아보는 것은 매우 바람직한 행동이다.

여러분이 자체 플러그인을 만들려 하는 잠재적인 또 다른 이유는 여러분의 요구에 부합하는 플러그인이 존재하고 있긴 하지만, 여러분이 원하는 사항을 완벽하게 처리하지는 못하는 경우가 있기 때문이다. 만약, 이러한 상황이라면, 패치(patch)를 작성한 다음, 원래의 작성자에게 보내어 패치가 플러그인에 포함되도록 하는 방안을 생각해볼 수 있다. 패치를 기존의 프로젝트에 전달하여 오픈 소스에 참여하는 것은 개발자들의 가장 가치 있는 자원인 "시간"을 더욱 효과적으로 사용할 수 있게 하는 좋은 방법이 된다.

여러분이 제공할 용의가 있는 지원의 수준을 이해하고 의사소통 하도록 하자.

만약, 자체 플러그인을 작성하는 것이 최선이라고 판단되었다면, 필자가 제시하는 고려사항 및 계획이 여러분의 오픈 소스를 만드는 데에 도움이 될 것이다.

먼저, 자신의 코드를 공개하기로 결정한 경우, 가장 먼저 그리고 가장 깊게 고려해야 할 대상은 바로 라이선스이다. jQuery 프로젝트는 MIT와 GPL이라는 이중 라이선스(dual-licensed)를 가지고 있지만, 많은 다른 오픈 소스 라이선스들도 충분히 고려해 볼만한 가치가 있다. 오픈 소스 라이선스의 복잡한 사항들에 관해서는 위키피디아(http://en.wikipedia.org/wiki/Open_source_license)를 참고해 봄으로써, 보다 상세한 검토를 할 수 있을 것이다.

두 번째로, 플러그인 작성자로서 여러분은 여러분의 코드를 다운로드하고 사용하게 될 다른 사람들에게 제공할 용이가 있는 지원 수준에 대해서 고민하고 의사소통 하는 것이 중요하다. 여러분의 코드를 공개만 하고 이에 대한 지원은 제공하지 않는 것도 하나의 방법이며, 이는 꾸준히 코드를 지원해야 한다는 것이 부담스러운 경우에 적합하다. 하지만, 가장 좋은 방법은 역시나 의사소통을 하는 것이다. 그렇기에, 플러그인의 주석 내부에 여러분의 지원 계획에 대해서 간단하게나마 메모를 작성하는 것이 대단히 바람직하다 할 수 있겠다.

만약, 여러분이 공개하려는 플러그인에 대해 보다 깊은 지원을 제공하고자 한다면, 여러분의 플러그인을 지원하는 데 도움이 되는 기능들을 제공하는 훌륭한 소스 코드 호스팅 사이트들을 살펴보도록 하자. 그리고, 여러분의 플러그인을 호스팅하고 지원할 수 있는 최적의 장소에 대한 목록은 레시피 12.1을 참고하자.

다른 사람들의 참여에 대한 계획을 세우자

끝으로, 다른 사람들의 참여를 허용하는 마음을 가지도록 하자. 참여는 오픈 소스 생태계의 핵심 구성요소이며, 플러그인을 공개한 순간부터 자신의 생각을 다른 이들과 나누는 것은 바람직한 일이라 할 수 있다. 참여를 허용하는 경우에 얻을 수 있는 장점은 다른 사람들의 활동으로 인해서 여러분이 이익을 얻을 수 있다는 것이다. 다른 사람들의 참여를 허용하는 플러그인은 사용자들에게 호감을 얻는 경향이 있는데, 이는 실제로 여러 사람들이 함께 참여하는 코드가 더 신뢰를 얻을 수 있는 코드가 되기 때문이며, 그로 인해 더욱 활성화되기 때문이다.

참여에 대한 방침을 세우는 것도 중요하다. 여러분이 의도하였든 혹은 의도하지 않았든 간에, 공개된 코드는 사용자가 그 코드를 일단 발견하기만 한다면 어느 정도 관심을 끄는 경향이 있다. 열린 방식, 공개적인 방법으로 사람들의 참여를 이끄는 계획을 세우는 것도 대단히 중요하다.

한 마디만 더 충고하자면, 다른 사람들의 관심을 끌기 위해서 여러분의 전자메일 주소를 공개하고, 사람들이 의견과 질문을 여러분의 전자메일로 보내도록 하는 것은 두 가지 이유에서 좋지 않은데, 첫 번째로 전자메일은 공개 포럼이 아니기에 잠재적인 사용자들이 이전 질문/답변 내용을 살펴볼 수가 없으며, 두 번째로, 전자메일은 플러그인에 대한 기존의 의견과 질문, 답변들을 통합하려는 경우에 문제가 될 수 있다.


첫 jQuery 플러그인 작성하기

문제점

jQuery 플러그인을 작성하기로 결정했다고 가정해 보자. 그렇다면, jQuery로 플러그인을 어떻게 작성해야 할까? 또한, 따라야 하는 권장 규칙은 무엇일까?

해결 방법

jQuery는 플러그인을 매우 간단하게 그리고 직관적으로 작성할 수 있도록 설계되어 있다. 메서드 또는 함수를 작성하는 것만으로도 기존의 jQuery 개체를 확장할 수가 있으니 말이다. jQuery 코어 라이브러리를 추가한 후에 여러분의 자바스크립트를 선언하면 새로운 사용자 정의 메서드 또는 함수를 사용할 수가 있다.

사용자 정의 jQuery 메서드 작성하기

jQuery 메서드는 체인이 가능하기에 jQuery 셀렉터(selector)의 이점을 활용할 수가 있다. jQuery 메서드를 정의하려면 jQuery.fn 개체에 여러분의 메서드 명을 추가하여 확장하면 된다. jQuery 개체는 여러 결과를 처리할 수 있어야 하기에, 여러분의 코드가 모든 결과에 적용되도록 each() 함수의 호출 내부에 사용자 정의 기능을 두어야만 할 것이다.

jQuery.fn.goShop = function() {
  
return this.each(function() {
    jQuery(
'body').append('<div>Purchase: ' this.innerHTML + '</div>');
  
});
};

이렇게 만들어진 새로운 플러그인을 사용하는 것은 jQuery를 호출하는 것만큼이나 쉬운데, 단지 새로운 메서드를 사용하기만 하면 된다.

jQuery('p').goShop();

사용자 정의 jQuery 함수 작성하기

함수는 jQuery 개체 자체에 추가되며, jQuery 셀렉션의 외부에서 호출되도록 설계되어 있다.

jQuery.checkout = function() {
  jQuery(
'body').append('<h1>Checkout Successful</h1>');
};

이 새로운 함수도 다음과 같이 조작 및 호출이 가능하다.

jQuery.checkout();

논의

jQuery의 강력한 기능 중 하나는 기본 jQuery 개체에 새로운 메서드와 함수를 추가할 수 있다는 것이다. 그리고, 이미 많은 핵심 메서드들이 이와 동일한 기술을 사용하여 라이브러리에 포함되어 있다. jQuery에 이미 존재하고 있는 이러한 기능을 활용함으로써, jQuery 사용자들과 플러그인 사용자들은 jQuery 코드를 사용하여 빠르고 간결하게 새로운 기능을 추가하거나, 기존 기능을 확장하거나, 원하는 어떠한 형태로든 만들 수 있게 된다. 이러한 융통성이 바로 jQuery의 핵심적인 특징이며, jQuery와 jQuery 플러그인들이 광범위하게 사용되는 이유이다.

새로운 메서드 또는 함수를 통해 jQuery를 확장하는 결정은 주로 개발자의 필요에 의해 결정된다. 보통, 새로운 메서드의 추가를 통해 jQuery를 확장시키는 것이 최선의 방법인데, 그 이유는 jQuery가 새로운 메서드에 대해서도 다른 메서드와의 체인을 지원하기 때문이며, 메서드 안에 있는 코드가 jQuery 셀렉터 엔진을 활용할 수 있도록 허용하기 때문이다.


여러분의 플러그인으로 옵션 전달하기

문제점

여러분이 만든 첫 번째 플러그인은 단지 jQuery에 메서드를 추가한 것뿐이었다. 그러나, 플러그인에는 적절하게 노출되기만 한다면, 다른 사람들에게 도움이 될만한 약간의 옵션이 있어야 한다. 사용자 정의 메서드에 옵션을 전달하기 위한 가장 좋은 방법은 무엇일까?

해결 방법

결론을 말하자면, 옵션은 options 개체를 통해서 여러분의 사용자 정의 플러그인 메서드로 전달되는 것이 가장 좋다. 메서드의 매개변수로 단일 options 개체를 전달하는 방법이 작업하기에도 쉽고, 보다 정리된 코드를 만들 수 있으며, 유연성도 제공할 수 있다.

플러그인에서 사용할 수 있는 옵션을 제공하는 경우에는, 적절한 기본값들을 제공하는 것이 바람직하다. 또한, 기본값들을 재정의할 수 있는 메서드를 제공하는 것 또한 중요하다. 이렇게 하려면, 기본 옵션 개체를 선언한 다음, extend() 메서드를 사용하여 기본값을 사용자가 지정한 값으로 재정의하면 된다. 그리고 나면, 여러분의 코드에서 이 옵션들을 사용할 수 있다.

jQuery.fn.pulse = function(options) {
  
// 기본 옵션들과 전달된 옵션들을 병합한다.
  
var opts jQuery.extend({}, jQuery.fn.pulse.defaults, options);

  return this
.each(function() {
    
// Pulse 기능이 시작된다.
    
for(var 0;i < opts.pulses;i++) {
      jQuery(
this).fadeTo(opts.speed,opts.fadeLow).fadeTo(opts.speed,opts.fadeHigh);
    
}

    
// 원래의 상태로 재설정한다.
    
jQuery(this).fadeTo(opts.speed,1);
  
});
};

// Pulse 플러그인의 기본 옵션들이다.
jQuery.fn.pulse.defaults {
  speed: 
"slow",
  pulses: 
2,
  fadeLow: 
0.2,
  fadeHigh: 
1
};

기본 옵션이 지정되었기에, 플러그인을 사용하는 개발자들이 함수를 호출하면서 많게든 적게든 옵션을 사용할 수 있게 되었다. 플러그인의 주요 메서드를 사용하자마자 기본값들을 설정하는 것은 중요하며, 그렇지 않으면 오류가 발생할 수도 있다.

// 하나의 옵션만을 재정의한다.
jQuery('p').pulse({pulses: 6});

// 모든 옵션들을 재정의한다.
jQuery('p').pulse({speed: "fast", pulses: 10, fadeLow: 0.3, fadeHigh: 0.8});

마지막으로, 플러그인 함수에 연결된 자식 개체에 옵션을 지정하는 방식으로, 기본 옵션을 프로젝트에서 한번 더 재 정의할 수 있다. 그리고 나면, 개발자들은 자신의 기본 옵션 집합을 지정할 수 있게 되며, 원하는 동작을 만들어내는 데에 필요한 코드 양을 줄일 수 있게 된다.

// 위에는 플러그인 코드가 존재하고 있다.

// Pulse 플러그인의 기본 옵션들을 재설정한다
jQuery.fn.pulse.defaults {
    speed: 
"fast",
    pulses: 
4,
    fadeLow: 
0.2,
    fadeHigh: 
1
};

// 이번 호출에서는 새로운 기본 옵션들을 사용할 것이다
jQuery('p').pulse();

논의

플러그인에서 옵션을 제공하는 것은 플러그인에 상당한 유연성을 추가할 수 있는 효과적인 방법이다. 풍부한 옵션 집합을 제공하는 플러그인은 더 광범위한 지지자들의 요구에 부합할 것이고, 다양한 작업들을 수행할 수 있을 것이며, 옵션을 제공하지 않는 플러그인보다 더 많은 인기를 얻게 될 것이다.

여러분의 플러그인에 기본 옵션 집합을 포함시키는 것은 플러그인을 사용하는 개발자들에게 플러그인이 구현된 방식에 따라 선택권과 유연성을 제공하는 또 다른 수단이 된다. 또한, 유리한 점으로는 플러그인이 항상 정의되어 있는 특정 옵션들에 의존적이기에 옵션이 전달되었는지 여부를 검사하기 위한 코드가 필요 없어지며 그에 따라 코드의 양이 감소된다는 것이다. 결국, 플러그인을 호출할 때마다 하나의 옵션이나 여러 개의 옵션, 심지어는 모든 옵션들을 재정의할 수 있는 능력을 플러그인 사용자들에게 제공하는 셈이다. 마지막으로, jQuery 개체에 기본 옵션을 추가하였기에, 옵션은 전역적으로 재정의될 수도 있다. 이는 새롭고 창의적인 방식으로 활용할 수 있는 또 다른 방안을 플러그인 사용자에게 제공하는 것이 된다.


authored by

  jinlee007
  2010-06-14(17:19)
캐릭 이미지
좋은 내용 감사합니다~ 하지만 아껴놨다 책으로 볼꺼예용 히히
  itist
  2010-06-16(17:17)
캐릭 이미지
감사합니다~~~
  marutori
  2010-06-18(10:27)
캐릭 이미지
이해하기 쉽고 좋은 강좌 감사합니다.
강좌가 너무 좋아서 다 보고 나서야 글 쓰게 되네요 ㅎ
이번에 나오는 책도 꼭 보겠습니다.
앞으로도 좋은 강좌 부탁드립니다 (_ _)

  goni0607
  2010-06-22(11:03)
캐릭 이미지
역쉬~ 깔끔하심당~ ^^
좋은 강좌 감사합니다~ 꾸뻑~


 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})