1.Overview

Node.js 교과서 책을 보던 중 '이벤트 루프'에 관련된 이야기나 나왔다.
javascript에 자신감이 있던 나는 문제를 머리속을 그려보고 정답을 찾았지만, 막상 컴퓨터로 돌아간 내용을 확인하니 내가 생각했던 것과는 다르게 되는 것을 보고 다시 한 번 이 부분에 대해 정확하게 공부를 하기로 마음을 먹었다.

2.용어정리

2-1. 이벤트 루프

이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서를 결정하는 역할

2-2. 백그라운드

setTimeout 같은 타이머나 이벤트 리스너들이 대기하는 곳으로 자바스크립트가 아닌 다른 언어로 작성된 프로그램이라고 봐도 됩니다.
여기서 자바스크립트가 아닌 다른 언어 가 중요한 포인트이다

2-3. 태스크 큐

이벤트 발생 후, 백그라운드에서는 태스크 큐로 타이머나 이벤트 리스너의 콜백 함수를 보냅니다. 정해진 순서대로 콜백들이 줄을 서 있으므로 콜백 큐라고도 부릅니다.
코랩ㄱ들은 보통 완료된 순서대로 줄을서 있지만, 특정한 경우에는 순서가 바뀌기도 합니다.

3.간단한 함수의 이벤트 루프

3-1. console.log 알아보기(feat.setTimeout)

<script>
    function run(){
        console.log('3초 후 실행')
    }
    console.log('시작')
    setTimeout(run, 3000);
    console.log('끝')
</script>

3-2.결과 예측

출력

시작
끝
3초 후 실행

위와 같이 생각한 이유

1. 스택 : anomymous가 쌓임
2. run 함수의 선언
3. 스택 : console.log('시작') 쌓임
4. 출력 : console.log('시작') 출력
5. 스택 : anomymous가 사라짐 (파일을 다 실행해서)
6. 스택 : setTimeout 쌓임
7. 백그라운드 : 스택에서 백그라운드로 setTimeout 이동( 타이머 run 3000초로 이동)
8. 스택 : console.log('끝') 쌓임
9. 출력 : console.log('끝') 출력
10. 태스크 큐 : 백그라운드에서 태스크 큐으로 setTimeout 이동
11. 스택: 스택이 비어서 setTimeout 이 태스크 큐에서 스택으로 이동 및 출력

3-3. 결과

출력

시작
끝
3초 후 실행

생각한 대로 출력이 된 것을 볼 수 있었다.

4. 이벤트 루프 훈련하기(어려운 버전)

4-1. 문제

<script>
    function oneMore(){
        console.log('one more')
    }
    
    function run(){
        console.log('run run');
        setTimeout(() =>{
            console.log('wow')
        }, 0) // 0초여도 백그라운드를 가야된다.
        new Promise((resolve) => {
            resolve('hi'); // Promise의 내부는 동기
        })
        .then(console.log); // Promise가 then을 만나는 순간 비동기가 된다.
        oneMore();
    }

    setTimeout(run, 5000);
</script>

4-2. 결과 예측

출력

run run
one more
wow
hi

4-3. 결과

출력

run run
one more
h1
wow

틀린 이유 분석

1. 백그라운드에서는 어떤 함수가 먼저 시작될지 알 수 없다.
2. 백그라운드에서 setTimeout 보다 Promise의 then이 setTimeout보다 우선순위가 높다.
3. 따라서, then에 있는 'hi'가 먼저 출력된다.