[week_05] 비동기 통신과 Promise

1. 자바스크립트 제어 흐름

• 자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리한다.
  • 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행

  • console.log('1');
    
    setTimeout(() => {console.log('2');}, 1000);
    
    console.log('3');

  • 다른 멀티스레드 언어에서의 결과: '1'출력 →  1초 후 '2' 출력 → '3'출력
  • 자바스크립트에서의 결과: '1'출력 → '3'출력 → 1초 후 '2' 출력
• 자바스크립트 엔진
  • 하나의 메인 스레드로 구성 (즉, 단 하나의 Call stack을 사용)
  • 메인 스레드는 코드를 읽어 한 줄씩 실행
  • 브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그린다

1-1. 동기적 제어 흐름

• 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것
• 분기문, 반복문, 함수 호출 등
• 코드의 흐름과 실제 제어 흐름이 동일
• 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면, 프로그램을 멈추게 한다.

1-2. 비동기적 제어 흐름

• 현재 실행 중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것
• 프로미스, 콜백 함수를 호출하는 함수 등
• 코드 흐름과 실제 제어 흐름이 다르다
• 비동기 작업을 기다리는 동안 메인 스레드는 다른 작업을 처리한다.

출처: https://adrianmejia.com/asynchronous-vs-synchronous-handling-concurrency-in-javascript/

 

2. 이벤트 루프

• 자바스크립트 엔진은 비동기 처리를 제공하지 않는다.
• 대신, 비동기 코드는 정해진 함수를 제공하여 활용할 수 있다. 이 때, 이 함수들을 API라 한다.
  
  • setTimeout, XMLHttpRequest, fetch 등의 Web API가 있다.
• node.js의 경우 파일 처리 API, 암호화 API 등을 제공한다.

2-1. 비동기 처리 모델

• 메인 스레드: Call stack을 이용해서 코드를 읽고 실행
• 비동기 환경: Task queue, Job queue
• 이벤트 루프: 비동기 코드 호출, 비동기 코드 처리, 결과 함수 반환
• 비동기 코드를 처리하는 모듈은 자바스크립트 엔진 외부에 존재
• API 모듈은 비동기 요청을 처리 후 Task queue에 콜백 함수를 넣는다.
• 자바스크립트 엔진은 Call stack이 비워지면, Task queue의 콜백 함수를 실행한다.

2-2. 자바스크립트 비동기 처리 예시

• Web API: 브라우저에서 제공되는 API이다. 자바스크립트 엔진에서 정의되지 않았던 setTimeout이나 HTTP 요청(ajax) 메서드, DOM 이벤트 등의 메서드를 지원한다.
• Task Queue: 이벤트 발생 후 호출되어야 할 콜백 함수들이 기다리는 공간. 이벤트 루프가 정한 순서대로 줄을 서 있으므로 콜백 큐(Callback Queue)라고도 한다. 자바스크립트에서 비동기로 호출되는 함수들은 호출 스택(Call Stack)에 쌓이지 않고 태스크 큐(Task Queue)로 보내진다.
• Event Loop: 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서를 결정한다.

다음 코드를 실행하고 어떤 일이 발생하는지 알아보자.

console.log('Hi');

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

console.log('Bye');

 

1. 제일 처음에는 콘솔, Call Stack 등 모든 것이 비워진 상태로 시작된다.

2. console.log('Hi')가 호출되어 Call Stack에 쌓인다.

3. console.log('Hi')가 실행되어 콘솔에 Hi가 찍힌다.

4. console.log('Hi')가 리턴되며 Call Stack에서 제거된다.

5. setTimeout(function cb1() {...})가 실행되면서 Call Stack에 setTimeout함수가 들어간다.

6. setTimeout함수는 자바스크립트 엔진이 처리하지 않고 Web API가 처리하므로 Callback함수를 전달한다. 브라우저는 Wep API의 일부로 타이머를 만들고, Call Stack으로부터 요청받은 setTimeout작업을 처리할 준비를 한다.

7. Call Stack에서는 setTimeout작업이 제거된다.

8. console.log('Bye')가 호출되어 Call Stack에 쌓인다.

9. console.log('Bye')가 실행되어 콘솔에 Bye가 찍힌다.

10. console.log('Bye')가 리턴되며 Call Stack에서 제거된다.

11. Web API가 setTimeout작업을 실행한다. 5초 후 타이머가 완료되면 cb1 Callback함수를 Task(Callback) Queue로 보낸다.

12. Event Loop는 Call Stack이 비어있으면 Task(Callback) Queue에서 함수를 하나씩 꺼내 Call Stack에 넣는다.

13. cb1이 실행되면서 console.log('cb1')이 호출되어 Call Stack에 쌓인다.

14. console.log('cb1')이 실행되어 콘솔에 cb1이 찍힌다.

15. console.log('cb1')이 리턴되며 Call Stack에서 제거된다.

16. cb1이 Call Stack에서 제거되며 모든 작업이 완료된다.

 

3. Promise

• 비동기 API 중 하나이다.
• Job queue(microtask queue)를 사용한다.
• Job queue는 Task queue보다 우선순위가 높다.

• setTimeout(() => {console.log("타임아웃1");}, 0);
  
  Promise.resolve().then(() => console.log("프로미스1"));
  
  setTimeout(() => {console.log("타임아웃2");}, 0);
  
  Promise.resolve().then(() => console.log("프로미스2"));
  
  // 프로미스1 프로미스2
  // 타임아웃1 타임아웃2

• 비동기 작업을 표현하는 자바스크립트 객체
• 비동기 작업의 진행(Pending), 성공(Fulfilled, Resolved ➡ .then()), 실패(Rejected ➡ .catch()) 상태를 표현
• 비동기 처리의 순서를 표현할 수 있다.

3-1. Promise 생성자

• new Promise(callback)
• callback 함수는 (resolve, reject) 두 인자를 받는다.
• Promise 성공 시: resolve 호출
• Promise 실패 시: reject 호출

• let promise = new Promise((resolve, reject) => {
  	if (Math.random() < 0.5) { return reject("실패"); }
      resolve(10);
  });

• .then(): 성공했을 때 실행할 콜백함수를 인자로 넘김
  • .then(callback1, callback2)로 callback1의 자리에 성공, callback2의 자리에 실패 메서드를 인자로 넘길 수 있다.
  • ex) .then(function onSuccess() {...}, function onFail() {...})
• .catch(): 실패했을 때 실행할 콜백함수를 인자로 넘김
• .finally(): 성공/실패 여부와 상관없이 모두 실행할 콜백함수를 인자로 넘김
• .all(): Promise의 배열을 받아 모두 성공 시 각 Promise의 resolved값을 배열로 반환
  • 하나의 Promise라도 실패할 시, 가장 먼저 실패한 Promise의 실패 이유를 반환

  • Promise.all([promise1, promise2, promise3])
    	.then(values => {console.log("모두 성공: ", values)})
        .catch(e => {console.log("하나라도 실패: ", e)})

3-2. Promise 메서드 체인

• then/catch 메서드가 또 다른 promise를 리턴하여, 비동기 코드에 순서를 부여
• 이렇게 동일한 객체에 메서드를 연결할 수 있는 것을 체이닝(Chaining)이라 한다.
• 함수를 호출한 주체가 함수를 끝낸 뒤 자기 자신을 리턴하도록 하여 구현한다.

 

 

 

참고

https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5

 

https://ingg.dev/js-work/