시작하기앞서
자바스크립트는 단일 쓰레드입니다. 콜스택에 실행할 함수가 있는동안은 다른 작업을 수행하지 못합니다. 많은 구성 요소들 중 단 하나만 '지금' 실행되고 나머지는 '나중에' 실행됩니다.
다시 말해 '지금' 완료할 수 없는 동작은 비동기적으로 수행된다는 것입니다.
function first() {
console.log('first');
}
function second() {
console.log('second');
}
function third() {
console.log('third');
}
first();
setTimeout(second, 1000); // Invoke `second` after 1000ms
third();
----------------------------------------------
> first
third
second우리의 유명한 비동기 예제입니다. setTimeout함수는 타임아웃 이벤트를 만들어서 나중에 수행되도록 하는 것입니다.
이벤트 루프 컽!
ES6 전에는 자바스크립트에 비동기성이 어떻게 들어가 있는지 직접적으로 알아낼 방법이 없었죠. 자바스크립트 엔진도 그냥 당신이 만든 프로그램을 실행한 것 뿐입니다.
그럼 누가 엔진에게 프로그램을 돌리라 할까요? 엔진은 혼자 돌고있는게 아니라 Node.js 나 브라우저같은 호스팅 환경에서 돌아가고 있습니다.
이 모든 환경에서 공통적으로 내장된 메카니즘이 이벤트루프 입니다.
이벤트 루프란 결국 하나의 간단한 일을 담당합니다. Call Stack과 Callback Queue를 모니터링하는 것입니다. 콜스택이 비어있다면 큐에서 첫 작업을 꺼내 콜스택으로 효율적으로 넣는 일을 합니다.
위와 같은 작업을 tick이라 부릅니다.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
ES6에서는 이벤트루프를 JS 엔진의 영역이지 호스팅 환경의 역할이 아니라고 말합니다. 이 이유는 ES6에서 소개된 Promise가 이벤트루프 큐에 직접적이고 정밀한 제어가 필요했기 때문이죠.
ES6에서의 Jobs란?
ES6에서 처음으로 Job Queue가 소개되었습니다.
잡큐를 이벤트 루프 큐의 모든 틱 후에 붙는 것이라 상상하면 됩니다. 하나의 새로운 이벤트가 아닌 이벤트 큐의 한 틱에 실행될수도 있는 비동기 액션인 것입니다.
Job은 setTimeout(callback, 0) "hack"과 유사하지만 훨씬 견고하게 구현되었습니다.
callback? promise? async?
모두들 알다시피 콜백이 자바스크립트에서 비동기처리를 표현할 수 있는 방법이었죠. 하지만 콜백에 콜백에 콜백에... 콜백 지옥이 펼쳐지는 경우가 있었죠. 이런 문제를 해결하기 위해 Promise가 등장하게 됩니다.
이후 Async가 프로미스를 한번 더 대체하게 되죠. Async 함수가 호출되면 그것은 Promise를 반환합니다. Async 함수가 어떤 값을 반환하면 그것은 Promise가 아닙니다. 이미 resolve가 된 Promise의 값을 반환 하는 것이지요. Async 함수가 exception을 발생시키면 Promise의 reject가 발동된 것입니다.
결론적으로 async/await은 promise를 간결하게 만들려 한것입니다.
