jQuery 유지보수성과 재사용성

🧩 유지보수 가능한 jQuery 코드 구조

jQuery로 만든 프로젝트는 작아 보이지만 기능이 늘어날수록 점점 복잡해지고 스파게티 코드가 되기 쉽습니다.
이 강좌에서는 유지보수성과 재사용성을 높이기 위한 jQuery 코드 구조화 방법을 배워봅니다.

📁 1. 파일 구조 분리

HTML, CSS, JS는 각자 다른 파일로 나누어 관리하세요.

project/
 ├ index.html
 ├ css/
 │   └ style.css
 └ js/
     ├ app.js
     └ modules/
         ├ todo.js
         └ utils.js
  

📦 2. 네임스페이스 패턴

global 객체 오염을 막기 위해 네임스페이스로 감쌉니다.

// app.js
var MyApp = MyApp || {};

MyApp.todo = {
  init: function () {
    this.bindEvents();
  },
  bindEvents: function () {
    $('#addBtn').on('click', this.addItem);
  },
  addItem: function () {
    const value = $('#todoInput').val();
    if (value) {
      $('#todoList').append(`<li>${value}</li>`);
    }
  }
};

$(function () {
  MyApp.todo.init();
});
  

이런 방식은 여러 모듈을 네임스페이스에 묶어 관리하기 좋습니다.

🔁 3. 이벤트 위임

동적으로 생성되는 요소를 다룰 땐 이벤트 위임을 사용하세요.

$('#todoList').on('click', 'li', function () {
  $(this).toggleClass('done');
});
  

장점: 나중에 추가된 항목에도 자동으로 이벤트가 적용됩니다.

📦 4. 모듈 분리

기능별로 js 파일을 분리하면 유지보수가 쉬워집니다.

// modules/utils.js
var MyApp = MyApp || {};
MyApp.utils = {
  isEmpty: function (val) {
    return !val || val.trim() === '';
  }
};
  

// app.js
$('#addBtn').on('click', function () {
  const val = $('#todoInput').val();
  if (MyApp.utils.isEmpty(val)) return;
  $('#todoList').append(`<li>${val}</li>`);
});
  

🧼 5. 초기화 패턴

초기화 코드를 정리하면 협업과 유지보수에 유리합니다.

MyApp.main = {
  init: function () {
    MyApp.todo.init();
    MyApp.chat?.init(); // 다른 모듈과도 연동 가능
  }
};

$(function () {
  MyApp.main.init();
});
  

🧠 요약

• 전역 변수 사용 최소화 – 네임스페이스 활용
• 기능별 파일 분리 – 모듈화 구조 적용
• 이벤트 위임 – 효율적인 이벤트 관리
• 초기화 구조화 – 명확한 시작점 설정

위와 같은 구조를 적용하면 jQuery로 만든 프로젝트도 충분히 확장 가능하고 유지보수하기 쉬운 아키텍처를 가질 수 있습니다.