JS 이벤트 처리 - 7(Promise)

학습 목표

1. Promise 타입에 대해 알아 보자.

2. Promise 타입 선언과 활용

 

1. Promise 타입에 대해 알아 보자.

자바스크립트 Promise는 비동기 작업을 처리하기 위한 객체입니다. Promise는 어떤 작업의 결과를 반환하는 객체로서, 이를 통해 비동기적으로 실행되는 작업을 처리하고 그 결과를 콜백 함수 등을 이용해 처리할 수 있습니다.

Promise는 총 3가지 상태를 갖습니다.

1. 대기(pending): Promise 객체가 생성되었으나 아직 처리가 진행되지 않은 상태입니다.
2. 이행(fulfilled): Promise 객체가 처리를 완료하여 결과를 반환한 상태입니다.
3. 거부(rejected): Promise 객체가 처리를 실패하였거나 오류가 발생한 상태입니다.

자바스크립트 엔진은 싱글 스레드로 동작하며, 이벤트 루프를 통해 비동기 작업을 처리합니다.

-------------------------------
|            Browser           |
|   -------------------------  |
|  |       JavaScript       |  |
|  |   Engine               |  |
|  |   +-----------+        |  |
|  |   |Call Stack |        |  |
|  |   +-----------+        |  |
|  |                       |  |
|  |   +-----------+        |  |
|  |   |Message    |        |  |
|  |   |Queue      |        |  |
|  |   +-----------+        |  |
|  |                       |  |
|  |         Event         |  |
|  |         Loop          |  |
|  |                       |  |
|   -------------------------  |
|                              |
 -------------------------------

1. **Call Stack**은 현재 실행 중인 함수의 스택입니다. 함수가 호출될 때마다 스택에 추가되고, 함수가 종료되면 스택에서 제거됩니다.
2. **Message Queue**는 비동기 작업 (예: setTimeout, 이벤트 리스너의 콜백)이 완료되면 해당 콜백 함수가 추가되는 큐입니다.
3. **Event Loop**는 계속해서 **Call Stack**과 **Message Queue**를 확인합니다. 만약 **Call Stack**이 비어 있고, **Message Queue**에 작업이 있으면, **Event Loop**는 **Message Queue**의 작업을 **Call Stack**으로 이동시켜 실행합니다.

 

2. Promise 타입 선언과 활용

 

 

resolve 와 reject 란 resolve와 reject는 Promise의 생성자 함수 내부에서 제공되는 콜백 함수의 매개변수입니다. 각각의 매개변수는 특정 함수를 나타내며, 이 함수들을 호출함으로써 Promise의 상태를 변경할 수 있습니다. resolve : resolve는 함수 타입의 매개변수입니다. resolve 함수가 호출되면, 해당 Promise의 상태는 **pending(대기)**에서 **fulfilled(이행)**로 변경됩니다. resolve 함수에 전달된 값은 Promise의 결과 값이 됩니다. 이 값은 .then() 메서드의 첫 번째 콜백 함수로 전달됩니다. 예: 위의 코드에서 "아메리카노가 나왔습니다" 또는 "라떼가 나왔습니다"는 .then()에서 받을 수 있는 값입니다. reject : reject 역시 함수 타입의 매개변수입니다. reject 함수가 호출되면, 해당 Promise의 상태는 **pending(대기)**에서 **rejected(거부)**로 변경됩니다. reject 함수에 전달된 값은 Promise의 거부 이유가 됩니다. 이 값은 .catch() 메서드 또는 .then()의 두 번째 콜백 함수로 전달될 수 있습니다. 예: 위의 코드에서 "죄송합니다 오늘 재료가 모두 소진 되었습니다"는 .catch()나 .then()의 두 번째 콜백에서 받을 수 있는 값입니다. 이렇게 resolve와 reject를 사용하면 비동기 작업의 결과나 오류를 알릴 수 있으며, 이에 따라 후속 처리를 진행할 수 있습니다.

 

결과