728x90 300x250 SMALL javascript31 즉시실행함수(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. Vanilla JS 간단한 모달창 열기/닫기 jQuery모달 열기 × 모달 내용입니다. Vanilla JS모달 열기 × 모달 내용입니다. 모달 열기 × 모달 내용입니다. ">모달 열기×모달 내용입니다. 제이쿼리에서 fadeIn() / fadeOut()은 서서히 나타나고 사라지는 부드러운 효과가 나타난다,하지만 Vanilla JS 코드는 단순히 display:none 했다가 display:block 하는 효과로 애니메이션 효과가 없다.Vanilla JS로도 fadeIn / fadeOut 효과를 구현할 수 있지만 코드가 길고 번거롭다.바닐라 JS로 fadeIn / fadeOut 효과 만들기function fadeIn(el, duration = 400) { el.. 2025. 4. 22. 이전 1 2 3 4 ··· 8 다음 728x90 반응형 LIST