[JavaScript] 이벤트 루프(Event Loop)

📚 자바스크립트의 이벤트 루프(Event Loop)란 무엇인가요?

자바스크립트는 싱글 스레드 언어예요. 이는 자바스크립트가 한 번에 하나의 작업만을 처리할 수 있다는 뜻이에요. 하지만 실제로는 자바스크립트가 비동기 작업을 아주 효율적으로 처리할 수 있어요. 이는 이벤트 루프(Event Loop)라는 메커니즘 덕분이에요.

 

자바스크립트의 이벤트 루프는 요리사 한 명이 있는 레스토랑과 같아요. 요리사는 한 번에 하나의 요리만 만들 수 있지만, 요리를 준비하는 동안 다른 일도 처리할 수 있어요. 예를 들어, 요리사가 면을 끓이는 동안 그 시간에 샐러드를 준비하거나, 주문을 받는 식으로 여러 작업을 동시에 처리할 수 있죠.

 

요리사(자바스크립트)는 요리를 하는 도중(동기 작업) 다른 일이 생기면 주방 밖에서 손님들이 기다리는(비동기 작업) 동안 요리를 마친 후, 그 다음 작업을 처리해요. 모든 요리가 끝나면, 기다리던 손님들의 주문(태스크 큐에 있는 비동기 작업)이 처리되는 방식입니다.

---

🖥️ 이벤트 루프의 동작 방식

자바스크립트의 이벤트 루프는 콜 스택(Call Stack)과 태스크 큐(Task Queue)를 통해 동작해요. 

1. 콜 스택 (Call Stack)

콜 스택은 함수 실행을 추적하는 구조예요. 자바스크립트는 스택(stack) 구조를 사용해 함수를 실행하고, 스택에 쌓인 함수가 끝나면 제거하면서 진행돼요. 동기 작업은 모두 콜 스택에서 순차적으로 처리됩니다.

function foo() {
    console.log("foo 함수 실행");
}

function bar() {
    console.log("bar 함수 실행");
    foo();
}

bar();

이 코드에서 bar() 함수가 호출되면, 콜 스택에 쌓이고 console.log를 실행해요.
그런 다음 foo() 함수가 호출되어 콜 스택에 추가되고 실행된 후 스택에서 제거돼요.
모든 함수가 처리된 후 콜 스택은 비워져요.

2. 태스크 큐 (Task Queue)

태스크 큐는 비동기 작업이 완료되면 콜 스택이 비어있을 때 실행 대기 중인 콜백 함수를 보관하는 큐예요. setTimeout, fetch, 이벤트 핸들러와 같은 비동기 작업은 바로 실행되지 않고, 비동기적으로 처리된 후 태스크 큐에 추가돼요.

console.log("첫 번째 로그");

setTimeout(() => {
    console.log("비동기 처리된 로그");
}, 0);

console.log("마지막 로그");

이 코드에서 setTimeout은 비동기 함수로, 0초 후 실행되더라도 즉시 실행되지 않아요.
첫 번째 로그와 마지막 로그가 먼저 실행된 후, 콜 스택이 비워지면 비동기 처리된 로그가 실행됩니다.

3. 이벤트 루프(Event Loop)

이벤트 루프는 콜 스택이 비어있는지 확인하고, 비어있으면 태스크 큐에서 대기 중인 작업을 콜 스택에 추가해요. 이를 통해 자바스크립트는 동기 작업과 비동기 작업을 적절히 처리할 수 있어요.

• 콜 스택이 비어 있을 때만 태스크 큐에서 작업을 가져와 실행해요.
• 콜 스택이 가득 차 있으면, 비동기 작업은 대기 상태에 있다가 나중에 처리돼요.

console.log("시작");

setTimeout(() => {
    console.log("비동기 실행");
}, 1000);

console.log("끝");

이 예제에서 시작과 끝이 먼저 출력된 후, 1초 후에 비동기 실행이 출력돼요.
이벤트 루프는 콜 스택이 비어있는 순간을 기다렸다가 태스크 큐에 있는 비동기 작업을 실행해요.

---

🤔 자바스크립트의 비동기 처리

자바스크립트에서 비동기 작업은 일반적으로 비동기 함수를 통해 이루어져요. 대표적으로 setTimeout, fetch, Promise 등이 비동기 작업을 처리하는 방식이에요. 이 비동기 작업은 이벤트 루프를 통해 처리되며, 브라우저나 Node.js 환경에서 비동기 작업을 수행할 수 있어요.

1. setTimeout을 통한 비동기 처리

setTimeout 함수는 특정 시간 후에 코드를 실행하는 비동기 함수예요. 시간이 지나면 콜백 함수가 태스크 큐에 추가되고, 콜 스택이 비어있을 때 실행돼요.

console.log("작업 1");

setTimeout(() => {
    console.log("작업 2");
}, 2000);

console.log("작업 3");

이 코드는 작업 1과 작업 3이 먼저 출력되고, 2초 후에 작업 2가 실행돼요.
setTimeout은 이벤트 루프에 의해 처리되는 비동기 작업이에요.

2. Promise를 통한 비동기 처리

Promise는 자바스크립트에서 비동기 작업을 처리하는 강력한 도구예요. Promise는 작업이 완료되면 then이나 catch 블록을 통해 결과를 처리해요. 비동기 작업의 결과를 기다렸다가 콜 스택이 비면 실행돼요.

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise 완료");
    }, 1000);
});

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

console.log("Promise 이전 코드 실행");

이 코드는 1초 후에 Promise가 완료되고 Promise 완료가 출력돼요. 그 전에 Promise 이전 코드 실행이 먼저 출력돼요.
Promise는 비동기 작업을 처리하는 데 매우 유용하며, 결과가 준비되면 이벤트 루프에 의해 처리돼요.

---

🚨 주의할 점

1. 비동기 작업의 실행 순서: 비동기 작업은 콜 스택의 작업이 모두 완료된 후 실행되기 때문에 코드의 실행 순서를 잘 이해해야 해요. 특히, setTimeout과 같은 비동기 작업은 일정 시간이 지나더라도 즉시 실행되지 않고 콜 스택이 비워진 후 실행됩니다.
2. 무한 루프 주의: 비동기 작업을 처리할 때, 무한 루프가 발생할 수 있어요. 잘못된 로직으로 인해 태스크 큐에 계속해서 작업이 추가되고 콜 스택이 비워지지 않는다면 프로그램이 멈출 수 있어요.
3. Promise와 async/await의 결합: 자바스크립트는 비동기 처리를 더욱 쉽게 하기 위해 async/await 문법을 제공해요. async/await는 Promise와 결합하여 비동기 작업을 동기 작업처럼 처리할 수 있게 해요. 하지만 await은 콜 스택을 차지하지 않기 때문에, 여전히 이벤트 루프에 의해 처리돼요.

async function fetchData() {
    const result = await fetch("https://api.example.com/data");
    console.log("데이터 가져오기 완료:", result);
}

fetchData();
console.log("데이터를 기다리는 중...");

await는 비동기 작업이 완료될 때까지 기다리게 만들지만, 내부적으로는 여전히 이벤트 루프에 의해 비동기 작업이 처리돼요.
동기적 코드처럼 보이지만, 자바스크립트의 비동기 특성을 이해해야 해요.

---

📖 결론

이벤트 루프는 자바스크립트의 싱글 스레드 특성을 극복하고, 비동기 작업을 효율적으로 처리할 수 있게 해주는 핵심 메커니즘이에요. 콜 스택에서 동기 작업이 처리되고, 비동기 작업은 태스크 큐에 추가된 후 이벤트 루프에 의해 처리돼요. 이를 통해 자바스크립트는 여러 작업을 비동기적으로 처리할 수 있어, 더 빠르고 효율적인 웹 애플리케이션을 개발할 수 있습니다.

 

이벤트 루프의 동작 원리를 이해하면, 자바스크립트에서 비동기 작업을 처리하는 방식을 더 잘 이해할 수 있고, 복잡한 비동기 로직을 구현할 때 실수를 줄일 수 있어요. Promise나 async/await 같은 비동기 처리 방법도 이벤트 루프와 밀접한 관련이 있으니, 이를 잘 이해하고 적절히 활용하는 것이 중요해요.

---

🔗 추가 정보

• 자바스크립트 이벤트 루프에 대한 더 깊은 이해를 원하신다면, MDN Web Docs에서 자세한 정보를 찾아볼 수 있어요.