📚 학습 범위

이벤트 루프란 무엇인가?

📆 학습 날짜

2023 / 12 / 22 (금)

👨🏻‍💻 학습 후 알게 된 내용

🎯 이벤트 루프란 무엇인가

이벤트 루프란 자바스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기 위해 만들어진 장치라고한다.

🎯 호출 스택(call stack)과 이벤트 루프

호출 스택(call stack)은 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택이라고한다.

<script>
function bar() {
	console.log('bar')
}

function baz() {
	console.log('baz')
}

function foo() {
	console.log('foo')
    bar()
    baz()
}

foo()
</script>

위 코드는 foo를 호출하고, 내부에서 bar,baz를 순차적으로 호출하는 구조로 돼 있다.
이 코드들은 대략 다음과 같은 순서로 호출 스택에 쌓이고 비워지게 된다.

1️⃣ foo()가 호출 스택에 먼저 들어감
2️⃣ foo() 내부에서 console.log가 존재하므로 호출 스택에 들어감
3️⃣ 2번 실행이 완료되면 다음 코드로 넘어감(아직 foo()는 존재함)
4️⃣ bar()가 호출스택에 들어감
5️⃣ bar()내부에 console.log가 존재하므로 호출 스택에 들어감
6️⃣ 5번 실행이 완료되면 다음 코드로 넘어감(아직 foo() , bar() 존재함)
7️⃣ 더 이상bar()에 남은 것이 없으므로 호출 스택에서 제거됌(아직 foo()는 존재)
8️⃣ baz()가 호출 스택에 들어감
9️⃣ baz() 내부에 console.log가 존재하므로 호출 스택에 들어감
🔟 9번이 실행 완료되면 다음코드로 넘어감(아직 foo() , baz() 존재함)
1️⃣1️⃣ 더이상 baz()에 남은 것이 없으므로 호출 스택에서 제거됌(아직 foo()는 존재)
1️⃣2️⃣ 더이상 foo()에 남은 것이 없으므로 호출 스택에서 제거됌
1️⃣3️⃣ 더이상 호출 스택에 존재하는게 없음 

호출 스택이 비어 있는지 여부를 확인 하는 것이 바로 이벤트 루프라고한다.
이벤트 루프는 단순히 이벤트 루프만의 단일 스레드 내부에서 이 호출 슽택 내부에 수행해야 할 작업이 있는지 확인하고, 수행해야 할 코드가 있다면 자바스크립트 엔진을 이용해 실행한다. 코드를 실행하는 것과 호출 스택이 비어있는지 확인하는 것 모두가 단일 스레드에서 일어난다고한다. 즉, 두 작업은 동시에 일어날 수 없으며 스레드에서 순차적으로 실행된다고한다.

그렇다면 비동기 작업은 어떻게 실행되는 것일까?

<script>
function bar() {
	console.log('bar')
}

function baz() {
	console.log('baz')
}

function foo() {
	console.log('foo')
	setTimeout(bar(),0) // setTimeout만 추가했다.
    baz()
}

foo()
</script>

자바스크립트 코드를 작성해 본 개발자라면 앞선 예제와 다르게 setTimeout으로 인해 foo ,baz, bar순으로 출력되는 것을 알고 있을것이다.
실제로 호출 스택 내부에서는 다음과 같은 일이 발생한다.

1️⃣ foo()가 호출 스택에 먼저 들어감
2️⃣ foo() 내부에서 console.log가 존재하므로 호출 스택에 들어감
3️⃣ 2번 실행이 완료되면 다음 코드로 넘어감(아직 foo()는 존재함)
4️⃣ setTimeout(bar(),0)가 호출스택에 들어감
5️⃣ 4번에 대해 타이머 이벤트가 실행 되며 태스크 큐로 들어가고,그 대신 바로 스택에서 제거된다.
6️⃣ baz()가 호출 스택에 들어감
7️⃣ baz() 내부에 console.log가 존재하므로 호출 스택에 들어감
8️⃣ 7번 실행이 완료되면 다음 코드로 넘어감(아직 foo(),baz()는 존재함)
9️⃣ 더아상 baz()에 남은 것이 없으므로 호출 스택에서 제거(아직 foo()는 존재함)
🔟 더 이상 foo()에 남은 것이 없으므로 호출 스택에서 제거함
1️⃣1️⃣ 더이상 호출 스택에 존재하는게 없음 
1️⃣2️⃣ 이벤트 루프가 호출 스택이 비워져 있다는 것을 확인하고 이후에 태스크 큐를 확인하니 4번에 들어갔던 내용이 있어 bar()를 호출 스택에 넣음
1️⃣3️⃣bar() 내부에 console.log가 존재하므로 호출 스택에 들어감
1️⃣4️⃣ 13번 실행이 끝나면 다음 코드로 넘어감 (아직 bar()존재)
1️⃣5️⃣ 더이상 bar()에 남은 것이 없으므로 호출 스택에서 제거함

위 코드를 보면 ,setTimeot(()=>{},0)이 정확하게 0초 뒤에 실행된다는 것을 보장하지 못한다는 것을 이해하게 될것이다.

여기서부터는 태스크 큐라는 새로운 개념이 등장한다.
태스크 큐란 실행해야 할 태스크의 집합을 의미한다.
이벤트 루프는 이러한 태스크 큐를 한 개 이상 가지고 있다.
그리고 이름과는 다르게 태스크 큐는 자료 구조의 큐가 아니라 set 형태를 지니고 있다.
그 이유는 선택된 큐 중에서 실행 가능한 가장 오래된 태스크 큐를 가져와야 하기 때문이다. 자료구조인 큐는 무조건 앞에 있는 것을 FIFO형식으로 꺼내와야 하지만 태스크 큐는 그렇지 않다. 태스크 큐에서 의미하는 실행해야 할 태스크 라는 것은 비동기 함수의 콜백 함수나 이벤트 핸들러 등을 의미한다.

즉, 이벤트 루프의 역할은 호출 스택에 실행 중인 코드가 있는지
태스크 큐에 대기중인 함수가 있는지 반복해서 확인하는 역할을 한다고한다.

호출 스택이 비었다면 태스크 큐에서 대기 중인 작업이 있는지 확인하고
작업을 실행 가능한 오래된 것부터 순차적으로 꺼내와서 실행하게 된다고한다.
이 작업 또한 마찬가지로 태스크 큐가 비어있을 때 까지 이루어진다고한다.

그렇다면 비동기 함수는 누가 수행하느냐이다.

n초뒤에 setTimeout을 요청하느느 작업은 누가 처리하는 것일까?
fetch를 기반으로 실행되는 네트 워크 요청은 누가 보내고 응답을 받을 것인가?

이러한 작업들은 모두 태스크 큐가 할당되는 별도의 스레드에서 수행된다고한다.

자바스크립트 코드 실행은 싱글 스레드 내부에서 이루어지지만 외부 Web API등은 모두 자바스크립트 코드 외부에서 실행되고 콜백이 태스크 큐로 들어가는 것이라고한다.

이벤트 루프는 호출 스택이 비고, 콜백이 실행 가능한 때가 오면 이것을 꺼내서 수행하는 역할을 한다고한다.

그렇다면 비동기 작업을 수행하는 태스크 큐는 과연 어떤 구조로 작동하는것일까?

➡️ 다음 글에서는 태스크 큐와 마이크로 태스크 큐에 대해 살펴보자.