이벤트 루프(Event Loop)

Event Loop는 자바스크립트의 실행 모델 중 하나로, 자바스크립트에서 비동기 로직이 어떻게 다루는지를 설명하는 중요한 메커니즘이다.

호출 스택(Call Stack)

• 호출 스택은 자바스크립트가 함수들을 실행하는 순서를 관리하는 곳이다.
• 코드가 실행되면 함수가 호출 스택에 쌓이고, 실행이 끝나면 스택에서 제거된다.
• 자바스크립트는 단일 쓰레드 언어이므로 한 번에 하나의 함수만 실행할 수 있다.

백그라운드(Background)

• 백그라운드는 브라우저나 Node.js 환경에서 제공하는 API들로 구성된다.
• 비동기 작업을 처리하는 곳이다. 여기에는 setTimeout, HTTP 요청, 이벤트 리스너 등이 포함된다.
• 예를 들어, setTimeout 함수는 지정된 시간이 지난 후에 실행될 함수를 백그라운드에서 처리한다.

작업 큐(Task Queue 또는 Callback Queue)

• 작업 큐는 백그라운드에서 완료된 비동기 작업의 콜백 함수들이 대기하는 곳이다.
• 백그라운드 작업이 끝나면 해당 콜백 함수들이 작업 큐로 이동한다.
• 예를 들어, setTimeout의 시간이 끝나면 지정된 함수가 작업 큐로 이동한다.

이벤트 루프(Event Loop)

• 이벤트 루프는 호출 스택이 비어 있을 때 작업 큐에서 콜백 함수를 호출 스택으로 이동시키는 역할을 한다.
• 이를 통해 비동기 작업의 콜백 함수들이 실행되고 결과가 반환된다.
• 이벤트 루프는 계속해서 호출 스택과 작업 큐를 확인하여, 호출 스택이 비어 있는 경우 작업 큐에 있는 콜백 함수를 실행한다.

예시로 살펴보면 아래와 같다.

// 1. 호출 스택: main 함수가 호출되면 스택에 쌓입니다.
function main() {
    console.log('main 함수 시작');

    // main 함수에서 firstFunction을 호출하면 스택에 쌓입니다.
    firstFunction();

    // 2. 백그라운드: setTimeout을 호출하면 백그라운드에서 타이머가 작동합니다.
    setTimeout(callbackFunction, 1000);

    console.log('main 함수 끝');
}

function firstFunction() {
    console.log('firstFunction 실행');
    // firstFunction이 끝나면 스택에서 제거되고, 다시 main 함수로 돌아갑니다.
}

// 4. 이벤트 루프: 호출 스택이 비어 있으면 작업 큐에서 callbackFunction을 호출 스택으로 이동시킵니다.
function callbackFunction() {
    console.log('타이머 완료 후 callbackFunction 실행');
}

// main 함수 호출
main();

// 출력 순서:
// 1. main 함수 시작
// 2. firstFunction 실행
// 3. main 함수 끝
// (1초 후)
// 4. 타이머 완료 후 callbackFunction 실행

이러한 구성은 JavaScript의 단일 쓰레드 특성을 유지하면서도 비동기 작업을 처리할 수 있게 한다. 호출 스택이 비어있을 때마다 작업 큐의 콜백 함수를 순서대로 실행하여 비동기 작업을 처리하고, 이벤트 루프를 통해 지속적으로 이를 반복한다. 이 과정은 JavaScript의 비동기 작업을 효율적으로 다루며, 블로킹 없이 여러 작업을 동시에 처리할 수 있도록 한다.