[JavaScript 심화 시리즈] 6일차: JavaScript의 이벤트 루프와 비동기 처리 이해하기

6. 이벤트 루프와 비동기 처리

이벤트 루프란 무엇인가?

이벤트 루프(Event Loop)는 JavaScript의 비동기 처리를 가능하게 하는 메커니즘입니다. JavaScript는 싱글 스레드 언어이지만, 이벤트 루프를 통해 비동기 작업을 처리할 수 있습니다.

이벤트 루프의 동작 방식

이벤트 루프는 콜 스택(Call Stack)과 태스크 큐(Task Queue)를 사용하여 작업을 관리합니다.

1. 콜 스택

콜 스택은 함수 호출을 관리하는 스택입니다. 함수가 호출되면 스택에 푸시(push)되고, 함수 실행이 완료되면 스택에서 팝(pop)됩니다.

2. 태스크 큐

태스크 큐는 비동기 작업(예: 타이머, 이벤트 리스너 등)이 완료되었을 때 콜백 함수를 저장하는 큐입니다.

3. 이벤트 루프

이벤트 루프는 콜 스택이 비어 있는지 확인하고, 비어 있으면 태스크 큐에서 콜백 함수를 가져와 콜 스택에 푸시합니다.

예제:

console.log('Start');

setTimeout(function() {
  console.log('Timeout');
}, 0);

console.log('End');

// 출력: 
// Start
// End
// Timeout

이 예제에서 setTimeout은 태스크 큐에 콜백 함수를 추가하고, console.log('End')가 실행된 후에 콜백 함수가 실행됩니다.

비동기 처리

JavaScript의 비동기 처리에는 여러 가지 방법이 있습니다.

1. 콜백 함수

콜백 함수는 비동기 작업이 완료된 후 호출되는 함수입니다.

function fetchData(callback) {
  setTimeout(function() {
    let data = "서버에서 가져온 데이터";
    callback(data);
  }, 1000);
}

fetchData(function(data) {
  console.log(data);  // 출력: 서버에서 가져온 데이터
});

2. 프로미스 (Promises)

프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다.

let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    let success = true;
    if (success) {
      resolve("작업 성공");
    } else {
      reject("작업 실패");
    }
  }, 1000);
});

promise.then(function(result) {
  console.log(result);  // 출력: 작업 성공
}).catch(function(error) {
  console.log(error);
});

3. async/await

async와 await는 프로미스를 더 간결하게 사용할 수 있도록 도와주는 문법입니다.

function fetchData() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve("서버에서 가져온 데이터");
    }, 1000);
  });
}

async function displayData() {
  let data = await fetchData();
  console.log(data);
}

displayData();  // 1초 후 출력: 서버에서 가져온 데이터

마이크로태스크 큐

마이크로태스크 큐(Microtask Queue)는 프로미스의 then이나 catch 블록 같은 마이크로태스크를 관리하는 큐입니다. 마이크로태스크는 태스크 큐보다 높은 우선순위를 가집니다.

예제:

console.log('Start');

setTimeout(function() {
  console.log('Timeout');
}, 0);

Promise.resolve().then(function() {
  console.log('Promise');
});

console.log('End');

// 출력: 
// Start
// End
// Promise
// Timeout

이 예제에서 프로미스의 then 블록은 마이크로태스크 큐에 추가되며, setTimeout의 콜백보다 먼저 실행됩니다.

결론

이벤트 루프와 비동기 처리는 JavaScript에서 중요한 개념입니다. 이를 이해하면 비동기 작업을 효율적으로 관리하고, 더 나은 사용자 경험을 제공할 수 있습니다.

다음 글에서는 메모리 관리와 성능 최적화에 대해 알아보겠습니다. 다음 글에서 만나요!