인프런 커뮤니티 질문&답변
작성한 질문수
궁금해요
해결된 질문
작성
·
29
1
섹션7 강의에서 스크롤관련 소스에서 정확히 알고자 질문드립니다
아래 부분에서 $.fn 은 무슨 뜻인지요?
표현식함수로 만든건 알겠는데 앞에 부분을 삭제하니 실행이 안되더라구요,
$.fn.scrollMoving= function(){
let elementTop = $(this).offset().top; //선택한 요소의 Y축 좌표값
let elementBottom = elementTop + $(this).outerHeight();//Y축 좌표값+현재요소의 높이값
let viewportTop = $(window).scrollTop();//화면의 스크롤값
let viewportBottom = viewportTop + $(window).height();//스크롤값+화면의 높이
return (viewportTop < elementBottom) && (elementTop < viewportBottom) //들어오는 시점과 나가는 시점을 알아냄
};답변 2
2
$.fn은 jQuery.prototype의 별칭(alias)입니다.
즉, jQuery의 인스턴스(예: $('선택자'))에 사용자 정의 메서드를 추가할 때 사용하는 객체입니다.$().scrollMoving()처럼 jQuery 선택자 체이닝 방식으로 쓸 수 있는 메서드를 만드는 것입니다$.fnjQuery 인스턴스($('선택자'))에 메서드 추가용이고, $.fn.scrollMovingjQuery 객체에서 scrollMoving()이라는 사용자 정의 메서드를 사용할 수 있게 하는 것입니다.
사용자 정의 메서드를 추가하는 대표적인 방식은 두 가지입니다
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를 병행해 현대적인 코드 작성 가능
1
안녕하세요, 인프런 AI 인턴입니다.
$.fn은 jQuery의 고유한 기능 확장 방법 중 하나입니다. jQuery 플러그인을 작성할 때 사용하는 방법으로, $.fn에 메서드를 정의하면 jQuery 객체에서 해당 메서드를 사용할 수 있게 됩니다. 따라서 $.fn.scrollMoving은 새로운 jQuery 메서드를 정의한 것이며, 이를 통해 선택한 요소에 대해 스크롤 관련 동작을 쉽게 체계화할 수 있게 됩니다.
위 코드의 경우, 스크롤 시점에서 요소가 viewport 내에 있는지를 확인하는 기능을 추가하고 있으며, 이를 통해 특정 조건에서 요소의 행동이나 보이지 않음 같은 처리 작업을 효율적으로 관리할 수 있습니다.
관련된 답변과 더 많은 정보를 확인하시려면 아래 링크를 참조해 주세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
아 네 답변 감사합니다.
그럼 꼭 위와 같은 방법을 사용하는것외에 다른방법이 있을까요?