비동기의 등장배경, 이벤트 루프와 콜백 큐, Promise 실생활 예시, Promise 생성자 사용법

- 비동기의 등장 배경
- Event Loop와 Callback Queue 이해하기
- Promise를 실생활에 비유한다면?
- 기본적인 Promise 생성자 사용법

 

오늘 생각해볼 내용 => 비동기의 등장배경

 

동기와 비동기란? => 코드를 실행하는 순서에 대한 정의 방식

 

자바스크립트에서 동기의 의미 => Call Stack에 대해서 알아야 함

자바스크립트와 Web Api의 Event Loop 도식도

 

자바스크립트를 실행하는 구성요소 : Memory Heap(repernce타입 데이터가 저장되는 장소)과 Call Stack

 

Call Stack!

 

Call -> 함수

Stack -> 자료구조로 쌓여있는 것을 의미

 

그림을 보면 알 수 있듯이 자바스크립트의 Call Stack은 하나 밖에 없음!

 

문제점 발생!

 

=> 동기적으로 자료를 받아오게되면 하나의 콜이 처리되는동안 스택안의 다른 콜들은 아무것도못하고 진행중인 콜이 끝나기만을 기다림

ex) 사이트의 사진이나 동영상이 로딩되는동안 마우스나 스크롤을 내릴 수 없게되는 것

 

그 한계를 극복하기 위해 비동기적인 프로그래밍이 등장!!

 

해결방안!

 

=> Call Stack이 여러개가 있으면 가능! => Web APIS들(DOM, AJAX, setTimeout)이 Call Stack이 여러개인 것처럼 기능하게 만듦

즉, 자바스크립트의 Call Stack은 한 개이지만

Web APIS의 도움을 받아 Call Stack이 여러개인 것처럼 가능하게 만듦으로써 비동기적인 구현을 가능하게 함.

 

Web API들을 어떤식으로 Call Stack이 여러개인 것처럼 가능하게 하지?

-> Web API는 Javascript에 Callback Queue와 Event Loop기능을 제공함

 

* Call Stack은 Stack에 들어온 Call(함수)가 처리되면 바로바로 빼내서 내부를 비우려는 특성을 가지고있음

 

Web APIs가 구현하는 Event Loop와 Callback Queue 이해하기

 

1. 브라우저 console에 setTimeout함수를 실행.

Event Loop 도식도

 

2. setTimeout함수가 Call Stack에 들어가고 실행됨

 

3. 해당 함수의 실행 결과로 브라우저는 Web APIs에 timer(ex1)를 생성함

 

4. setTimeout(function ex1(){console.log('hello')}, 1000)은 실행됐으므로 Call Stack에서 빼내어짐

 

5. Web APIs는 timer(ex1)함수를 실행하고, 1초의 시간이 지난 뒤 ex1 함수를 Callback Queue에 넣어줌

 

6. 이벤트루프(Event Loop)는 Call Stack이 비어있는걸 확인하고 ex1 함수를 Call Stack에 넣어줌

 

7. ex1함수가 실행되고 그 위에 console.log('hello')가 쌓임

 

8. console.log('hello')가 실행되고 콘솔에 'hello'가 출력됨

 

9. console.log('hello')가 Call Stack에서 빼내어짐

 

10. 더이상 실행되는 함수가 남지 않은 ex1함수도 Call Stack에서 빼내어짐

 

Promise 실생활 예시

 

소비자 -> 쿠팡 (AA상표 삼겹살 살게요)

쿠팡 -> 소비자(AA상표 삼겹살, 재고가 없어요 - fail)

 

소비자 -> 쿠팡 (그럼 BB상표 삼겹살 살게요)

쿠팡 -> 소비자(BB상표 삼겹살, 결제됐어요 - success)

 

소비자 -> 쿠팡 (BB상표 삼겹살 언제와요?)

쿠팡 -> 소비자(BB상표 삼겹살, 배송진행중이에요 -위치는 a물류창고에요 - success)

 

소비자 -> 쿠팡 (BB상표 삼겹살 언제와요?)

쿠팡 -> 소비자(BB상표 삼겹살, 배송진행중이에요 -위치는 b물류창고에요 - success)

 

소비자 -> 쿠팡 (BB상표 삼겹살 언제와요?)

쿠팡 -> 소비자(BB상표 삼겹살, 배송완료입니다! - success)

 

Promis 생성자

const 삼겹살 = new Promise((resolve, reject) => {
// resolve()의 인자는 성공한경우, reject()의 인자는 실패한경우 실행되는 함수
resolve("삼겹살 주문이 완료되었습니다")
reject("삼겹살 주문에 실패했습니다")
})

 

 

 

 

reference

 

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

https://charming-kyu.tistory.com/19

https://youtu.be/OITMfwqmUNY