JavaScript 이벤트 루프 이해하기

[실행 흐름]

   Call Stack                 Web APIs              Task Queues
   ┌─────────┐                                     ┌──────────────┐
   │ main()  │                                     │ Microtasks   │
   └─────────┘                                     │  - Promise   │
       ↓                                           └──────────────┘
   ┌─────────┐              ┌──────────┐          ┌──────────────┐
   │ fetch() │  ─────────→  │ XHR      │          │ Macrotasks   │
   └─────────┘              └──────────┘          │  - setTimeout│
       ↓                         │                │  - setInterval│
   ┌─────────┐                  │                 └──────────────┘
   │ console │                  ↓                        ↓
   └─────────┘              [완료 시]  ──────────→   [큐에 추가]
                                                         ↓
                            ← ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
                         [콜 스택이 비면 큐에서 가져옴]

console.log('1: 동기 코드 시작');
 
setTimeout(() => {
  console.log('2: setTimeout (매크로태스크)');
}, 0);
 
Promise.resolve()
  .then(() => {
    console.log('3: Promise (마이크로태스크)');
  });
 
console.log('4: 동기 코드 끝');
 
// 실행 결과:
// 1: 동기 코드 시작
// 4: 동기 코드 끝
// 3: Promise (마이크로태스크)
// 2: setTimeout (매크로태스크)

// 논블로킹 방식
console.log('요청 시작');
 
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log('데이터:', data));
 
console.log('다른 작업 수행 가능');
 
// 출력:
// 요청 시작
// 다른 작업 수행 가능
// 데이터: {...}

setTimeout(() => console.log('매크로태스크'), 0);
 
Promise.resolve()
  .then(() => console.log('마이크로태스크 1'))
  .then(() => console.log('마이크로태스크 2'));
 
// 출력:
// 마이크로태스크 1
// 마이크로태스크 2
// 매크로태스크

let counter = 0;
 
// 동시에 여러 비동기 작업을 실행해도
// 순차적으로 처리되어 안전합니다
for (let i = 0; i < 1000; i++) {
  Promise.resolve().then(() => {
    counter++;
  });
}
 
// counter는 항상 1000이 됩니다

async function fetchUserData(userId) {
  try {
    console.log('데이터 요청 시작');
    
    // 네트워크 요청은 Web API에서 처리됩니다
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    
    // 데이터 처리
    console.log('사용자 정보:', data.name);
    return data;
  } catch (error) {
    console.error('오류 발생:', error);
    return null;
  }
}
 
// 다른 작업을 블로킹하지 않습니다
fetchUserData(123);
console.log('다른 작업 계속 수행');

function smoothScroll(targetY, duration) {
  const startY = window.scrollY;
  const distance = targetY - startY;
  const startTime = performance.now();
  
  function scroll() {
    const currentTime = performance.now();
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    
    window.scrollTo(0, startY + distance * progress);
    
    if (progress < 1) {
      // requestAnimationFrame도 이벤트 루프를 활용합니다
      requestAnimationFrame(scroll);
    }
  }
  
  requestAnimationFrame(scroll);
}
 
// 사용
smoothScroll(1000, 500);

const button = document.getElementById('submit');
 
button.addEventListener('click', async () => {
  // 1. 동기 코드: 버튼 비활성화
  button.disabled = true;
  button.textContent = '처리 중...';
  
  // 2. 비동기 작업: API 호출
  try {
    const result = await submitForm();
    
    // 3. UI 업데이트
    showSuccess(result);
  } catch (error) {
    showError(error);
  } finally {
    // 4. 정리 작업
    button.disabled = false;
    button.textContent = '제출';
  }
});
 
// 사용자는 버튼을 클릭한 후에도
// 페이지의 다른 부분과 상호작용할 수 있습니다

// Web Worker를 사용한 CPU 집약적 작업
const worker = new Worker('calculation-worker.js');
 
worker.postMessage({ numbers: largeArray });
 
worker.onmessage = (event) => {
  console.log('계산 결과:', event.data);
};
 
// 메인 스레드는 블로킹되지 않습니다

// ❌ 잘못된 코드: 이벤트 루프를 블로킹합니다
function infiniteLoop() {
  while (true) {
    // 콜 스택이 비지 않아 다른 작업이 실행되지 않음
  }
}
 
// ✅ 올바른 코드: 이벤트 루프를 활용합니다
function processChunks(data) {
  const chunkSize = 1000;
  let index = 0;
  
  function processNextChunk() {
    const end = Math.min(index + chunkSize, data.length);
    
    for (; index < end; index++) {
      // 청크 처리
      processItem(data[index]);
    }
    
    if (index < data.length) {
      // 다음 청크는 이벤트 루프를 통해 처리
      setTimeout(processNextChunk, 0);
    }
  }
  
  processNextChunk();
}

// ❌ 잘못된 코드: 무한 마이크로태스크
function badRecursion() {
  Promise.resolve().then(() => {
    console.log('실행');
    badRecursion(); // 매크로태스크가 실행될 기회가 없음
  });
}
 
// ✅ 올바른 코드: 매크로태스크 사용
function goodRecursion() {
  setTimeout(() => {
    console.log('실행');
    goodRecursion(); // 다른 작업이 실행될 기회가 있음
  }, 0);
}

// async 함수도 첫 await까지는 동기적으로 실행됩니다
async function example() {
  console.log('1: 동기 실행');
  
  await Promise.resolve();
  
  console.log('2: 비동기 실행');
}
 
console.log('3: 시작');
example();
console.log('4: 끝');
 
// 출력:
// 3: 시작
// 1: 동기 실행
// 4: 끝
// 2: 비동기 실행

console.log('1: 동기');
 
setTimeout(() => console.log('2: 매크로'), 0);
 
Promise.resolve()
  .then(() => console.log('3: 마이크로'));
 
queueMicrotask(() => console.log('4: 마이크로 (직접)'));
 
console.log('5: 동기');

async function measureAsync() {
  const start = performance.now();
  
  await fetch('/api/data');
  
  const end = performance.now();
  console.log(`실행 시간: ${end - start}ms`);
}