JavaScript의 이벤트 루프와 비동기 처리 이해하기

JavaScript의 이벤트 루프와 비동기 처리 이해하기

자바스크립트는 싱글 스레드 언어입니다. 이는 한 번에 하나의 작업만 처리할 수 있다는 것을 의미합니다. 하지만 자바스크립트는 이벤트 루프와 비동기 처리를 통해 동시성(concurrency)을 지원하고, 높은 퍼포먼스를 제공합니다. 이 글에서는 자바스크립트의 이벤트 루프와 비동기 처리에 대해 알아봅니다.

이벤트 루프 (Event Loop)

이벤트 루프는 자바스크립트의 핵심 구성 요소로, 싱글 스레드로 동작하는 자바스크립트에서 다양한 작업을 동시에 처리할 수 있도록 합니다. 이벤트 루프는 콜 스택, 웹 API, 태스크 큐(task queue), 마이크로태스크 큐(microtask queue)와 함께 동작합니다.
​

1. 콜 스택 (Call Stack): 함수 호출을 추적하는 자료 구조로, 실행 중인 함수와 해당 함수가 호출된 위치를 저장합니다. 콜 스택이 비어있으면 이벤트 루프는 태스크 큐에서 새로운 작업을 가져와 실행합니다.
2. 웹 API: 브라우저에서 제공하는 비동기 작업을 처리하는 API로, setTimeout, XMLHttpRequest, Fetch API 등이 포함됩니다. 작업이 완료되면 결과를 태스크 큐에 추가합니다.
3. 태스크 큐 (Task Queue): 비동기 작업 결과를 저장하는 자료 구조로, 이벤트 루프가 콜 스택이 비어있을 때 태스크 큐에서 작업을 가져와 실행합니다.
4. 마이크로태스크 큐 (Microtask Queue): 프로미스(Promise)와 관련된 작업을 저장하는 자료 구조로, 이벤트 루프는 콜 스택이 비어있을 때마다 마이크로태스크 큐에서 작업을 가져와 실행합니다.

비동기 처리 (Asynchronous)

자바스크립트에서는 웹 API를 통해 비동기 작업을 처리할 수 있습니다. 대표적으로 다음과 같은 비동기 처리 방식이 있습니다.
​

1. 콜백 함수 (Callback Function): 함수를 인자로 받아, 특정 작업이 완료된 후에 실행하는 방식입니다. 비동기 작업이 완료되면, 웹 API는 콜백 함수를 태스크 큐에 추가합니다.

setTimeout(function() {
  console.log("Timeout!");
}, 1000);

2. 프로미스 (Promise): 비동기 작업의 결과를 나타내는 객체로, 성공(fulfilled) 또는 실패(rejected) 상태를 가집니다. 프로미스는 then, catch, finally 메서드를 제공하여 결과를 처리할 수 있습니다. 프로미스 관련 작업은 마이크로태스크 큐에 추가됩니다.

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

3. async/await: 자바스크립트 ES2017에 도입된 기능으로, 프로미스 기반의 비동기 처리를 동기적인 코드처럼 작성할 수 있게 해줍니다. async 함수 내에서 await 키워드를 사용하여 프로미스가 settled 상태가 될 때까지 기다릴 수 있습니다.

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

이벤트 루프와 비동기 처리를 이해하면, 자바스크립트에서 효율적인 동시성 제어를 구현할 수 있습니다. 이를 통해 원활한 사용자 경험과 높은 퍼포먼스를 제공하는 웹 애플리케이션을 개발할 수 있습니다. 이러한 개념을 숙지하고, 실제 코드 작성 시 적절한 비동기 처리 방식을 선택하여 활용하는 것이 중요합니다.