[JS] 자바스크립트 비동기 작업과 이벤트 루프

자바스크립트의 비동기 작업과 이벤트 루프는 자바스크립트가 단일 스레드 환경에서도 효율적으로 비동기 작업을 처리할 수 있게 해주는 핵심 요소입니다. 이를 이해하기 위해, 자바스크립트의 실행 모델과 이벤트 루프의 동작 방식을 자세히 살펴보겠습니다.

 

자바스크립트의 실행 모델

자바스크립트는 단일 스레드 언어로, 한 번에 하나의 작업만 수행할 수 있습니다. 하지만, 비동기 작업을 지원하기 위해 자바스크립트는 이벤트 루프와 콜백 큐를 사용하여 비동기 작업을 관리합니다.

 

이벤트 루프(Event Loop)

이벤트 루프는 콜 스택(Call Stack)과 콜백 큐(Callback Queue)를 모니터링하면서 비동기 작업을 처리합니다. 자바스크립트의 이벤트 루프는 다음과 같은 과정을 반복합니다.

1. 콜 스택(Call Stack) : 현재 실행 중인 함수가 쌓이는 곳입니다. 함수가 호출되면 콜 스택에 추가되고, 함수가 완료되면 콜 스택에서 제거됩니다.
2. 콜백 큐(Callback Queue) : 비동기 작업(ex: 타이머, 네트워크 요청, DOM 이벤트)의 콜백 함수가 대기하는 큐입니다. 비동기 작업이 완료되면 콜백 함수가 이 큐에 추가됩니다.
3. 이벤트 루프(Event Loop) : 콜 스택이 비어 있을 때 콜백 큐에서 콜백 함수를 꺼내어 콜 스택에 추가하여 실행합니다.

---

비동기 작업 예시

 

setTimeout

console.log("Start");

setTimeout(() => {
  console.log("This is a callback");
}, 1000);

console.log("End");

 

1. 'console.log("start")'가 콜 스택에 추가되어 실행됩니다.
2. 'setTimeout' 함수가 콜 스택에 추가되어 타이머가 설정된 후 콜 스택에서 제거됩니다.
3. 'console.log("End")'가 콜 스택에 추가되어 실행됩니다.
4. 1000ms 후, 'setTimeout' 콜백 함수가 콜백 큐에 추가됩니다.
5. 이벤트 루프가 콜 스택이 비어 있는 것을 확인하고, 콜백 큐에서 콜백 함수를 꺼내어 콜 스택에 추가하여 실행합니다.

 

Promise

console.log("Start");

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved");
  }, 1000);
});

promise.then((message) => {
  console.log(message);
});

console.log("End");

 

1. 'console.log("start")'가 콜 스택에 추가되어 실행됩니다.
2. 'Promise' 객체가 생성되고, 'executor' 함수가 콜 스택에 추가됩니다.
3. 'setTimeout'이 설정되고, 'executor' 함수가 콜 스택에서 제거됩니다.
4. 'Promise.then'이 콜 스택에 추가되어 'then' 핸들러가 설정됩니다.
5. 'console.log("End")'가 콜 스택에 추가되어 실행됩니다.
6. 1000ms 후, 'resolve' 함수가 콜백 큐에 추가됩니다.
7. 이벤트 루프가 콜 스택이 비어 있는 것을 확인하고, 콜백 큐에서 'resolve'를 꺼내어 실행합니다.
8. 'resolve'가 'then' 핸들러를 호출하여 'console.log(message)'를 실행합니다.

---

마이크로태스크 큐(Microtask Queue)

Promise와 같은 비동기 작업은 마이크로태스크 큐에 콜백을 추가합니다. 마이크로태스크는 이벤트 루프의 각 반복 후에, 콜 스택이 비어 있을 때 실행됩니다. 마이크로태스크 큐는 콜백 큐보다 높은 우선순위를 갖습니다.

 

Promise와 마이크로태스크 큐 예시

console.log("Start");

setTimeout(() => {
  console.log("setTimeout callback");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise callback");
});

console.log("End");

1. 'console.log("Start")'가 콜 스택에 추가되어 실행됩니다.
2. 'setTimeout'이 콜 스택에 추가되어 타이머가 설정된 후 콜 스택에서 제거됩니다.
3. 'Promise.resolve'가 호출되어 마이크로태스크 큐에 콜백이 추가됩니다.
4. 'console.log("End")'가 콜 스택에 추가되어 실행됩니다.
5. 콜 스택이 비어지면, 이벤트 루프는 마이크로태스크 큐를 먼저 처리합니다. 'Promise callback'이 실행됩니다.
6. 마이크로태스크 큐가 비어지면, 이벤트 루프는 콜백 큐를 처리합니다. 'setTimeout callback'이 실행됩니다.

---

자바스크립트의 비동기 작업과 이벤트 루프는 콜 스택, 콜백 큐, 그리고 마이크로태스크 큐를 통해 효율적으로 관리합니다. 이 구조를 이해함으로써, 메모리 누수를 방지하고, 비동기 작업을 효과적으로 관리할 수 있습니다.