ZeroCho Blog

안녕하세요! 이번 시간에는 제이쿼리 플러그인(Plugin)에 대해 알아보겠습니다. 간단한 플러그인도 같이 만들어보죠.

플러그인

플러그인이란 간단하게 기존의 기능을 확장할 수 있게 도와주는 프로그램입니다. jQuery 플러그인은 주로 메소드로 많이 사용됩니다. 예를 들어 zerofy라는 플러그인을 만들었다면, $('#zero').zerofy()라고 쓸 수 있게 되는거죠.

유명한 제이쿼리 플러그인으로는 modal이나 datepicker같은 게 있습니다. modal은 팝업창 같은 것을 띄워주고, datepicker는 날짜를 선택할 수 있는 창을 띄워줍니다. 이런 플러그인들은 엄청 복잡하죠. 하지만 굳이 복잡한 것을 생각하실 필요는 없습니다. 자주 사용될 만한 것들을 플러그인으로 만들어두면 두고두고 사용할 수 있습니다. 남들도 자신의 플러그인을 사용한다면 뿌듯하겠죠?

간단하게 zerofy 플러그인을 만들어보면서 플러그인의 원리에 대해 알고가죠. zerofy는 태그의 내용물을 0으로 만들어버리는 쓸모없으면서도 무시무시한 플러그인입니다. 잘못 사용하면 웹페이지에 0밖에 안 뜰 수도 있어요.

$.fn.zerofy = function() {
  this.html('0');
  return this;
};

위와 같이 간단하게 만들었습니다. fn이 뭔지는 제이쿼리 분석 강좌에 나와 있습니다. this는 zerofy()가 붙을 태그를 가리킵니다. html('0');으로 내용물을 0으로 만들어버렸습니다. 마지막에 return this;를 해주는 이유는 메소드 체이닝을 가능케하기 위해서입니다. $('#zero').zerofy().addClass('hero') 이렇게 연달아 쓸 수 있습니다.

하지만 위의 방법은 하나의 태그밖에 바꾸지 못합니다. 제이쿼리는 여러 개의 태그를 동시에 선택하는 경우가 많기 때문에 그에 대한 대비를 해주는 게 좋겠죠.

$.fn.zerofy = function() {
  return this.each(function() {
    $(this).html('0');
  });
};

위와 같이 this.each(func);를 해주면 됩니다. each는 여러 태그를 선택했을 경우 각각에 대해 반복문을 돌며 동작을 수행합니다. return this.each를 했기 때문에 각각의 this가 return되어 메소드 체이닝을 할 수 있습니다.

마지막으로 옵션을 주는 방법을 알아보겠습니다. 옵션으로 0을 몇 번이나 표시할 지 주어보겠습니다.

$.fn.zerofy = function(options) {
  var settings = $.extend({
    repeat: 1 // 기본 설정
  }, options);
  var zeros = '0'.repeat(settings.repeat);
  return this.each(function() {
    $(this).html(zeros);
  });
};
$('#zero').zerofy({ repeat: 5 }); // 00000

안에 settings 객체를 만들었습니다. $.extend로 기본 설정과 주어진 options 객체를 합칩니다. 옵션을 주지 않으면 기본 설정인 repeat: 1이 사용됩니다. '0'.repeat()을 했는데 이 메소드는 ES2015에 추가된 메소드입니다. 만약 브라우저가 ES2015를 지원하지 않는다면 따로 만드셔야 합니다.

혹시나 $가 다른 변수와 겹친다면 다음과 같이 하면 됩니다. 클로저 방식입니다. 클로저이기 때문에 비밀 변수를 사용할 수 있습니다. 이건 활용하기 나름입니다.

(function($) {
  var default =  {
    repeat: 1 // 기본 설정
  };
  $.fn.zerofy = function(options) {
    var settings = $.extend(default, options);
    var zeros = '0'.repeat(settings.repeat);
    return this.each(function() {
      $(this).html(zeros);
    });
  };
})(jQuery);

다음 시간에는 쉬어가는 시간으로 제이쿼리가 진짜 필요한지에 대해 말을 해볼까 합니다.