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

강좌 목록으로 돌아가기

필자의 잡담~

이전 강좌에 이어지는 내용입니다. 실전! jQuery CookBook 서적의 일부이며, 출판사의 허락하에 올리는 강좌입니다. ^^

플러그인에서 $ 단축표현 사용하기

문제점

다른 자바스크립트 라이브러리들은 $라는 단축표현을 사용한다. jQuery도 jQuery라고 명명된 기본 개체와 더불어 $를 유일한 단축 표현으로써 사용하고 있다. 여러분의 플러그인이 다른 플러그인이나 라이브러리들과 함께 사용되는 경우, 호환성을 유지할 수 있다고 어떻게 보장할 수 있을까?

해결 방법

jQuery는 jQuery 개체를 위한 사용자 정의 별칭으로써 $ 함수를 사용하고 있다. 하지만, jQuery가 호환성 모드로 설정되면, jQuery는 $을 정의하고 있는 다른 라이브러리에게로 $ 별칭에 대한 제어권을 양보한다. 플러그인도 동일한 기법을 사용하도록 작성될 수 있다.

다음과 같이 익명 함수로 여러분의 플러그인을 둘러싼 뒤 곧바로 그 함수를 실행하는 방식으로, $ 단축 표현을 플러그인 내부에서 유지되게 할 수 있다. 물론, 플러그인 외부 코드에서도 $를 사용할 수는 있지만, 플러그인 코드 내부에 있는 $만이 jQuery 개체를 참조할 것이다.

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

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

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

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

논의

익명 함수로 여러분의 코드를 둘러싸는(wrap) 것은 여러분의 플러그인 코드를 보다 광범위한 영역에서 훌륭하게 동작하게 할 뿐만 아니라 여러 기능들을 추가하기에 매우 직관적이며 간결한 방법이라 할 수 있다.

함수 정의의 시작 부분에 세미콜론(;)을 추가하는 것은 다른 개발자들이 개발한 라이브러리의 종료 부분에 세미콜론이 누락된 상황을 대비하기 위한 것이다. 자바스크립트 언어는 기본적으로 줄 바꿈(newline)을 통해 문장을 구분하곤 하지만, 많은 사용자들이 프로젝트에 있는 자바스크립트들을 단일 파일로 압축시키는 최소화 도구를 이용하는 편이다. 이러한 도구를 사용하게 되면 줄 끝이 제거되기에, 여러분의 코드가 바로 이후에 올 경우 오류가 발생할 가능성이 있다. 따라서, 처음 부분에 세미콜론을 추가하여 그러한 문제를 빠르고 간단하게 막을 수 있는 것이다.

이전의 코드는 괄호(()를 사용하여 곧바로 익명 함수에 대한 정의를 시작하고 있다. 그리고, 익명 함수 안에서는 jQuery 개체 대신에 사용할 변수를 인자로 전달하도록 함수를 정의하고 있는데, 그 변수로는 $를 사용하고 있다. 이와 같이 추가적인 익명 함수를 정의하는 것은 자바스크립트 언어가 영역을 처리하는 방식 때문에 필요한 것이기도 하다. 자바(Java)와 C++과 같은 전통적인 언어에서의 영역(scope)은 블록 문으로 제한되지만, 자바스크립트에서의 영역은 함수로서 형성된다. 그러므로, 이전의 코드에서 함수를 사용한 이유는 사실 플러그인 내부에 정의할 수 있는 영역의 경계를 설정하기 위한 것이다.

이어지는 코드는 새로운 버전의 플러그인 코드이며, 기존과 비교했을 경우 유일하게 변경된 것은 jQuery 개체 대신 단축 표현인 $를 사용한다는 것이다. 익명 함수를 사용해서 플러그인을 래핑하고, $ 변수의 영역을 제한하고 있기에, 이제 어떠한 다른 코드와의 충돌 없이 자유롭게 $를 사용할 수 있다.

마지막 줄은 각각 영역 함수를 닫는 괄호(})와 익명 함수를 닫는 괄호())로 마무리 되고 있으며, 익명 함수의 정의를 마친 후에 즉시 그를 실제로 호출하고 있다. 이는 함수 내에서 $로 명명되는 jQuery 개체를 전달하겠다고 익명 함수에게 통보하는 것과 같다. 끝으로, 자바스크립트 최소화와 압축으로 인한 문제를 미연에 방지하기 위해서 세미콜론(;)을 사용하여 문장을 끝내고 있다.

$ 단축 표현은 자바스크립트 코드를 작성하는 데 있어 대단히 유용하다. $ 단축 표현을 사용한다면 코드의 크기를 줄일 수 있을 뿐만 아니라 훌륭한 코드 설계를 이끌 수도 있다. 또한, $ 단축 표현은 대단히 대중적일 뿐만 아니라 잘 알려져 있다. 그래서, 많은 라이브러리들이 $ 단축 표현을 이용하고 있으며, 그들의 컨텍스트에 $ 단축 표현을 포함시키고 있다. 그렇기 때문에, $ 단축 표현에 대한 자신들만의 버전을 제공하는 각각의 라이브러리들을 사용하는 경우 서로 충돌이 날 가능성이 상당히 높다. 따라서, 익명 함수 내부에 여러분의 플러그인 코드를 래핑시키는 것은 $ 단축 표현을 사용하는 영역의 수준을 관리할 수 있게 하여, 다른 자바스크립트 라이브러리를 사용하는 경우에 발생할 수 있는 잠재적인 충돌을 감소시키는 효과가 있다.

익명 함수로 여러분의 플러그인을 래핑할 경우 얻을 수 있는 추가적인 효과는 클로저(closure)가 생성된다는 것이다. 자바스크립트에서 클로저를 사용하면, 여러분이 정의할 필요가 있는 모든 메서드 및 변수를 적절하게 네임스페이스화 하는데 도움을 줄 수 있으며, 더 나아가 변수명 또는 함수명이 다른 코드와 충돌할 가능성을 줄여준다.


플러그인에 전용(private) 함수 포함하기

문제점

플러그인 코드가 비대해져서, 체계적으로 코드를 구성해야 할 필요가 있다고 가정해 보자. 그 경우, 플러그인 외부에서는 접근할 수 없는 코드인 전용(private) 메서드를 어떻게 하면 구현할 수 있을까?

해결 방법

레시피 12.4에서부터 시작된 플러그인 설계 패턴을 이용하는 경우, 전용 함수는 일반적으로 플러그인을 감싸고 있는 익명 함수에 정의될 수 있다. 전용 함수가 익명 함수 안에 들어있기 때문에, 외부 코드에서는 전용 메서드를 확인할 수가 없다. 그러므로, 외부 코드에서는 jQuery 개체에 추가된 함수 또는 메서드만을 볼 수 있다.

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

    return this
.each(function() {
      doPulse($(this),opts);
    });
  
};

  function doPulse($obj,opts) { 
    for(var 0;i<opts.pulses;i++) {
      $obj.fadeTo(opts.speed,opts.fadeLow).fadeTo(opts.speed,opts.fadeHigh)
;
    
}

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

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

논의

현재 익명 함수로 둘러싸인 플러그인을 가지고 있기에, 플러그인 내부에 private 함수를 정의하는 것은 평소처럼 새로운 함수를 추가하는 것만큼이나 간단하다.

공개(public) 메서드와 전용(private) 메서드를 사용하여 플러그인을 그룹화하고 체계화하는 것은 사용자들과 플러그인 작성자들에게 많은 이점을 제공할 수 있다. 플러그인을 완성한 후 커뮤니티로부터 플러그인에 대한 피드백을 받음으로써, 플러그인 버전 별로 일관된 API를 제공하도록 공개 메서드와 전용 메서드의 사용을 조절할 수 있다. API의 일관성은 플러그인의 성공에 있어 중요한 요인 중 하나이다.

또한, 전용 메서드와 공개 메서드로 코드를 분해하는 것은 여러분의 플러그인의 규모가 커짐에 따라 코드 구성에 있어 중요한 이점을 가지게 된다. 잘 짜여진 코드는 읽기 쉽고, 유지 보수하기도 쉬우며, 테스트를 하기에도 용이하다. 그리고, 깔끔한 코드는 에러가 발생할 확률도 줄여줄 것이다.


Metadata 플러그인 지원하기

문제점

몇몇 플러그인들은 플러그인 메서드에 사용자 정의 옵션을 전달하기 위해서 Metadata 플러그인을 사용한다. Metadata 플러그인과 함께 구성되도록 하려면 어떻게 통합시켜야 할까?

해결 방법

Metadata 플러그인을 사용하려면, 우선 그 플러그인을 이용할 수 있는지를 검사한 다음에 메타데이터 매개변수들을 사용하여 플러그인 옵션들을 확장하면 된다. 즉, 플러그인을 호출하는 경우에는 기본 옵션을 제공하고, 실행 시에 마크업에 작성된 메타데이터를 사용하여 각 개체의 기본 옵션을 재정의할 수 있다는 것이다.

<!-- Metadata 플러그인을 포함시킨다 -->
<script type="text/javascript" src="metadata/jquery.metadata.js"></script>

<!-- 메타데이터를 포함하고 있는 마크업의 예제는 다음과 같다 -->
<p class="{pulses: 8, speed: 'slow'}">Starship Enterprise</p>
<p>Battlestar Galactica</p>
<p class="{speed: 100}">Serenity</p>


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

    return this
.each(function() {
      
// 특정 노드에 있는 메타데이터 요소를 병합한다
      var $.metadata ? $.extend({}, opts, $.metadata.get(this)) : opts;
      doPulse($(this),o);
    
});
  
};

  function 
doPulse($obj,opts) {
    
for(var 0;i<opts.pulses;i++) {
      $obj.fadeTo(opts.speed,opts.fadeLow).fadeTo(opts.speed,opts.fadeHigh)
;
    
}
    
    
// 원래의 상태로 재설정한다
    
$obj.fadeTo(opts.speed,1);
  
}

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

논의

Metadata 플러그인을 포함시키는 것은 jQuery 플러그인들이 어떻게 함께 사용될 수 있는지를 보여주는 좋은 예제라 할 수 있다. jQuery 플러그인 생태계는 광범위하기에, 얼마든지 다른 플러그인들을 사용할 수 있다.

Metadata 플러그인을 사용하기 위해서는, 먼저 여러분의 스크립트에 Metadata 플러그인을 포함시켜야만 한다. Metadata 플러그인은 구글 코드(Google Code)에 jQuery와 마찬가지로 호스팅되고 있다. Metadata 플러그인은 여러분의 HTML에 추가적으로 삽입한 데이터를 이용하여 동작한다. 이전의 코드에서는 항목의 class 요소 안에다가 요소에 특화된 옵션들을 넣고 있으며, 그를 메타데이터로 사용하고 있다.

옵션은 표준 JSON을 사용하여 HTML에 삽입되어 있으며, 모든 옵션들이 지정되거나 아예 지정되지 않을 수도 있다. 이는 사실 플러그인을 사용하는 개발자들이 결정할 일이다. Metadata 플러그인이 제공하는 몇몇 메서드와 옵션은 Metadata 플러그인 설명서 페이지(http://docs.jquery.com/Plugins/Metadata)에서 확인할 수 있다. 이전의 예제에서는, 먼저 Metadata 플러그인이 포함되어 있는지를 검사하고 있다. 그 이유는 이러한 추가적인 기능을 선택적으로 사용할 수 있도록 하기 위해서, 그리고 하위 호환성을 지원하기 위해서이다. Metadata 플러그인은 단일 요소에 대해 동작하기 때문에, 옵션을 처리하는 방법을 나누어 살펴봐야 한다. 첫 번째 단계는 플러그인이 호출된 시점에 제공된 옵션들을 사용하는 것이다. 이러한 옵션들은 기본 옵션들을 기반으로 하여 확장되며, 이는 이미 기존 플러그인에 반영이 되어 있다. 그리고, 두 번째 단계는 각각의 요소에 정의되어 있는 메타데이터를 사용하여 이러한 기본 옵션들을 확장하는 것이다. 그렇기에, 결국 우리에게 필요한 작업은 메타데이터 옵션을 사용하여 기본 옵션들을 확장하는 것이다.

Metadata 플러그인도 플러그인 자신의 옵션으로 지정할 수 있는 또 다른 옵션을 제공하고 있다. 사용자들에게 옵션을 제공한다는 것은 여러분의 플러그인이 jQuery 생태계의 훌륭한 일원이 되어가고 있다는 것을 보여주는 훌륭한 행동이다. 또한, Metadata 플러그인은 HTML 요소에 사용자 정의 옵션들을 삽입하는 방식을 사용하기에, 상대적으로 적은 코드를 작성하게 하는 좋은 방식이라 할 수 있다.


authored by

  itist
  2010-06-18(16:16)
캐릭 이미지
좋은 내용 감사합니다~~
  violeter33
  2010-06-22(09:25)
캐릭 이미지
좋은 내용 감사합니다~~

2등

  goni0607
  2010-06-22(11:09)
캐릭 이미지
역쉬~ 깔쌈~ 쌈빡~ 하네요~ ^^
감사합니다~


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

로딩 중입니다...

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