이벤트 루프: 비동기 프로그래밍의 핵심 이해

JavaScript는 단일 스레드(single-threaded)로 동작합니다. 이는 한 번에 한 작업만을 수행할 수 있음을 의미합니다. 그렇기 때문에 네트워크 요청, 파일 읽기, 사용자 입력과 같은 I/O 연산이 발생할 때, 프로그램은 기다리지 않고 계속해서 다음 작업을 수행해야 합니다. 이러한 비동기 작업을 효과적으로 처리하기 위해 이벤트 루프가 사용됩니다.

• Call Stack (호출 스택): 현재 실행 중인 함수의 호출 정보를 저장하는 스택입니다. 함수가 호출되면 해당 함수의 정보가 스택에 추가되고, 함수가 반환되면 스택에서 제거됩니다.

• Callback Queue (콜백 큐): 비동기 작업의 콜백 함수가 대기하는 대기열(queue)입니다. 비동기 작업이 완료되면 해당 콜백 함수가 콜백 큐에 추가됩니다.

• Event Loop (이벤트 루프): 호출 스택과 콜백 큐를 모니터링하며 호출 스택이 비어 있는 경우에만 콜백 큐에서 콜백 함수를 꺼내와 호출 스택으로 이동시키는 역할을 합니다.

우선 실행 결과를 살펴보면 아래와 같습니다.

1. 시작
2. 끝
3. 비동기 함수 완료
4. 콜백 함수 실행

프로그램이 시작되면 가장 먼저 '시작'이 출력됩니다. 이후 asyncFunction은 비동기 함수로, setTimeout 함수를 사용해 2초 후 작업을 완료하고 콜백 함수를 호출합니다. 하지만 콜백 함수의 실행을 기다리지 않고 다음 코드로 넘어갑니다. '끝'이 출력됩니다. 2초를 기다린 asyncFunction은 실행됩니다. 2초가 지난 후, setTimeout의 콜백 함수가 실행됩니다. '비동기 함수 완료'가 출력됩니다. 마지막으로 setTimeout의 콜백 함수에서 정의한 내용 '콜백 함수 실행'이 출력됩니다.

 

function asyncFunction(callback) {
    setTimeout(function() {
        console.log("비동기 함수 완료");
        callback(); 
    }, 2000);
}

console.log("시작");

asyncFunction(function() {
    console.log("콜백 함수 실행");
});

console.log("끝");

 

이벤트 루프의 동작 과정

1. 코드 실행이 시작되면서 초기 함수 호출이 스택에 추가됩니다.
2. 비동기 작업이 발생하면 해당 작업은 백그라운드에서 처리됩니다.
3. 비동기 작업이 완료되면 콜백 함수가 콜백 큐에 추가됩니다.
4. 이벤트 루프는 호출 스택이 비어 있는지 계속 확인하고, 호출 스택이 비어있다면 콜백 큐에서 콜백 함수를 꺼내 호출 스택에 추가합니다.
5. 호출 스택에 추가된 함수가 실행되면서 비동기 작업이 발생할 수 있고, 이 과정이 반복됩니다.