자바스크립트의 비동기 프로그래밍 Promise

비동기 프로그래밍의 반대 말은 동기 프로그래밍입니다.

동기 프로그래밍은 순차적으로 위에서 아래로 작성 된 순서대로 코드를 실행하는 프로그래밍법을 이야기하는데요

 

만약에 동기적으로 프로그래밍을 하다가 시간이 많이 걸리는 작업을 만나면 어떻게 될까요?

브라우저는 이 동기작업이 완료 될때까지 멈춰있게 됩니다.

 

이런 현상을 방지하고자 비동기적인 프로그래밍이 필요한데 자바스크립트 엔진에서는 브라우저의 웹 API 를 활용하여 비동기 프로그래밍을 할 수 있습니다.

 

자바스크립트 엔진에는 메모리 힙과 콜 스택이 있습니다.

그 중에서 콜 스택이 비동기 프로그래밍을 가능하게 하는데 어떻게 가능하게 하는지 살펴보겠습니다.

 

콜 스택에는 함수를 호출하면 함수의 실행 컨텍스트가 순차적으로 스택 구조로 쌓이게 됩니다.

그래서 호출스택(Call Stack) 이라고도 하며 이 실행 컨텍스트가 실행되고 종료되면 사라지게 됩니다.

이 방법은 어디까지나 동기적인 프로그래밍에서 이루어지고 비동기 코드는 웹 API로 위임됩니다.

위임 된 비동기 코드는 실행이 완료되면 Callback Queue 로 비동기 코드의 콜백 함수가 이동하게 되고

동기 코드들을 실행하던 Call stack 이 비어있다면 이 Callback Queue 의 콜백 함수들이 Call Stack 으로 이동하게 되는데 이러한 과정을 이벤트 루프라고 합니다.

 

큐의 종류

 

1. 태스크 큐(Task Queue) 

- 매크로 태스크 큐라고도 부르며 브라우저나 노드 환경에서 발생하는 이벤트와 콜백함수를 처리하는데 사용되고 setTimeout 이나 setinterval, I/O 작업, UI 이벤트 처리 등이 매크로 태스트 큐에 속합니다.

 

2. 마이크로 태스크 큐(Micro Task Queue) 

- Promise 나 MutationObserver 또는 asycn/await의 콜백들이 여기에 포함됩니다.

 

큐의 종류는 위의 2가지 외에도 애니메이션 프레임이 존재하는데 실행의 우선순위는 마이크로 태스트큐 -> 애니메이션 프레임 -> 태스크 큐 순서입니다.

또한 이벤트 루프는 마이크로 태스트 큐나 애니메이션을 방문할때는 큐 안에 있는 모든 작업들을 수행하지만 태스크 큐를 방문할때는 한번에 하나의 작업만 call stack 으로 전달하고 다른 queue 를 순회합니다.

 

예제)

console.log('script start');

setTimeout(function () {
  console.log('setTimeout');
}, 0);

Promise.resolve()
  .then(function () {
    console.log('promise1');
  })
  .then(function () {
    console.log('promise2');
  });

console.log('script end');

// script start
// script end
// promise1
// promise2
// setTimeout

 

실행순서는 아래와 같습니다.

 

1. 동기 코드가 먼저 실행됩니다. script start, end

2. 마이크로 태스크 큐의 Promise 함수가 실행됩니다. promise1, promise2

3. 태스트 큐의 함수들이 실행됩니다. setTimeout