Day 4: 동기 vs 비동기

1. 오늘의 학습 목표

학습 목표: 프로그램의 실행 흐름을 제어하는 두 가지 방식, 동기와 비동기의 차이점을 이해합니다. 블로킹과 논블로킹 I/O의 개념을 설명할 수 있습니다.

핵심 요약: 비동기 처리는 시간이 걸리는 작업을 기다리지 않고 다른 일을 먼저 처리함으로써, 웹 애플리케이션의 응답성과 효율성을 극대화하는 핵심 기술입니다.

---

2. 핵심 개념 파헤치기 

2.1. 동기와 블로킹

동기(Synchronous) 방식은 작업을 요청하면 그 작업이 끝날 때까지 기다렸다가, 완료되면 다음 작업을 순차적으로 실행하는 방식입니다. 마치 식당 키오스크에서 한 사람이 주문을 마치기 전까지 뒷사람은 아무것도 못 하고 기다리는 것과 같습니다. 이때, 하나의 작업이 실행되는 동안 다른 작업의 실행을 막는 현상이 발생하는데, 블로킹(Blocking)이라고 합니다. 특히 파일 읽기, 네트워크 요청처럼 시간이 오래 걸리는 I/O(Input/Output) 작업에서 블로킹이 발생하면 전체 시스템의 성능이 저하될 수 있습니다.

 

2.2. 비동기(Asynchronous)와 논블로킹(Non-blocking)

비동기 방식은 작업을 요청한 후, 작업이 끝나는 것을 기다리지 않고 즉시 다음 작업으로 넘어가는 방식입니다. 식당에서 진동벨을 받고 자리에 가서 기다리다가, 벨이 울리면 음식을 받으러 가는 것과 같습니다. 주문(요청)과 음식 수령(결과) 사이의 대기 시간 동안 다른 일을 할 수 있습니다.

작업 완료를 기다리지 않고 바로 다음 작업을 처리할 수 있는 것을 논블로킹이라고 합니다. 비동기 모델은 이 논블로킹을 통해 시스템의 자원을 효율적으로 사용하여, 동시에 여러 요청을 처리해야 하는 웹 서버에 매우 적합합니다.

---

3. 코드로 배우기

3.1. 구현 목표

JavaScript 코드를 통해 동기적 흐름과 비동기적 흐름의 실행 순서 차이를 직접 확인합니다.

 

3.2. [1단계: 동기(Synchronous) 코드 실행]

아래 코드는 위에서 아래로, 한 줄씩 순서대로 실행됩니다. heavyTask 함수가 실행되는 3초 동안 프로그램은 다른 어떤 작업도 하지 않고 '멈춰' 있습니다.

function heavyTask() {
  console.log('무거운 작업 시작!');
  const start = Date.now();
       //3초 동안 CPU를 점유하여 블로킹을 흉내 냅니다.
  while (Date.now() - start < 3000) {}
  console.log('무거운 작업 끝!');
}

console.log('START');
heavyTask();
console.log('END');


//결과
// START
//   무거운 작업 시작!
//   (3초 대기)
//   무거운 작업 끝!
//END

 

3.3. [2단계: 비동기(Asynchronous) 코드 실행]

setTimeout은 대표적인 비동기 함수입니다. setTimeout을 실행하면, 브라우저에게 "3초 뒤에 이 함수를 실행해줘"라고 요청만 하고, 결과를 기다리지 않고 바로 다음 줄인 console.log('END')로 넘어갑니다

function lightTask() {
  console.log('가벼운 작업!');
}

console.log('START');

   //3초(3000ms) 뒤에 콜백 함수를 실행하라고 요청하고, 기다리지 않음
setTimeout(() => {
  console.log('비동기 작업 수행!');
}, 3000);

lightTask();
console.log('END');

//실행 결과
//   START
//   가벼운 작업!
//   END
//   (약 3초 뒤)
//비동기 작업 수행!

---

4. 전체 코드

//동기(Synchronous) 실행 예제
function heavyTask() {
  console.log('무거운 작업 시작!');
  const start = Date.now();
  while (Date.now() - start < 3000) {}
  console.log('무거운 작업 끝!');
}

console.log('--- 동기 코드 시작 ---');
console.log('START');
heavyTask();
console.log('END');
console.log('--- 동기 코드 끝 ---\n');


//비동기(Asynchronous) 실행 예제
function lightTask() {
  console.log('가벼운 작업!');
}

console.log('--- 비동기 코드 시작 ---');
console.log('START');

setTimeout(() => {
  console.log('비동기 작업 수행!');
}, 3000);

lightTask();
console.log('END');
console.log('--- 비동기 코드 끝 ---');