728x90 300x250 SMALL javaScript/jQuery153 jQuery 유지보수를 위한 4단계 리팩토링 전략 jQuery로 작성된 코드가 어떻게 복잡해지고, 그걸 어떻게 구조화하면 좋을지 단계별로 정리해보자 1단계 : 무분별한 직접 호출 방식// index.js$('.tab').on('click', function() { $('.tab-content').hide(); $('.tab-content').eq($(this).index()).show();}); 같은 코드가 다른 곳에도 중복될 가능성 있음.tab이 존재하지 않아도 실행됨이벤트 중복 바인딩 위험2단계 : 네임스페이스 적용var MyApp = MyApp || {};MyApp.Tab = { bindEvents: function() { $('.tab').on('click', function() { $('.tab-content').hide().. 2025. 4. 30. 모듈화로 jQuery 코드 구조 정리하기 모듈화는 기능별로 코드를 나누고, 각 기능을 파일 또는 객체 단위로 구성하는 전략이다.예) tab.js, modal.js, form.js 식으로 나눔 var MyApp = MyApp || {};MyApp.Tab = { init: function() { if (!$('.tab').length) return; this.bind(); }, bind: function() { $('.tab').on('click', function() { // 탭 기능 }); }}; 메인 진입 파일에서는 이렇게 구성$(function() { MyApp.Tab.init(); MyApp.Modal.init();}); 유지보수 용이재사용 가능팀 개발에 적합한 구조각 기능마다 init(), bin.. 2025. 4. 26. 즉시실행함수(IIFE)로 스크립트 충돌 방지하기 + 조건 검사 모든 페이지에서 같은 jQuery 코드가 실행되면 오류가 발생하거나, 의미 없는 DOM 탐색이 늘어날 수 잇다. 이를 막기 위한 좋은 방법이 즉시 실행 함수(IIFE)와 조건검사이다. 즉시실행함수(IIFE)란?(function() { // 여기에 코드를 넣으면 // 즉시 실행됨!})(); 바로 실행되는 익명 함수변수를 전역에 퍼뜨리지 않음(보안, 충돌 방지)$나 document, window 등의 범위를 고정할 수 있다.jQuery에서는 보통 이렇게 쓴다.(function($) { // 여긴 $가 jQuery로 고정됨 $(function() { // DOM ready });})(jQuery); 즉시실행함수(IIFE) + 조건검사(function($) { var TabModule = { .. 2025. 4. 25. 네임스페이스로 jQuery 코드 구조화하는 방법 JavaScript에서 네임스페이스는 전역 공간에 변수나 함수가 남발되지 않도록 기능 단위로 코드를 그룹화하는 방법이다. 네임스페이스는 MyApp.Tab, MyApp.Modal처럼 공간을 나눠 전역 충돌을 막는 방식으로예를 들어 다음처럼 작성할 수 있다.// 전역 네임스페이스 생성var MyApp = MyApp || {}; //MyApp이라는 객체가 이미 존재하면 그걸 사용 없다면 빈 객체로 초기화//이 구문이 없으면 나중에 같은 네임스페이스를 쓰려 할 때 덮어써버리는 문제가 생길 수 있다.MyApp.UI = { init: function() { this.bindEvents(); }, bindEvents: function() { const self = this; if ($('.btn.. 2025. 4. 24. 이전 1 2 3 4 ··· 39 다음 728x90 반응형 LIST