728x90 300x250 SMALL javaScript545 모듈화로 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. $() 직접 호출 방식이 왜 문제인가? jQuery에서 $(...) 직접 호출이 가져오는 문제들 jQuery를 사용하다 보면 습관처럼 $()를 바로 호출해버리는 경우가 많다.하지만 이 방식이 코드 곳곳에 무분별하게 퍼지게 되면 다음과 같은 문제가 생긴다. 1. 불필요한 DOM 탐색 증가$('.box') 같은 선택자가 여러 번 등장하면 매번 DOM을 새로 탐색한다. 퍼포먼스 저하로 이어질 수 있다.2. 이벤트 중복 바인딩 위험같은 요소에 중복으로 .on()이 걸리는 경우가 자주 발생한다.$('.btn').on('click', function() { alert('clicked!');});예를들어 이렇게 하면 .btn을 클릭할 때마다 실행되는 코드를 지정한다. 그런데 같은 요소에 이 코드를 여러번 실행하면 클릭할 때마다 여러 번 실행된다.$('... 2025. 4. 23. 이전 1 2 3 4 5 ··· 137 다음 728x90 반응형 LIST