https://www.devh.kr/posts/2021-11-24-JavaScript-Visualized-Event-Loop 를 참고하여 작성한 글입니다.
이벤트 루프(event loop)가 무엇이며 왜 신경을 써야 할까?
JavaScript는 싱글 스레드다(single-threaded): 한 번에 하나의 작업만 실행할 수 있다. 일반적으로 큰 문제가 아니지만 30초가 걸리는 작업을 실행하고 있다고 상상해보자. 그 작업 동안 우리는 다른 일이 일어날 때까지 30초 동안 기다리고 있다 JavaScript는 기본적으로 브라우저의 메인 스레드에서 실행되기에 전체 UI가 멈춘다
다행히 브라우저는 JavaScript 엔진 자체에서 제공하지 않는 몇 가지 기능인 Web API를 제공한다. 여기에는 DOM API, setTimeout HTTP 요청 등 이 포함 된다. 이것은 async(비동기), non-blocking(비차단) 동작을 만드는 데 도움이 될 수 있다. 🚀
함수를 호출하면 콜스택(call stack:호출스택)이라는 것에 추가된다. 콜스택은 JS 엔진의 일부이며 브라우저에 따라 다르다. 이것은 스택이다. 즉, 먼저 들어간 것이 후에 나오는 것(first in, last out)이다. 함수가 값을 반환하면 해당 함수가 스택에서 꺼낸다(popped off). 👋
respond 함수는 setTimeout 함수를 반환한다. setTimeout은 웹 API에 의해 우리에게 제공된다: 메인 스레드를 차단하지 않고 작업을 지연시킬 수 있다. setTimeout 함수에 전달한 콜백 함수, 화살표 함수 () => { return 'Hey' }가 Web API에 추가된다. 그러는 동안 setTimeout함수와 respond 함수가 스택에서 꺼내지면서(popped off) 둘 다 값을 반환한다.
Web API에서 타이머는 우리가 전달한 두 번째 인수인 1000ms 동안 실행된다. 콜백은 즉시 콜스택에 추가되지 않고 큐(queue)라고 하는 것으로 전달된다.
혼란스러운 부분일 수 있다: 1000ms 후에 콜백 함수가 콜스택에 추가되어 값을 반환한다는 의미는 아니다! 1000ms 후에 단순히 큐에 추가된다. 하지만 이건 큐다. 함수는 차례를 기다려야 한다.
이벤트 루프가 유일한 작업을 수행할 시간: 큐를 콜스택과 연결하는 것이다. 콜스택이 비어 있으면 이전에 호출된 모든 함수가 값을 반환하고 스택에서 꺼낸 경우 큐의 첫 번째 항목 이 콜스택에 추가된다. 이 경우 다른 함수가 호출되지 않았다. 이는 콜백 함수가 큐의 첫 번째 항목이 될 때까지 콜스택이 비어 있었다는 것을 의미한다.
콜백이 호출 스택에 추가되고, 호출되고, 값을 반환하고, 스택에서 꺼낸다.
포스트를 읽는 것도 재미있지만 실제로 계속 반복해서 작업해야만 이 포스트에 완전히 익숙해질 수 있다. 다음을 실행하면 콘솔에 무엇이 로깅되는지 알아보자
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();브라우저에서 이 코드를 실행할 때 어떤 일이 일어나는지 빠르게 살펴보겠다.
1. bar 호출. bar는 setTimeout 을 반환
2. 전달한 콜백 setTimeout이 Web API에 추가되고 setTimeout함수 bar가 콜스택에서 out.
3. 타이머가 실행되는 동안 foo가 호출되고 First가 로그. foo(undefined)가 반환되고 baz가 호출되며 콜백이 큐에 추가.
4. baz 로그 Third. 이벤트 루프는 baz가 반환된 후 콜스택이 비어 있음을 확인한 후에 콜백이 콜스택에 추가.
5. 콜백 로그 Second.
