JavaScript 이벤트 루프: 비차단 비동기 실행
JavaScript 이벤트 루프는 콜 스택이 비어 있을 때 큐에서 콜백을 실행하여 비동기 작업을 관리하고 스레드 차단을 방지합니다.
Loop. Control structure repeating code until condition is met. Generated ELI5 content
graph LR
Center["JavaScript 이벤트 루프: 비차단 비동기 실행"]:::main
Pre_variable["variable"]:::pre --> Center
click Pre_variable "/terms/variable"
Rel_iteration["iteration"]:::related -.-> Center
click Rel_iteration "/terms/iteration"
Rel_recursion["recursion"]:::related -.-> Center
click Rel_recursion "/terms/recursion"
Rel_closed_loop_life_support["closed-loop-life-support"]:::related -.-> Center
click Rel_closed_loop_life_support "/terms/closed-loop-life-support"
classDef main fill:#7c3aed,stroke:#8b5cf6,stroke-width:2px,color:white,font-weight:bold,rx:5,ry:5;
classDef pre fill:#0f172a,stroke:#3b82f6,color:#94a3b8,rx:5,ry:5;
classDef child fill:#0f172a,stroke:#10b981,color:#94a3b8,rx:5,ry:5;
classDef related fill:#0f172a,stroke:#8b5cf6,stroke-dasharray: 5 5,color:#94a3b8,rx:5,ry:5;
linkStyle default stroke:#4b5563,stroke-width:2px;
🧒 5살도 이해할 수 있게 설명
[JavaScript](/ko/terms/javascript)를 한 번에 한 가지 일만 할 수 있는 요리사라고 생각해보세요. 케이크를 구워야 하는 긴 작업이 있다면, 그냥 서서 기다리지 않습니다. 오븐에 케이크를 넣고 타이머를 설정한 다음, 즉시 샐러드를 준비하기 시작합니다(다른 작업). 오븐 타이머가 울리면 요리사는 샐러드를 마친 후 케이크를 꺼내고 다른 일을 합니다. 이벤트 루프는 요리사가 이러한 '대기' 작업을 관리하는 시스템과 같아서, 다른 작업을 중단하지 않고 준비가 되었을 때 처리되도록 합니다.
🤓 Expert Deep Dive
JavaScript 이벤트 루프는 코드, 작업 및 이벤트의 실행을 조정하는 동시성 모델입니다. 콜 스택과 작업 큐를 지속적으로 모니터링합니다. 동기 코드는 콜 스택에서 직접 실행됩니다. 비동기 작업(예: setTimeout, Promises, I/O)은 실행을 관리하는 호스트 환경의 API로 위임됩니다. 비동기 작업이 완료되면 해당 콜백(또는 Promise의 이행 핸들러)이 해당 큐, 즉 작업 큐(setTimeout, DOM 이벤트와 같은 매크로 작업용) 또는 마이크로태스크 큐(Promises, queueMicrotask와 같은 마이크로 작업용)에 배치됩니다. 이벤트 루프의 핵심 기능은 콜 스택이 비어 있을 때 큐에서 작업을 꺼내 실행하는 것입니다. 마이크로태스크는 일반적으로 매크로태스크보다 먼저 처리됩니다. 구체적으로, 현재 매크로태스크가 완료된 후 다음 매크로태스크가 시작되기 전에 이벤트 루프는 사용 가능한 모든 마이크로태스크를 실행합니다. 이는 지연된 콜백보다 즉각적인 콜백(Promise 해결 등)을 우선시하여 다양한 JavaScript 환경에서 응답성과 비동기 작업의 효율적인 처리를 보장합니다.