인프런 커뮤니티 질문&답변

아 네 답변 감사합니다.

그럼 꼭 위와 같은 방법을 사용하는것외에 다른방법이 있을까요?

사용자 정의 메서드를 추가하는 대표적인 방식은 두 가지입니다

1. $.fn 사용 (jQuery 인스턴스 메서드 추가)

• 이미 알고 계신 방식입니다.

• jQuery 객체에 체이닝을 가능하게 해주는 메서드를 만들 때 사용합니다.

$.fn.scrollMoving = function(options) {
  // $(this)는 jQuery 객체입니다.
  return this.each(function() {
    // 각 요소에 대해 실행
  });
};

• 사용:

$('.box').scrollMoving();

2. $.scrollMoving 사용 (정적 메서드)

• jQuery 인스턴스를 사용하는 게 아니라, 정적 함수로서 동작합니다.

• 일반적으로 플러그인이라기보다는 유틸리티 함수나 전역 기능에 가까운 형태입니다.

$.scrollMoving = function(target, speed) {
  $('html, body').animate({ scrollTop: $(target).offset().top }, speed);
};

• 사용:

$.scrollMoving('#section2', 500);

구분 $.fn.method$.method 대상 jQuery 객체 인스턴스 전역(정적) 함수 사용 예 $('.box').scrollMoving()$.scrollMoving('#target') 체이닝 O (가능) X (불가능) 주 사용 용도 요소에 대한 반복 작업 단발성 유틸리티 함수

• 선택자 기반 요소 조작이면 → $.fn

• 전역적인 기능 (예: alert 창, 스크롤 위치 반환, 단일 동작)이면 → $.

만약 두 가지 모두 제공하고 싶다면 이렇게도 가능합니다

(function($) {
  // 인스턴스 메서드
  $.fn.scrollMoving = function(speed) {
    return this.each(function() {
      $('html, body').animate({
        scrollTop: $(this).offset().top
      }, speed);
    });
  };

  // 정적 메서드
  $.scrollMoving = function(selector, speed) {
    $(selector).scrollMoving(speed);
  };

})(jQuery);

그 외에도 아래와 같은 방법이 있으니, 참고하세요.^^

• 플러그인 패턴: 설정과 구조화를 포함한 재사용 가능한 기능을 만들 때 사용

• UI 위젯 팩토리: 클래스 기반으로 위젯화하여 기능을 객체처럼 구성할 때 사용

• ES6 + jQuery : 모듈 기반 개발 방식과 jQuery를 병행해 현대적인 코드 작성 가능