728x90 300x250 SMALL 제이쿼리7 즉시실행함수(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. Vanilla JS 반복문, 동적 요소 제어 리스트 항목 클릭 시 해당 항목 강조 하기 jQuery 항목1 항목2 항목3 Vanilla JS 항목1 항목2 항목3 1. document.querySeletorAll("#list li")#list안에 있는 모든 li 태그를 선택해서 NodeList로 반환 2. forEach(functio(item){...})모든 li요소마다 반복하면서 이벤트를 붙임 3. item.addEventListener("click", function(){...})각 아이템을 클릭할 때마다 실행되는 클릭 이벤트 핸들러 4. items.forEach(el => el.classList.remove("selected"))리스트 전체에서 selected클래스를 전부 제거(선택 해제).el은 각각의 를 의미items.forE.. 2025. 4. 20. jQuery 엘리먼트에 접근해서 스타일 지정하기 See the Pen XWMyxzx by kim oya (@ttuttu) on CodePen. 2021. 6. 20. 이전 1 2 다음 728x90 반응형 LIST