jQuery 플러그인 패턴 템플릿: pluginName 기본 구조 완벽 정리
jQuery를 사용하다 보면 공통 기능을 플러그인으로 만들어서 재사용하고 싶을 때가 많습니다. 이때 매번 구조를 처음부터 짜기보다는, 플러그인 패턴 템플릿을 하나 만들어 두면 매우 편리합니다.
이 글에서는 아래와 같은 pluginName jQuery 플러그인 템플릿 코드를 기반으로,
각 부분이 어떤 역할을 하는지, 어떻게 수정해서 나만의 플러그인을 만들 수 있는지
SEO 친화적인 설명과 함께 정리합니다.
jQuery 플러그인 기본 템플릿 코드
(function($) {
// 플러그명 (생성자 역할)
$.pluginName = function(element, options) {
// 기본 옵션
var defaults = {
foo: 'bar',
onFoo: function() {}
};
var plugin = this;
// 플러그인 설정 객체
plugin.settings = {};
var $element = $(element),
element = element;
// 초기화
plugin.init = function() {
// 사용자 옵션과 기본 옵션 병합
plugin.settings = $.extend({}, defaults, options);
};
// public 메서드 (외부에서 호출 가능)
plugin.foo_public_method = function() {
// 코드 입력
};
// private 메서드 (내부에서만 사용)
var foo_private_method = function() {
// 코드 입력
};
// 플러그인 초기화 호출
plugin.init();
};
// jQuery.fn 확장: 실제로 $(selector).pluginName(...) 형태로 사용
$.fn.pluginName = function(options) {
// 선택된 모든 요소에 대해 플러그인 적용
return this.each(function() {
// 아직 플러그인이 붙지 않았다면 초기화
if (undefined == $(this).data('pluginName')) {
// 새로운 플러그인 인스턴스 생성
var plugin = new $.pluginName(this, options);
// jQuery 데이터 공간에 인스턴스 저장
// 나중에 $(element).data('pluginName') 형태로 접근 가능
$(this).data('pluginName', plugin);
}
});
};
})(jQuery);코드 구조 한눈에 보기
이 템플릿은 jQuery 플러그인을 만들 때 많이 사용하는 즉시 실행 함수(IIFE) 패턴과 생성자 + jQuery.fn 확장 방식을 그대로 담고 있습니다. 각 부분을 이해해 두면, 이후 슬라이더, 모달, 탭 UI 같은 복잡한 UI도 일관된 방식으로 플러그인화할 수 있습니다.
1. IIFE 패턴으로 전역 변수 충돌 방지
(function($) {
// 플러그인 코드
})(jQuery);
(function($){ ... })(jQuery); 구조는 jQuery를 $로 전달하면서도
전역 공간을 오염시키지 않는 즉시 실행 함수 패턴입니다.
다른 라이브러리와 함께 사용할 때도 안전하게 $ 별칭을 사용할 수 있습니다.
2. $.pluginName: 플러그인 생성자 역할
$.pluginName = function(element, options) { ... };이 부분은 플러그인 인스턴스 하나를 표현하는 생성자라고 보면 됩니다. 각 DOM 요소마다 하나의 인스턴스가 생성되고, 그 인스턴스가 내부 상태와 메서드를 관리합니다.
element: 플러그인이 적용될 실제 DOM 요소options: 사용자가 전달한 옵션 객체plugin.settings: 기본 옵션 + 사용자 옵션이 합쳐진 최종 설정값
3. defaults와 $.extend()로 옵션 병합
var defaults = {
foo: 'bar',
onFoo: function() {}
};
plugin.settings = $.extend({}, defaults, options);
defaults 객체에는 플러그인에서 사용할 기본 옵션값을 정의합니다.
$.extend({}, defaults, options)를 통해
사용자 정의 옵션이 우선 적용된 최종 설정 객체를 만들 수 있습니다.
예를 들어, 플러그인을 사용할 때 다음과 같이 옵션을 넘기면:
$('.item').pluginName({
foo: 'custom',
onFoo: function() {
console.log('foo 이벤트 발생!');
}
});
foo 값과 onFoo 콜백이 기본값을 덮어쓰게 됩니다.
4. public 메서드 vs private 메서드
// public 메서드
plugin.foo_public_method = function() {
// 코드 입력
};
// private 메서드
var foo_private_method = function() {
// 코드 입력
};public 메서드는 플러그인 인스턴스 밖에서도 호출할 수 있는 함수입니다. 예를 들어 나중에 다음처럼 접근할 수 있습니다.
var instance = $('.item').data('pluginName');
instance.foo_public_method();반면 private 메서드는 생성자 내부에서만 사용되는 유틸리티 함수처럼 동작합니다. 외부에서 직접 호출할 필요가 없는 로직은 private로 감추는 것이 깔끔합니다.
5. $.fn.pluginName: jQuery 체이닝 지원
$.fn.pluginName = function(options) {
return this.each(function() {
if (undefined == $(this).data('pluginName')) {
var plugin = new $.pluginName(this, options);
$(this).data('pluginName', plugin);
}
});
};
이 부분이 실제로 $('.selector').pluginName({...}) 형태로
플러그인을 쓸 수 있게 해 주는 핵심입니다.
this.each(): 선택된 모든 요소에 플러그인을 반복 적용$(this).data('pluginName'): 요소별로 플러그인 인스턴스를 저장/재사용- 이미 인스턴스가 있으면 다시 생성하지 않아 중복 초기화를 방지
이렇게 만들어 두면, jQuery 특유의 체이닝(chaining)도 자연스럽게 지원됩니다.
실제 사용 예제
위 템플릿에서 pluginName만 바꾸고, 필요한 옵션과 메서드를 추가하면
바로 실전 프로젝트에서 사용할 수 있습니다.
$(function() {
// 예: 커스텀 jQuery 플러그인 호출
$('.my-element').pluginName({
foo: 'custom value',
onFoo: function() {
console.log('onFoo 콜백 실행');
}
});
});이후 특정 시점에서 플러그인 인스턴스를 직접 사용하고 싶다면 다음처럼 접근할 수 있습니다.
var plugin = $('.my-element').data('pluginName');
plugin.foo_public_method();정리: jQuery 플러그인 패턴을 템플릿으로 만들어 두자
jQuery 플러그인을 매번 처음부터 설계하는 대신, 위와 같은 pluginName 템플릿을 프로젝트 공통 코드로 두고 이름과 옵션, 메서드만 바꿔서 사용하는 방식이 가장 효율적입니다.
- 전역 변수 오염 없이 안전한 IIFE 구조
- 기본 옵션 + 사용자 옵션 병합 패턴
- public / private 메서드 분리
$.fn확장과data()저장 패턴
이 패턴만 익혀 두면, jQuery 플러그인 만들기가 훨씬 쉬워지고 유지보수도 편해집니다. 필요에 따라 네임스페이스를 나누거나, ES6 모듈과 함께 섞어서 사용하는 등의 확장도 가능하니, 먼저 이 기본 구조를 프로젝트에 맞게 커스터마이징해 보세요.
댓글
댓글 쓰기