[JS] 비동기가 가장 아랫단에서 어떻게 작동하는가?

0. 먼저 읽어보기

비동기에 대해 막연하게 이해해보기

[JS] 비동기(Asynchronous)와 콜백 함수(Callback Function)

 

자바스크립트의 기본 구조 이해해보기

[JS] Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more

 

브라우저의 작동원리 이해해보기

[HTTP] 브라우저(Browser)의 작동원리와 DOM(Document Object Model)

 

비동기가 가장 아랫단에서 어떻게 작동하는지 이해하려면 자바스크립트의 동작 원리와 브라우저 내부의 구조를 알아야 한다. 이는 자바스크립트 엔진, 콜 스택, 태스크 큐, 그리고 이벤트 루프가 서로 어떻게 상호작용하는지와 관련이 있다. 비동기와 자바스크립트 엔진, 브라우저의 동작 원리는 먼저 위 글을 통해 짧게 인사이트를 얻을 수 있을 것이다.

 

 

 

---

1. 자바스크립트의 기본 구조

자바스크립트는 싱글 스레드 언어다. 즉, 한 번에 하나의 작업만 처리할 수 있다.

하지만 비동기 처리를 통해 여러 작업이 동시에 진행되는 것처럼 보이도록 한다.

 

 

 

---

2. 자바스크립트 엔진

대표적인 예로 V8 엔진(Chrome, Node.js)이 있다. 자바스크립트 엔진은 다음과 같은 구성요소로 이뤄져 있다.

 

콜 스택(Call Stack)

• 현재 실행 중인 함수를 저장하는 스택 자료구조다.

• LIFO(Last In, First Out) 구조로, 가장 최근에 추가된 작업이 가장 먼저 처리된다.

• 예를 들어, 아래 코드가 실행되면 다음과 같은 순서로 콜 스택이 쌓인다.

function first() {
    second();
    console.log('첫 번째');
}

function second() {
    console.log('두 번째');
}

first();

콜 스택 상태:
1. first() -- 가장 아래
2. second()
3. console.log('두 번째')
4. console.log('첫 번째') -- top

 

• 모든 작업이 끝나면 콜 스택은 비어 있는 상태가 된다.

 

 

 

---

3. 비동기 작업의 흐름

비동기 작업은 콜 스택에서 바로 실행되지 않는다.

대신 브라우저나 Node.js 환경에서 제공하는 Web APIs 또는 백그라운드 스레드를 사용한다.

 

대표적인 비동기 작업

• setTimeout, setInterval

• DOM 이벤트 (클릭, 키보드 입력 등)

• AJAX 요청 (fetch, XMLHttpRequest)

 

DOM이란 무엇인가

[HTTP] 브라우저(Browser)의 작동원리와 DOM(Document Object Model)

 

Ajax란 무엇인가

[JS] Ajax(Asynchronous JavaScript and XML)란 무엇인가

 

예시 코드를 보자:

console.log('시작');

setTimeout(function() {
    console.log('타임아웃');
}, 2000);

console.log('끝');

 

출력 결과는 다음과 같다:

시작
끝
타임아웃

 

 

 

---

4. 왜 이렇게 출력될까?

 

(1) 콜 스택에 추가

• console.log('시작') → 콜 스택에 쌓이고 즉시 실행된다.

• setTimeout() → Web API로 보내지고 콜백 함수는 바로 실행되지 않는다.

• console.log('끝') → 콜 스택에 쌓이고 즉시 실행된다.

 

Web API란 무엇인가?

Web API란?

 

 

(2) Web API에서 비동기 작업 처리

• setTimeout()은 Web API에서 타이머를 시작한다.

• 타이머가 끝나면 콜백 함수가 태스크 큐(Task Queue)에 들어간다.

 

(3) 이벤트 루프(Event Loop)

• 콜 스택이 비어 있는지 확인한다.

• 콜 스택이 비어 있으면 태스크 큐에 있는 콜백 함수를 콜 스택으로 이동시킨다.

• 여기서 console.log('타임아웃')이 콜 스택에 쌓이고 실행된다.

 

 

 

---

5. 태스크 큐와 이벤트 루프의 역할

 

태스크 큐(Task Queue)

• 비동기 콜백 함수가 대기하는 곳이다.

• setTimeout, setInterval, 이벤트 리스너의 콜백이 여기에 들어간다.

 

이벤트 루프(Event Loop)

• 계속해서 콜 스택이 비어 있는지 확인한다.

• 비어 있으면 태스크 큐에 있는 콜백을 콜 스택으로 이동시킨다.

 

 

 

---

6. 비유를 통한 이해: 음식점 예시

• 콜 스택: 주방에 있는 셰프 한 명. 한 번에 하나의 요리만 한다.

• Web API: 주방 밖에 있는 타이머(알람), 배달원(AJAX 요청) 등.

• 태스크 큐: 요리가 다 되었을 때 셰프에게 알려주는 알림판.

• 이벤트 루프: 셰프가 쉬고 있는지 확인하고, 쉬고 있다면 알림판에 있는 작업을 가져와 요리를 시작한다.

 

 

 

---

7. 비동기 예시 분석: AJAX 요청

console.log('데이터 요청 시작');

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(data => {
        console.log('데이터 받음:', data);
    });

console.log('다음 작업 진행');

 

실행 흐름

1. console.log('데이터 요청 시작') → 콜 스택에서 실행 후 제거.

2. fetch() 요청 → Web API로 보내짐.

• 서버에 데이터 요청 후 응답 대기.

• 이때 콜 스택은 비어 있음.

3. console.log('다음 작업 진행') → 콜 스택에서 실행 후 제거.

4. 서버에서 응답이 오면 태스크 큐에 .then() 콜백이 추가됨.

5. 이벤트 루프가 콜 스택이 비어 있는지 확인하고 .then() 콜백을 콜 스택으로 이동.

6. console.log('데이터 받음:', data) → 콜 스택에서 실행 후 제거.

 

출력 결과

데이터 요청 시작
다음 작업 진행
데이터 받음: { ... }

 

 

 

---

8. 결론: 비동기의 진짜 의미

• 비동기란 작업을 요청한 후 기다리지 않고 다음 작업을 바로 진행하는 것이다.

• 이는 콜 스택, Web API, 태스크 큐, 이벤트 루프가 서로 협력하여 이루어진다.

• 콜백 함수는 바로 실행되지 않고 태스크 큐에서 대기하다가 콜 스택이 비었을 때 실행된다.

• 이를 통해 자바스크립트는 싱글 스레드임에도 불구하고 여러 작업이 동시에 이루어지는 것처럼 보이게 한다.