[매일메일] 자바스크립트는 싱글 스레드 언어인데, 어떻게 동시에 여러 작업들을 수행하나요?

💡 매일메일은 기술면접 관련 질문을 메일로 매일 보내주는 구독 서비스입니다.

💡매일메일 챌린지는 제 개인적인 챌린지로 매일메일에서 보내주는 하루치 메일에 대한 답변을 블로그 포스트로 작성합니다.

 

자바스크립트는 싱글 스레드 언어인데, 어떻게 동시에 여러 작업들을 수행하나요?

 

 

(2024.12.24)

 

 

 

자바스크립트는 싱글 스레드 기반의 언어이지만, 이벤트 루프(Event Loop)와 태스크 큐(Task Queue)를 활용하여 비동기 처리를 수행할 수 있습니다.

• setTimeout, Promise, fetch 등의 비동기 함수는 Web APIs에서 처리한 후, Task Queue 또는 Microtask Queue에 등록
• 이벤트 루프(Event Loop) 가 Call Stack이 비었을 때 Task Queue에서 작업을 가져와 실행
• Microtask Queue(Promise, MutationObserver) 는 일반 Task Queue보다 먼저 실행됨
• 비동기 처리를 위해 콜백(Callback), 프로미스(Promise), async/await을 사용할 수 있음

자바스크립트는 싱글 스레드지만, 이벤트 루프를 통해 여러 작업을 동시에 수행하는 것처럼 보이게 할 수 있습니다.

 

 

---

 

 

모범 답안

---

 

1️⃣ 자바스크립트는 싱글 스레드(Single Thread) 언어이다.

• 자바스크립트는 기본적으로 싱글 스레드(Single Thread) 기반의 언어입니다.
• 즉, 한 번에 하나의 작업만 실행 가능하며, 하나의 호출 스택(Call Stack)에서 순차적으로 코드가 실행됩니다.
• 이러한 동작 방식 때문에 멀티 스레드처럼 동시에 여러 작업을 수행하는 것이 불가능해 보일 수도 있습니다.

 

2️⃣ 비동기 처리를 가능하게 하는 이벤트 루프(Event Loop)와 태스크 큐(Task Queue)

 

그렇다면 싱글 스레드인 자바스크립트가 어떻게 동시에 여러 작업을 수행하는 것처럼 보일까?
그 비밀은 이벤트 루프(Event Loop)와 태스크 큐(Task Queue) 에 있습니다.

 

 

---

 

🏗 자바스크립트 비동기 처리 원리

 

자바스크립트의 비동기 처리는 브라우저(Web APIs) 또는 Node.js 런타임과 협력하여 동작합니다.

 

1. Call Stack(콜 스택)
   • 현재 실행 중인 함수가 저장되는 공간
   • 실행이 끝난 함수는 스택에서 제거됨 (LIFO 구조)
2. Web APIs (브라우저 또는 Node.js 런타임 제공 기능)
   • setTimeout, setInterval, fetch, XMLHttpRequest, 이벤트 리스너 등 비동기 API 제공
   • 실행 후 바로 Call Stack에서 제거됨
3. Task Queue (콜백 큐, Callback Queue 또는 메시지 큐, Message Queue)
   • Web APIs가 완료된 후 실행할 콜백 함수들을 저장하는 공간
   • setTimeout, setInterval 등의 비동기 작업이 끝나면 여기에 들어감
4. Microtask Queue (마이크로태스크 큐)
   • Promise.then(), MutationObserver, queueMicrotask() 등이 저장됨
   • Task Queue보다 먼저 실행됨!
5. Event Loop (이벤트 루프)
   • Call Stack이 비었을 때 Task Queue 또는 Microtask Queue에서 태스크를 가져와 실행

 

---

 

 

⚙️ 이벤트 루프(Event Loop) 동작 방식

 

📌 예제 1: 동기(Synchronous) 코드 실행

console.log("A");
console.log("B");
console.log("C");

✅ 출력 결과

A
B
C

• 모든 작업이 Call Stack에서 순차적으로 실행됨.

 

 

📌 예제 2: 비동기 코드 실행 (setTimeout)

console.log("A");

setTimeout(() => {
    console.log("B");
}, 1000);

console.log("C");

✅ 출력 결과

A
C
B

🔍 실행 과정
1️⃣ "A" 출력 (Call Stack에서 실행)
2️⃣ setTimeout 실행 → Web API가 처리 후 1초 후 Task Queue에 콜백 함수 등록
3️⃣ "C" 출력 (Call Stack에서 실행)
4️⃣ 1초 후 Event Loop가 Task Queue에서 콜백 함수를 가져와 실행 → "B" 출력

 

 

 

📌 예제 3: Promise와 setTimeout의 실행 순서 비교

console.log("A");

setTimeout(() => {
    console.log("B");
}, 0);

Promise.resolve().then(() => {
    console.log("C");
});

console.log("D");

✅ 출력 결과

A
D
C
B

🔍 실행 과정
1️⃣ "A" 출력
2️⃣ setTimeout 실행 → Web API에서 비동기 처리 후 Task Queue에 추가
3️⃣ Promise.resolve().then() 실행 → Microtask Queue에 추가
4️⃣ "D" 출력
5️⃣ Microtask Queue 우선 실행 → "C" 출력
6️⃣ Task Queue 실행 → "B" 출력

 

 

 

---

 

 

 

🔥 자바스크립트에서 동시성(Concurrency)과 병렬성(Parallelism)

 

✅ 동시성(Concurrency)

• 싱글 스레드에서도 여러 작업을 번갈아 가며 실행하는 것
• 이벤트 루프와 비동기 처리를 통해 마치 동시에 실행되는 것처럼 보이게 만듦

 

✅ 병렬성(Parallelism)

• 멀티 스레드를 사용하여 여러 작업을 완전히 동시에 실행하는 것
• 자바스크립트는 싱글 스레드이므로 병렬 처리는 기본적으로 불가능

 

하지만 웹 워커(Web Worker) 같은 기능을 사용하면 일부 병렬 처리가 가능함.

 

 

 

---

 

 

🎯 자바스크립트에서 비동기 처리하는 방법들

✅ 1. 콜백 함수(Callback)
✅ 2. 프로미스(Promise)
✅ 3. async/await (ES2017 추가)

 

📌 1️⃣ 콜백 함수(Callback)

function fetchData(callback) {
    setTimeout(() => {
        callback("데이터 로드 완료!");
    }, 1000);
}

fetchData((message) => {
    console.log(message);
});

✅ 단점: 콜백 지옥(Callback Hell) 발생 가능

 

📌 2️⃣ 프로미스(Promise)

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("데이터 로드 완료!");
        }, 1000);
    });
}

fetchData().then((message) => {
    console.log(message);
});

✅ 장점: 코드가 더 읽기 쉬워짐

 

 

📌 3️⃣ async/await (ES2017 추가)

async function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("데이터 로드 완료!");
        }, 1000);
    });
}

async function main() {
    console.log("데이터 요청 중...");
    const data = await fetchData();
    console.log(data);
}

main();

✅ 장점: async/await를 사용하면 동기 코드처럼 작성 가능