JavaScript 비동기 처리 완전 정복: 이벤트 루프와 콜 스택 이해하기

 

JavaScript 개발자라면 꼭 알아야 할 개념 중 하나가 바로 이벤트 루프와 콜 스택입니다. 이 두 가지를 이해하면 JavaScript의 비동기 동작과 성능 최적화에 큰 도움이 됩니다.

 

이벤트 루프와 콜 스택: 핵심 개념

1. 콜 스택(Call Stack)

콜 스택은 함수 호출을 관리하는 LIFO(Last In, First Out) 구조입니다. 함수가 호출되면 스택에 쌓이고, 실행이 완료되면 스택에서 제거됩니다.

 

1. 이벤트 루프(Event Loop)

이벤트 루프는 콜 스택과 태스크 큐(Task Queue)를 모니터링하여 비동기 작업을 처리합니다. 콜 스택이 비어 있으면, 이벤트 루프는 태스크 큐에서 작업을 꺼내어 콜 스택에 넣습니다.

 

비동기 동작의 이해

JavaScript는 단일 스레드 언어로, 동시에 하나의 작업만 처리할 수 있습니다. 그러나 비동기 처리를 통해 동시에 여러 작업이 실행되는 것처럼 보이게 합니다. 이는 주로 이벤트 루프와 콜 스택 덕분입니다.

 

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 1000);

console.log('End');

// Start
// End
// Timeout

 

이 코드의 실행 순서를 살펴보겠습니다.

(콜 스택이 비어 있을 때 이벤트 루프가 태스크 큐에서 작업을 가져와 실행한다)

1. console.log('Start')가 콜 스택에 추가되고 실행됩니다. 결과적으로 "Start"가 출력됩니다.

2. setTimeout 함수가 호출되며, 1초 후 실행될 콜백 함수가 태스크 큐에 추가됩니다.

3. console.log('End')가 콜 스택에 추가되고 실행됩니다. 결과적으로 "End"가 출력됩니다.

4. 콜 스택이 비어 있으면, 1초 후에 태스크 큐에서 콜백 함수가 콜 스택으로 이동하여 실행됩니다. 결과적으로 "Timeout"이 출력됩니다.