내용이 안 보인다면 쿠키/캐시를 지우고 새로고침 하세요!
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌10 - jQuery - 2년 전 등록

제이쿼리 플러그인

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요! 이번 시간에는 제이쿼리 플러그인(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);

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

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

아직 댓글이 없습니다.