이벤트 루프(Event Loop)

답변 확인

1. 이벤트 루프란?

이벤트 루프는 JavaScript의 비동기 처리를 가능하게 하는 핵심 메커니즘 JavaScript는 싱글 스레드 언어이지만, 이벤트 루프를 통해 동시에 여러 작업을 효율적으로 처리할 수 있음

2. 이벤트 루프의 주요 구성 요소

1.콜 스택 (Call Stack)

• 함수 실행 컨텍스트가 쌓이는 LIFO(Last In, First Out) 구조
• 동기 작업은 콜 스택에서 바로 실행

function first() {
    console.log('첫 번째 함수 실행');
    second();
}
 
function second() {
    console.log('두 번째 함수 실행');
}
 
first();
 
// 첫 번째 함수 실행
// 두 번째 함수 실행

• 동작 순서:

1. first()가 호출되어 콜 스택에 추가 → 실행.
2. first() 내에서 second() 호출 → second()가 스택에 추가 → 실행.
3. second() 실행 완료 → 스택에서 제거.
4. first() 실행 완료 → 스택에서 제거.

2.Web API

• 브라우저가 제공하는 API로, 비동기 작업(setTimeout, fetch, DOM 이벤트) 등을 처리
• 작업이 완료되면 콜백 함수를 테스크 큐에 전달

console.log('시작');
 
setTimeout(() => {
    console.log('타이머 완료');
}, 2000);
 
console.log('끝');
 
// 시작
// 끝
// 타이머 완료

• 동작 순서:

1. console.log('시작') → 콜 스택에서 실행.
2. setTimeout → Web API로 넘어가 타이머 설정.
3. console.log('끝') → 콜 스택에서 실행.
4. 타이머 완료 후, 콜백 함수가 태스크 큐로 이동.
5. 콜 스택이 비면, 태스크 큐에서 콜백 함수 실행.

3. 태스크 큐 (Task Queue)

• 비동기 작업의 콜백 함수가 완료 후 대기하는 공간
• 매크로태스크와 마이크로태스크로 나뉘며, 마이크로태스크가 먼저 실행

마이크로태스크(Promise.then)는 > 매크로태스크(setTimeout)보다 우선 처리

1. 매크로태스크 큐:

• setTimeout, setInterval, setImmediate(Node.js) 등의 작업이 대기
• 이벤트 루프가 콜 스택이 비었을 때, 매크로태스크 큐에서 작업을 하나 가져와 실행

2. 마이크로태스크 큐:

• Promise.then, MutationObserver 등이 대기
• 매크로태스크보다 우선순위가 높으며, 콜 스택이 비는 시점마다 마이크로태스크 큐의 모든 작업이 처리됨

4.이벤트 루프 (Event Loop)

• 이벤트 루프는 콜 스택이 비어 있을 때, 태스크 큐에서 작업을 가져와 실행
• 실행 순서: 마이크로태스크 > 매크로태스크

console.log('시작');
 
setTimeout(() => {
    console.log('매크로태스크');
}, 0);
 
Promise.resolve().then(() => {
    console.log('마이크로태스크');
});
 
console.log('끝');
 
// 시작
// 끝
// 마이크로태스크
// 매크로태스크

• 동작 순서:

1. console.log('시작') 실행 → 콜 스택에서 제거.
2. setTimeout → Web API로 이동 → 타이머 완료 후 콜백 함수는 매크로태스크 큐에 등록.
3. Promise.resolve().then → 마이크로태스크 큐에 등록.
4. console.log('끝') 실행 → 콜 스택에서 제거.
5. 마이크로태스크 큐의 작업 실행 → console.log('마이크로태스크')
6. 매크로태스크 큐의 작업 실행 → console.log('매크로태스크')

결론

• 콜 스택: 현재 실행 중인 작업을 관리
• Web API: 비동기 작업 처리 및 태스크 큐로 콜백 전달
• 태스크 큐:
  • 매크로태스크: setTimeout, setInterval
  • 마이크로태스크: Promise.then
• 이벤트 루프: 콜 스택이 비었을 때, 태스크 큐의 작업을 실행

이해 포인트:

• 마이크로태스크가 매크로태스크보다 우선 처리됨
• 비동기 작업은 항상 현재 동기 작업이 완료된 후 실행됨