[JavaScript] 이벤트 루프(Event Loop)

이벤트 루프란?

JavaScript의 런타임 모델은

코드 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있다.

이는 C 또는 Java 등 다른 언어가 가진 모델과 상당히 다르다.

 

JavaScript에서 비동기성(asynchronous)을 지원하기 위한 핵심 개념 중 하나로

JavaScript 엔진이 한 번에 하나씩만 실행할 수 있는 단일 스레드(single thread) 환경에서 비동기 코드를 처리하는 방법을 제공한다.

 

쉽게 말하면, 이벤트 루프는

1. 메인 스레드에서 실행되며
2. 비동기 작업을 감시하다
3. Call Stack이 비게 되면 Callback Queue에 있는 콜백 함수들을 Call Stack으로 이동시켜
4. 실행하는 역할

을 한다.

 

이해가 안가서 동작 방식을 한번 그려보았다.

function A() {
  setTimeOut(() => {
    console.log('A 출력')
  }, 2000)
}

function B() {
  console.log('B 출력')
}

A();
B();

위 코드를 실행하면

 

(사진 1)

(사진 1에 대한 설명)

 

1. A 함수가 먼저 실행 됐으므로 Call Stack에 들어온다.

들어와서 내부 로직을 처리하는데 setTimeOut()이라 Web APIs로 보내고 Call Stack에서 A 함수는 제거된다.

 

2. setTimeOut()은 Web APIs로 갔고, 2초 뒤에 콜백 함수를 Callback Queue에 넣을 것이다.

그동안 Call Stack이 비어, B 함수가 바로 추가되어 실행한다.

 

3. B 함수의 console.log('B 함수') 가 느리게 동작하고 있다고 가정하고, 

그동안 setTimeOut()의 2초가 지나 콜백 함수인 console.log('A 출력')이 Callback Queue에 들어가

Call Stack이 빌 때 까지 대기한다.

만약, Call Stack이 비게 된다면 Callback Queue의 대기중인 콜백 함수가 바로 Call Stack으로 추가되어 실행될거임

 

4. 드디어 console.log('B 함수')가 출력되고 B 함수는 동작을 마쳤으므로 Call Stack에서 제거된다.

 

5. 비로소 console.log('A 출력')이 Call Stack에 추가된 후 실행된다.

그 이후 마찬가지로 Call Stack에서 제거된다.

 

* 이해한걸 그림으로 표현해봤는데 만약 잘못된 부분이 있으면 피드백 부탁드립니다.

 

논 블로킹?

논 블로킹(non-blocking)은 비동기 작업이 완료될 때 까지 다른 작업을 처리하는 방식을 말한다.

위에서 내가 적은 예시 상황을 토대로 얘기하자면

A 함수의 setTimeOut이 Web APIs에서 2초 동안 대기할 때

Call Stack이 비어 B 함수가 실행되는 동작 방식이 논 블로킹 방식이라고 볼 수 있다.

 

참고로 다른 많은 언어와 달리 JavaScript는 절대 블로킹 연산을 하지 않는다.

블로킹 방식은 작업이 완료될 때 까지 대기하며 대기 시간동안 자원을 낭비한다.

블로킹 방식이었다면 setTimeOut()에 의해 2초 동안 기다리는 동안 B 함수도 같이 기다리고

2초 후 A 함수가 끝났을 때 B 함수가 실행됐을 것이다.

 

논 블로킹은 이벤트 루프 모델의 흥미로운 특징으로, 대부분의 입출력 처리가 이벤트와 콜백을 통해 수행되므로

애플리케이션이 질의나 요청의 반환을 대기 중이더라도 여전히 사용자 입력 등 다른 것들을 처리할 수 있다.

 

정리

내가 만약 3살짜리한테 이벤트 루프와 논 블로킹을 설명해야 되는 상황이라면

이렇게 설명할 것 같다.

 

컴퓨터가 있고

누나, 남동생이 있는데

 

누나가 컴퓨터로 게임을 막 하다가 화장실을 간 사이에

동생이 슬쩍 앉아서 메일 하나만 보내고 일어나면

누나가 다시 화장실에서 돌아와 앉아 게임을 하는

이게 바로 논 블로킹 동작 방식

 

근데 이제 이걸 누나, 동생이 자기 뇌로 생각해서 하는게 아니라

사실 둘 다 로봇이었음. 

그래서 엄마가 조종해서 움직이는 로봇이었다고 했을 때

엄마가 바로 이벤트 루프라고 볼 수 있다.

 

엄.. 이게 맞나?

 

추가 정보

다른 이벤트 루프 관련 포스팅 모두 아래 영상을 참고하여 만든거라고 하니 시청하자.

https://www.youtube.com/watch?v=8aGhZQkoFbQ 

 

+ Node.js에서의 이벤트 루프

https://nodejs.org/ko/docs/guides/event-loop-timers-and-nexttick

The Node.js Event Loop, Timers, and process.nextTick() | Node.js