이벤트 루프

Coddy Node.js 여정의 Node.js 기초 섹션에 포함된 레슨. 33개 중 26번째.

콜백과 프라미스는 나중에 실행되며, 정확히 언제 실행되는지 모르면 버그가 숨어들 수 있습니다.

Node는 먼저 모든 동기 코드를 끝까지 실행합니다. 그런 다음 마이크로태스크를 실행합니다. 여기에는 프라미스 콜백과 queueMicrotask에 전달된 함수가 포함됩니다. 타이머는 그다음에 실행됩니다. setTimeout(fn, ms)는 ms밀리초가 지난 뒤 fn을 한 번 실행합니다. setTimeout(fn, 0)도 마이크로태스크가 끝날 때까지 기다립니다.

setTimeout(() => console.log('C timer'), 0);
Promise.resolve().then(() => console.log('B promise'));
console.log('A sync');
// A sync, B promise, C timer

지연 시간이 0이라는 것은 마이크로태스크가 끝난 뒤 가능한 한 빨리 실행된다는 뜻이지, 마이크로태스크보다 먼저 실행된다는 뜻은 아닙니다. 타이머는 지연 시간 순서대로 실행되며, 지연 시간이 같으면 먼저 설정한 타이머가 먼저 실행됩니다.

챌린지

쉬움

Node는 코드를 정해진 순서로 실행합니다. 먼저 일반 코드 줄을 실행하고, 그다음 promise 콜백과 같은 마이크로태스크를 실행한 뒤, 타이머를 실행합니다. 이 순서를 이용해 네 줄을 옮기지 않고 숫자 순서대로 출력하세요.

order.js는 네 줄을 4부터 1까지 거꾸로 출력합니다. 줄을 옮기거나 순서를 바꾸지 마세요. 대신 세 줄을 감싸서 나중에 실행되도록 하세요.

console.log('1 sync')는 그대로 둡니다. 일반 코드는 먼저 실행됩니다.
2 microtask 줄을 queueMicrotask로 감싸서 일반 코드가 실행된 직후 실행되도록 합니다.
3 timeout 줄과 4 timeout later 줄을 각각 별도의 setTimeout으로 감쌉니다. setTimeout(fn, ms)는 ms밀리초 후에 함수 fn을 한 번 실행합니다. 4번 줄은 3번 줄보다 먼저 설정되므로 더 긴 지연 시간이 필요합니다.

node order.js를 실행하면 다음이 출력됩니다.

1 sync
2 microtask
3 timeout
4 timeout later

직접 해보기: 실행하기 전에 순서를 예상해 보세요. 그런 다음 Run을 누르면 터미널에 $ node order.js가 표시됩니다. 다음으로 두 타이머의 지연 시간을 모두 0으로 설정하고 다시 실행해 보세요. 지연 시간이 같으면 먼저 설정한 타이머가 먼저 실행되기 때문에 이제 4 timeout later가 3 timeout보다 먼저 출력됩니다. ‘확인’을 누르기 전에 4번 줄의 지연 시간을 더 길게 되돌려 놓으세요.

직접 해보기

// 이 줄들을 옮기지 않고 숫자 순서대로 출력되게 하세요.
// 대신 이 줄들을 queueMicrotask와 setTimeout으로 감싸세요.
console.log('4 timeout later');
console.log('3 timeout');
console.log('2 microtask');
console.log('1 sync');