[Javascript] 싱글 스레드인 자바스크립트가 비동기 작업을 수행하는 방법

싱글 스레드인 자바스크립트가 비동기 작업을 수행하는 방법

자바스크립트를 다루다 보면 한 번은 마주치는 질문이 있습니다.

자바스크립트는 싱글 스레드라면서요? 그런데 어떻게 동시에 여러 작업을 처리하죠?

 

결론부터 말하자면, 자바스크립트의 실행은 싱글 스레드이지만, 비동기 처리 환경은 멀티 구성이기 때문입니다.

이 글에서는 그 구조를 차근차근 풀어보겠습니다.

자바스크립트는 왜 싱글 스레드일까

자바스크립트의 실행 모델은 기본적으로 단일 호출 스택(Call Stack) 기반입니다.

 

한 번에 하나의 함수만 실행 가능하고,

동시에 여러 개의 자바스크립트 코드를 실행할 수 없습니다.

function a() {
    b();
}

function b() {
    c();
}

function c() {
    console.log('hello');
}

a();

이 구조 덕분에 동시성으로 인한 상태 충돌이 적고 개발자가 동기화를 직접 관리할 필요가 없습니다.

대신, 오래 걸리는 작업 하나를 그대로 실행하면 이후의 작업이 모두 멈추는 문제가 발생합니다.

아니 앞 차가 빠져야 나가죠

만약 자바스크립트가 아래처럼 동작한다면 어떤 문제가 발생할까요?

while (true) {
    // 5초 동안 CPU 점유
}

 

• UI 멈춤
• 클릭, 스크롤, 입력 모두 불가
• 브라우저가 응답 없음 상태

사용자 입장에선 "...? 뭐지" 싶은 상태가 발생합니다.

그래서 자바스크립트는 시간이 오래 걸리는 작업을 직접 처리하지 않습니다.

비동기는 자바스크립트가 아니라 환경이 처리함

그래서 자바스크립트 엔진은 비동기 처리를 실행 환경에 넘깁니다.

• 브라우저
• Node.js

이 환경들은 공통적으로 아래 요소들 제공합니다.

 

• Web APIs (또는 Node APIs)
• Task Queue / Microtask Queue
• Event Loop

그럼 비동기 작업은 어떻게 처리됨?

아래 코드를 기준으로 살펴보도록 하겠습니다.

console.log('start');

setTimeout(() => {
    console.log('async');
}, 1000);

console.log('end');

1️⃣ console.log('start');

→ Call Stack에서 즉시 실행함

 

2️⃣ setTimeOut(...)

→ 타이머 등록은 Web API로 위임

→ 자바스크립트는 즉시 다음 코드로 이동

 

3️⃣ console.log('end')
→ 즉시 실행

 

4️⃣ 1초 후
→ Web API가 콜백을 Task Queue에 넣음

 

5️⃣ Call Stack이 비어 있음
→ Event Loop가 Task Queue 확인

 

6️⃣ 콜백을 Call Stack으로 이동시켜 실행

 

👉 자바스크립트는 비동기 처리가 필요한 작업을 직접 기다리지 않습니다.

👉 대신 “나중에 실행할 함수”를 예약할 뿐입니다.

Event Loop의 역할

Event Loop는 관찰자 역할을 합니다.

 

• Call Stack이 비었는지 확인
• 비었다면 Queue에서 실행할 작업을 가져옴
• 가져온 작업을 Call Stack에 올림

이 때 Call Stack이 비어있지 않으면 어떠한 비동기 콜백도 실행되지 않습니다.

Task Queue와 Microtask Queue

또한 비동기 작업에도 우선순위가 존재합니다.

Microtask Queue (우선)

 

• Promise.then
• async / await
• queueMicrotask

Task Queue (후순위)

 

• setTimeout
• setInterval
• DOM 이벤트

정리하면 이렇습니다.

❌ 오해

• “자바스크립트는 싱글 스레드라서 비동기가 안 된다”

✅ 진실

 

• 자바스크립트 실행은 싱글 스레드
• 비동기 처리는 실행 환경이 담당
• 이벤트 루프가 실행 타이밍을 조율

즉, 싱글 스레드 + 이벤트 루프 + 비동기 환경 + 효율적인 비동기 처리

마치 모든 일을 내가 하기 보다는 필요한 일은 외주를 맡기는 모습이 꼭 사업 시스템과 유사해보입니다.

 

결국 자바스크립트는 한 번에 하나의 코드만 실행하지만 실행 환경과 이벤트 루프를 통해

동시에 처리되는 것처럼 비동기를 구현합니다.

마치며

Callback → Promise → async / await로 이어지는 자바스크립트 비동기 흐름의 발전 과정은

 

• Call Stack
• Event Loop
• Queue
• 실행 환경

으로 이루어진 거대한 세계관 위에서 쓰여졌다고 볼 수 있습니다.

 

저도 완전히 이해하지는 못했지만 비동기 코드의 실행순서가 이제는 감이 아니라 논리로 보이기 시작한 것 같습니다.

 

감사합니다!