반응형

자바스크립트심화 2

JavaScript ✅ 이벤트 루프, Call Stack, Microtask

JavaScript는 싱글 스레드 언어입니다.그런데도 여러 작업을 동시에 처리하는 것처럼 보이는 이유는 이벤트 루프(Event Loop) 덕분입니다.📌 1. Call Stack (콜 스택)자바스크립트 엔진이 실행하는 함수 호출 기록 저장소LIFO(Last In First Out) 구조함수 실행 → 스택에 push, 종료 → pop function a() { console.log("a"); }function b() { a(); console.log("b"); }b();// 실행 순서: a → b📌 2. Web APIs & Task Queue브라우저는 JS 엔진 외에도 **Web APIs (DOM, Timer, HTTP 요청)**를 제공합니다.비동기 함수(setTimeout, fetch)는 Web API..

JavaScript, jQuery 2025.11.06

이벤트 위임 ✅ 성능 최적화와 실무 활용법

웹에서 이벤트를 처리할 때, 보통 요소마다 이벤트를 직접 등록합니다.하지만 요소가 많아질수록 메모리 낭비 + 성능 저하 문제가 생깁니다.이를 해결하는 방법이 바로 **이벤트 위임(Event Delegation)**입니다.🧠 1. 이벤트 위임이란?하위 요소에 이벤트를 직접 걸지 않고, 상위 요소에서 이벤트를 처리하는 기법 브라우저의 이벤트 버블링(Event Bubbling) 원리를 이용합니다.즉, 이벤트가 발생하면 부모 요소까지 이벤트가 전파되므로,부모에서 한 번만 이벤트를 등록해도 자식들의 이벤트를 감지할 수 있습니다.📌 2. 기본 예제 – 잘못된 방식 document.querySelectorAll(".item").forEach(item => { item.addEventListener("click"..

JavaScript, jQuery 2025.10.17
반응형