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();
      $('.tab-content').eq($(this).index()).show();
    });
  }
};

$(function() {
  MyApp.Tab.bindEvents();
});

 

• MyApp.Tab 내부로 함수가 정리됨
• 전역 공간 오염 방지

---

3단계: 즉시실행함수로 격리 + 조건검사 추가

(function($) {
  var Tab = {
    init: function() {
      if (!$('.tab').length) return;
      this.bindEvents();
    },
    bindEvents: function() {
      $('.tab').on('click', function() {
        $('.tab-content').hide();
        $('.tab-content').eq($(this).index()).show();
      });
    }
  };

  $(function() {
    Tab.init();
  });
})(jQuery);

 

• $는 jQuery로 고정됨(라이브러리 충돌 방지)
• .tab 존재 여부 확인
• Tab 객체 내부에서만 코드 실행됨

---

4단계 : 네임스페이스 + 즉시실행 + 모듈화까지

 

tab.js

var MyApp = MyApp || {};

(function($) {
  MyApp.Tab = {
    init: function() {
      if (!$('.tab').length) return;
      this.bindEvents();
    },
    bindEvents: function() {
      $('.tab').on('click', function() {
        $('.tab-content').hide();
        $('.tab-content').eq($(this).index()).show();
      });
    }
  };
})(jQuery);

 

main.js

$(function() { //DOM 준비 후 실행
  MyApp.Tab.init();
});

 

• 기능별 파일로 분리(tab.js, modal.js 등)
• 모듈처럼 구조화
• 페이지 내 DOM 구조에 따라 안전하게 동작

---

 

기존 방식과 구조화된 방식 차이

항목	기존 방식	구조화된 방식
전역 사용	많음($(...), 변수 등)	최소화(MyApp.UI, IIFE 등)
DOM 탐색	중복 탐색 가능성 많음	필요할 때만 탐색
유지보수	어려움	명확한 책임 분리
충돌 가능성	높음	거의 없음