javascript 이벤트 루프 / 태스크 큐 / 콜 스택 알아보기

# 이벤트 루프(event loop)

• 이벤트 루프는 구현방식으로 인해 붙여진 이름이며, 이벤트 루프는 보통 아래 코드와 유사합니다.

while(queue.waitForMessage()) {
  queue.processNextMessage();
}

• 이벤트 루프는 javascript 실행환경인 브라우저에서 관리합니다.

 

 

# 이벤트 루프 동작방식

1. 비어있는 태스크 큐에 1개의 태스크가 들어온 경우, 이벤트 루프에 의해 태스크가 큐에서 pop 됩니다.
2. pop 된 태스크가 실행되면 javascript engine 에 의해 실행 가능한 코드범위로 실행 컨텍스트가 생성됩니다.
3. 생성된 실행 컨텍스트는 콜 스택(Call Stack) 에 push 되고 실행됩니다.
   • 코드 실행과정에서 생성되는 태스크는 태스큐 큐에 push 됩니다.
4. 코드 실행이 완료되면 실행 컨텍스트는 콜 스택에서 pop 되고, 콜 스택이 비어지면 이벤트 루프는 태스크 큐를 확인하여 실행할 태스크가 있는지 확인합니다. 
5. 1 ~ 4 과정을 계속 반복합니다.

 

 

# 태스크 큐(Task Queue)

• 태스크 큐는 생성된 태스크가 적재되는 큐 입니다.
• 태스크 큐는 javascript 실행환경인 브라우저에 위치합니다.
• 태스크는 Web API 를 사용하는 경우 생성됩니다.
  • 대표적인 Web API 에는 Window, Document, Event, XMLHttpRequest, Fetch 가 있습니다.

 

 

# 콜 스택(Call Stack)

• 실행 컨텍스트가 적재되는 스택 입니다.
• 콜 스택은 javascript engine 에 위치합니다.
• js 예제코드를 통한 콜 스택 설명은 '실행 컨텍스트 정리' 포스팅 글에서 확인 가능합니다.

실행 컨텍스트 (Execution context) 정리

 

 

 

# 참고문서 및 영상

• 동시성 모델과 이벤트 루프 - MDN web docs
• 자바스크립트와 이벤트 루프 - TOAST Meetup
• Philip Roberts: Help, I'm stuck in an event-loop.

동시성 모델과 이벤트 루프

자바스크립트와 이벤트 루프 : TOAST Meetup

Philip Roberts: Help, I’m stuck in an event-loop.