<aside> 📌 요약: 자바스크립트 엔진은 싱글 스레드로, 비동기적인 작업을 하지 못하지만 이벤트루프와 비동기API와 큐(Task queue, Job queue)등을 통해서 비동기 처리를 구현할 수 있다. 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면 프로그램을 멈추게 하기 때문에 무거운 작업은 되도록 비동기로 작동하도록 로직을 구성하는게 좋다.
비동기 API의 예시로는 setTimeout, XMLHttpReuqest, fetch 등의 Web API가 있다.
자바스크립트 메인스레드에서는 excution context stack이라고도 불리는 call stack에 함수 단위로 쌓게되고, 비동기 작업을 한다면 외부 API 모듈에서 비동기 요청을 처리한 후에 Task queue에 콜백 함수를 넣는다. 이때 event loop는 계속 콜스택이 비어있는지 확인하고, 비어있다면 task queue에 있는 콜백 함수를 콜스택에 쌓는다. Job queue는 Promise로 작업한 콜백을 넣는 큐이며, 우선순위가 Task queue 보다 높다.
Promise는 비동기 API중 하나이다. Job queue를 사용하며, 우선순위가 Task queue보다 높다. 비동기 작업을 표현하는 자바스크립트 객체이며, 비동기 작업의 처리 순서를 표현할 수 있고, 진행, 성공, 실패 상태를 표현한다.
new Promise(callback) 에서 callback 함수는 (resolve, reject) 두 인자를 받는데, 성공했을때는 resolve를 호출하고 실패했을때는 reject를 호출한다. promise.then() 메서드에는 성공했을 때 실행할 콜백함수를 인자로 넘기고, promise.catch() 메서드에는 실패했을때 실행할 콜백 함수를 인자로 넘긴다. promise.finally() 메서드는 성공/실패 여부와 상관 없이 모두 실행할 콜백 함수를 인자로 넘긴다. then(callback1, callback2)로 callback1에는 성공, callback2에는 실패 메서드를 인자로 넘길 수 있다.
비동기를 활용한 테크닉으로, 디바운싱과 쓰로틀링이 있다. 일정 시간동안 입력이 일어나지 않으면 요청을 보낸다던가, 타이핑 도중에 요청을 계속 보낸다던가 등과 같은 기능을 만들고 싶을때 유용하게 사용한다.
fetch 비동기 web api는 JSON파일을 읽거나 API요청을 하는 등에 사용된다.
</aside>