이벤트 루프 심화 — Call Stack, Task Queue, 그리고 실행 순서의 비밀

┌─────────────────────────────────────────────┐
│              자바스크립트 엔진                 │
│  ┌──────────┐        ┌──────────────┐       │
│  │Call Stack │        │  Memory Heap │       │
│  │          │        │  (객체 저장)   │       │
│  └──────────┘        └──────────────┘       │
└─────────────┬───────────────────────────────┘
              │
              ▼
┌─────────────────────────────────────────────┐
│           브라우저 / Node.js 환경              │
│  ┌──────────────────────────────────────┐   │
│  │  Web API (setTimeout, fetch, DOM 등)  │   │
│  └──────────────────────────────────────┘   │
│  ┌─────────────────┐  ┌─────────────────┐  │
│  │  Microtask Queue │  │   Task Queue    │  │
│  └─────────────────┘  └─────────────────┘  │
│              ┌──────────────┐               │
│              │  이벤트 루프   │               │
│              └──────────────┘               │
└─────────────────────────────────────────────┘

function multiply(a, b) {
  return a * b;
}

function square(n) {
  return multiply(n, n); // multiply가 스택에 쌓임
}

function printSquare(n) {
  const result = square(n); // square가 스택에 쌓임
  console.log(result);
}

printSquare(4);

1. printSquare(4)     → [printSquare]
2. square(4)          → [printSquare, square]
3. multiply(4, 4)     → [printSquare, square, multiply]
4. multiply 반환       → [printSquare, square]
5. square 반환         → [printSquare]
6. console.log(16)    → [printSquare, console.log]
7. console.log 반환    → [printSquare]
8. printSquare 반환    → [] (비어짐)

function infinite() {
  infinite(); // 탈출 조건 없는 재귀
}

infinite(); // RangeError!

console.log('시작');

setTimeout(() => {
  console.log('타이머 완료');
}, 1000);

console.log('끝');

// 두 개의 setTimeout을 등록
setTimeout(() => console.log('Task 1'), 0);
setTimeout(() => console.log('Task 2'), 0);

queueMicrotask(() => {
  console.log('Micro 1');
  queueMicrotask(() => {
    console.log('Micro 2'); // 이것도 같은 사이클에서 실행됨
  });
});

setTimeout(() => console.log('Task'), 0);

┌──────────────────────────────────────────┐
│ 1. Task Queue에서 가장 오래된 Task 하나 꺼냄  │
│    (Call Stack에서 실행)                     │
├──────────────────────────────────────────┤
│ 2. Call Stack이 비면                        │
│    → Microtask Queue를 전부 비움             │
│    (처리 중 추가된 Microtask도 포함)           │
├──────────────────────────────────────────┤
│ 3. 렌더링이 필요한 경우                      │
│    a. requestAnimationFrame 콜백 실행       │
│    b. Style 계산, Layout, Paint            │
├──────────────────────────────────────────┤
│ 4. 다시 1번으로 돌아감                       │
└──────────────────────────────────────────┘

console.log('동기');

setTimeout(() => console.log('setTimeout'), 0);

Promise.resolve().then(() => console.log('Promise'));

requestAnimationFrame(() => console.log('rAF'));

console.log('동기 끝');

동기
동기 끝
Promise       ← Microtask
rAF           ← 렌더링 직전 (다음 프레임)
setTimeout    ← Task

// 나쁜 예: setTimeout으로 DOM 업데이트
element.style.transform = 'translateX(0px)';
setTimeout(() => {
  element.style.transform = 'translateX(100px)'; // 언제 실행될지 불확실
}, 0);

// 좋은 예: rAF로 DOM 업데이트
element.style.transform = 'translateX(0px)';
requestAnimationFrame(() => {
  element.style.transform = 'translateX(100px)'; // 다음 페인트 직전에 실행 보장
});

   ┌───────────────────────────┐
┌─▶│        timers              │ ← setTimeout, setInterval
│  └──────────┬────────────────┘
│  ┌──────────▼────────────────┐
│  │     pending callbacks     │ ← 시스템 콜백
│  └──────────┬────────────────┘
│  ┌──────────▼────────────────┐
│  │       idle, prepare       │ ← 내부 전용
│  └──────────┬────────────────┘
│  ┌──────────▼────────────────┐
│  │          poll              │ ← I/O 콜백
│  └──────────┬────────────────┘
│  ┌──────────▼────────────────┐
│  │         check             │ ← setImmediate
│  └──────────┬────────────────┘
│  ┌──────────▼────────────────┐
│  │      close callbacks      │ ← socket.on('close')
│  └──────────┬────────────────┘
│             │
└─────────────┘

setTimeout(() => console.log('setTimeout'), 0);
setImmediate(() => console.log('setImmediate'));

Promise.resolve().then(() => console.log('Promise'));
process.nextTick(() => console.log('nextTick'));

nextTick   ← process.nextTick (가장 높은 우선순위)
Promise    ← Microtask
setTimeout 또는 setImmediate ← 상황에 따라 순서 변동

console.log('1'); // (1) 동기

setTimeout(() => {
  console.log('2'); // (6) Task
  Promise.resolve().then(() => {
    console.log('3'); // (7) setTimeout 내부의 Microtask
  });
}, 0);

Promise.resolve().then(() => {
  console.log('4'); // (3) Microtask
  queueMicrotask(() => {
    console.log('5'); // (4) Microtask가 만든 Microtask
  });
});

queueMicrotask(() => {
  console.log('6'); // (5) Microtask
});

console.log('7'); // (2) 동기

// 나쁜 예: 동기적으로 대량 데이터 처리
function processAllItems(items) {
  items.forEach(item => {
    // 무거운 연산...
    heavyComputation(item);
  });
}

// 개선: 청크 단위로 나눠서 이벤트 루프에 숨 쉴 틈을 줌
async function processInChunks(items, chunkSize = 100) {
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);
    chunk.forEach(item => heavyComputation(item));

    // 다음 청크 전에 이벤트 루프가 한 바퀴 돌 수 있도록 양보
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

// 절대 하면 안 되는 코드
function infiniteMicrotask() {
  queueMicrotask(() => {
    infiniteMicrotask(); // Microtask가 끝나지 않음 → 렌더링 불가 → 브라우저 멈춤
  });
}

async function example() {
  console.log('A'); // 동기 실행
  await Promise.resolve();
  console.log('B'); // await 이후 → Microtask로 실행
}

example();
console.log('C');

// 출력: A, C, B