비동기 프로그래밍과 이벤트 루프

민주니어·2024년 4월 27일

비동기 프로그래밍이란?

작업을 순차적으로 실행하지 않고, 다음 작업을 실행하는 방식을 말한다.
이를 통해 한 번에 여러 작업을 처리하고 블로킹 없이 프로그램이 계속 실행될 수 있다.

// API에서 데이터를 비동기적으로 가져오는 함수
async function fetchData(url) {
    try {
        // 비동기 요청을 보내고 응답을 기다립니다.
        const response = await fetch(url);
        // 응답을 JSON 형태로 변환합니다.
        const data = await response.json();
        console.log('Data received:', data);
    } catch (error) {
        // 에러가 발생하면 여기에서 처리합니다.
        console.error('Error fetching data:', error);
    }
}

// 예제 URL로 함수를 호출합니다.
fetchData('https://api.example.com/data');

비동기 프로그래밍의 필요성

과거의 소프트웨어는 주로 동기적인 방식으로 설계되어 작업을 순차적으로 처리하였다.
이러한 접근 방식은 단순하고 이해하기 쉬우나, 하나의 작업이 블로킹 상태에 빠질 경우 전체 프로그램의 실행이 중단될 수 있다.
예를 들어, 파일을 읽거나 네트워크 요청을 기다리는 동안 프로그램이 멈춰버리는 문제가 발생할 수 있다.
이러한 문제는 특히 GUI 환경에서 치명적이며, 좋은 사용자 경험을 위해 비동기 프로그래밍은 필요하다.

이벤트 루프

JavaScript는 싱글 스레드 언어이다. 즉, 한 번에 하나의 명령만 처리할 수 있다.
그러나 실제 동작하는 웹 애플리케이션은 사용자 인터페이스, API 호출, 이벤트 처리 등 여러 작업을 동시에 처리해야 한다.
JavaScript는 이벤트 루프를 사용하여 이러한 비동기 작업을 관리한다.

이벤트 루프의 구성 요소

호출 스택(Call Stack):
자바스크립트 코드가 실행되는 곳
함수의 호출은 스택에 푸시되고, 실행이 완료되면 스택에서 팝된다.
메시지 큐(Message Queue):
비동기 작업(예: setTimeout, 클릭 이벤트 등)의 결과 또는 실행할 콜백 함수가 기다리는 곳
이벤트 루프:
메시지 큐에서 다음 메시지(콜백 함수)를 감시하고, 호출 스택이 비어 있을 때 해당 메시지를 호출 스택으로 전달하는 역할

이벤트 루프의 작동 방식

호출 스택 확인: 이벤트 루프는 호출 스택이 비어 있는지 확인
메시지 큐 감시: 호출 스택이 비어 있으면, 이벤트 루프는 메시지 큐에서 대기 중인 첫 번째 메시지(콜백 함수)를 꺼내 호출 스택으로 옮긴다.
콜백 실행: 이제 이 콜백 함수는 호출 스택에서 실행
반복: 콜백 함수가 완료되면 스택에서 제거되고, 이벤트 루프는 다시 메시지 큐에서 다음 메시지를 확인

마이크로 태스크(Microtask)와 매크로 태스크(Macrotask)

태스크 큐(Task Queue)는 이벤트가 쌓이는 큐로, 매크로 태스크 큐와 마이크로 태스크 큐로 나누어 진다.

1. 마이크로 태스크 (Microtask)
마이크로태스크는 일반 이벤트 실행문이 아닌 특정 코드를 사용해서만 만들 수 있고, 주로 Promise를 사용해 만든다
메시지 큐보다 우선순위가 높아, 호출 스택이 비워질 때마다 이벤트 루프는 메시지 큐보다 마이크로태스크 큐를 먼저 처리한다.

2. 매크로 태스크 (Macrotask)
매크로 태스크는 일반적으로 이벤트 루프의 큰 단위의 작업들을 의미