비동기 프로그래밍

비동기 프로그래밍

JavaScript는 단일 스레드 언어이지만, 비동기 프로그래밍을 통해 효율적으로 여러 작업을 처리할 수 있습니다. 이 챕터에서는 JavaScript의 비동기 처리 패턴과 그 발전 과정을 살펴보겠습니다.

비동기 처리 개념

동기식 vs 비동기식 처리

동기식 처리(Synchronous Processing) :

• 코드가 순차적으로 실행됩니다.
• 한 작업이 완료될 때까지 다음 작업은 대기합니다.
• 작업 흐름이 예측 가능하고 이해하기 쉽습니다.
• 시간이 오래 걸리는 작업이 있으면 전체 프로그램이 차단됩니다.

// 동기식 처리 예제
console.log("작업 1");
console.log("작업 2");
console.log("작업 3");

// 출력 순서: "작업 1", "작업 2", "작업 3"

비동기식 처리(Asynchronous Processing) :

• 작업이 완료될 때까지 기다리지 않고 다음 작업을 실행합니다.
• 시간이 오래 걸리는 작업(네트워크 요청, 파일 처리 등)을 효율적으로 처리할 수 있습니다.
• 작업이 완료되면 콜백 함수나 프로미스 등을 통해 결과를 처리합니다.
• 코드 실행 순서가 예측하기 어려울 수 있습니다.

// 비동기식 처리 예제
console.log("작업 1");
setTimeout(() => {
  console.log("작업 2 (2초 후 실행)");
}, 2000);
console.log("작업 3");

// 출력 순서: "작업 1", "작업 3", "작업 2 (2초 후 실행)"

JavaScript의 이벤트 루프

JavaScript의 비동기 처리는 이벤트 루프(Event Loop)라는 메커니즘에 의해 관리됩니다.

이벤트 루프의 주요 구성 요소:

1. 콜 스택(Call Stack): 함수 호출을 추적하는 데이터 구조
2. 태스크 큐(Task Queue/Callback Queue): 비동기 콜백을 저장하는 큐
3. 마이크로태스크 큐(Microtask Queue): 프로미스 콜백 같은 높은 우선순위 태스크를 저장
4. 이벤트 루프: 콜 스택이 비었을 때 큐에서 태스크를 콜 스택으로 이동

이벤트 루프 동작 과정:

1. 코드가 실행되면 함수 호출은 콜 스택에 쌓입니다.
2. 비동기 함수는 실행 환경(브라우저 API, Node.js API 등)에 전달됩니다.
3. 비동기 작업이 완료되면 콜백이 태스크 큐나 마이크로태스크 큐에 추가됩니다.
4. 콜 스택이 비면 이벤트 루프는 먼저 마이크로태스크 큐, 그 다음 태스크 큐에서 태스크를 콜 스택으로 이동시킵니다.
5. 이 과정이 반복됩니다.

console.log("시작");

setTimeout(() => {
  console.log("타임아웃 콜백");
}, 0);

Promise.resolve().then(() => {
  console.log("프로미스 콜백");
});

console.log("종료");

// 출력 순서: "시작", "종료", "프로미스 콜백", "타임아웃 콜백"
// (프로미스 콜백은 마이크로태스크 큐에, 타임아웃 콜백은 태스크 큐에 들어가기 때문)