이벤트루프
const handler = () => {
console.log("함수 시작!");
setTimeout(() => {
console.log("곧바로 시작됩니다.");
}, 0);
console.log("함수 종료!");
}위의 handler 함수를 실행시키면 위에서부터 console.log가 찍힐 것 같지만 실제로 실행시키면 아래와 같이 나온다.
setTimeout은 0초 후에 실행되는 거라 실행순서에 변동이 없어야하는데 어떻게 된걸까?
자바스크립트에는 콜스택CallStack과 태스크큐TaskQueue라는 것이 있다. 프로그램이 실행되면 함수들은 우선 콜스택에 적재된다.
스택은 FIFO구조로 나중에 들어간 것이 먼저 실행되는 구조이다. 새로 들어간 handler 함수가 실행되며 내부의 console.log("함수 시작!")을 실행한 후 setTimeout()을 실행하려고 하고 있다. setTimeout은 Web APIs로써 비동기 함수이다. 비동기 함수들은 우선 태스크큐로 이동하게 된다.
setTimeout은 태스크큐에서 잠시 기다리게 되고 그 다음 코드인 console.log("함수 종료!")가 실행된다.
handler 함수가 끝까지 읽히고 콜스택에서 나가게 되어 콜스택이 비워지면 그 때 태스크큐에서 스레드가 setTimeout 함수를 콜스택으로 옮겨 실행한다.
이러한 이유로 콘솔이 위와 같이 이렇게 찍히는 것이다.
이벤트 루프에서 중요한 것은 콜스택이 다 비워져야만 태스크큐의 작업을 가져올 수 있다는 것이다.
스레드
위에서 태스크큐의 작업을 옮기는 것이 스레드라고 언급했는데, 스레드는 프로세스(실행 중인 프로그램) 내에서 작업을 직접 수행하는 주체이다. 스레드가 하나만 있으면 싱글 스레드, 여러개가 있으면 멀티 스레드라고 말한다.
싱글 스레드는 컨텍스트 스위칭이 일어나지 않아 속도가 빠르다. 하지만 오래 걸리는 일을 만나면 그 뒤에 있는 작업들이 모두 기다려야하는 단점이 있다.
멀티스레드는 오래 걸리는 일이 있어도 조금 조금씩 같이 해서 동시에 처리되는 느낌 을 준다. 동시에 여러 작업을 처리하는 것 같지만, 사실은 여러 스레드가 번갈아가면서 수행을 하는 것이다. 짧게 걸리는 일들만 있다면 싱글스레드보다 속도가 늦을 수 있다.
컨텍스트 스위칭
멀티 스레드 방식처럼 스레드가 하나의 요청에 대한 응답을 기다렸다가 다음 작업으로 이동하며 작업을 수행하는 것을 컨텍스트 스위칭(문맥 교환)이라고 한다. 싱글 스레드 방식은 오래 걸리는 작업을 태스크큐로 빼서 처리하기 때문에 높은 퍼포먼스를 낼 수 있다.
프로세스 내부에는 하나 이상의 스레드가 있다. 하나의 프로세스 내부에서 각기 다른 스레드들끼리 컨텍스트 스위칭이 일어나는 것을 스레드 컨텍스트 스위칭이라 말하고, 둘 이상의 서로 다른 프로세스 내부의 스레드들끼리 교환하는 것을 프로세스 컨텍스트 스위칭이라고 한다. 명칭은 프로세스 컨텍스트 스위칭이지만 문맥 교환이 되는 주체는 스레드이다.
블로킹 / 논블로킹
멀티 스레드 방식처럼 하나의 요청에 대한 응답이 와야만 다음 작업을 시작할 수 있는 방식을 블로킹 방식이라고 한다. 자바스크립트처럼 하나의 작업이 진행되는 동안 시간이 오래 걸리는 작업을 별개의 공간(자바스크립트의 경우 태스크큐)에 두고 실행하는 것을 논블로킹 방식이라고 한다.
📍 자바스크립트는 이벤트 루프 싱글 스레드 / 논블로킹 방식이다.
