💡 학습 목표
Promise 타입에 대해 알아 보자.Promise 타입 선언과 활용
1. Promise 타입에 대해 알아 보자.
자바스크립트 Promise는 비동기 작업을 처리하기 위한 객체입니다. Promise는 어떤 작업의 결과를 반환하는 객체로서, 이를 통해 비동기적으로 실행되는 작업을 처리하고 그 결과를 콜백 함수 등을 이용해 처리할 수 있습니다.
Promise는 총 3가지 상태를 갖습니다.
- 대기(pending): Promise 객체가 생성되었으나 아직 처리가 진행되지 않은 상태입니다.
- 이행(fulfilled): Promise 객체가 처리를 완료하여 결과를 반환한 상태입니다.
- 거부(rejected): Promise 객체가 처리를 실패하였거나 오류가 발생한 상태입니다.
💡 잠깐! 웹 브라우저 안에 자바스크립트 엔진은 싱글 스레드로 동작하며, 이벤트 루프를 통해 비동기 작업을 처리합니다.
사전 기반 지식 - 자바스크립트 엔진(v8)
js 엔진 내부만 보면 크게 Memory Heap & Call stack 2개의 파트가 있다.
Memory Heap
- 데이터를 임시 저장하는 곳으로, 함수나 변수, 함수를 실행할 때 사용하는 값들을 저장한다. heap 저장공간 을 떠올리면 된다.
- 해당 부분에서 이제 더 이상 사용되지 않는 변수나 데이터 덩어리를 비워주는 GC(Garbage Collection) 가 있다.
Call stack
- 코드가 "실행"되면 순서를 기록해 놓고, 하나씩 순차적으로 꺼내서 실제로 실행할 수 있도록 도와주는 공간이다. stack 자료구조 형태이며 Last In, First Out ( LIFO ) 원칙을 따른다.
2. Promise 타입 선언과 활용
첫번째 소화 시키는 방법 살펴 보기
async/await 사용 방식
💡 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를 사용하면 비동기 작업의 결과나 오류를 알릴 수 있으며, 이에 따라 후속 처리를 진행할 수 있습니다.
두번째 소화 시키는 방법 살펴 보기
명시적 체인 (Explicit Chaining) 사용 방법 then, catch, finally 메서드를 통해 콜백 함수를 체인으로 연결하는 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="runOrderCoffee2('소주')"> Promise Callback Test </button>
<script>
// 커피를 주문하고 만드는 가상의 비동기 함수 선언
// Promise 타입을 반환한다(객체를 반환)
function orderCoffee(order) {
return new Promise( function(resolve, reject) {
// 기존 제공하는 setTimeout API 활용
setTimeout(function() {
if(order === "아메리카노" ) {
resolve("아메리카노가 나왔습니다.");
} else if( order === "라떼") {
resolve("라떼가 나왔습니다.");
} else {
reject("죄송합니다 오늘 재료가 모두 소진 되었습니다");
}
}, 2000);
});
}
// Promise 타입을 소화 시키는 방법 - 1
// 'async' 키워드와 await 를 사용하여 비동기식 코드를 동기식 방법으로 간결하게 소화 시킬 수 있다.
// 주의 - 비동적 방식이다.
async function runOrderCoffee1(order) {
console .log("start ......................");
try {
const result = await orderCoffee(order);
console.log(result);
} catch(error) {
console.log(error);
}
console .log("end ......................");
}
// 소화시키는 방법 2 -> then() 과 catch() 메서드 활용
function runOrderCoffee2(order) {
console .log("start ......................");
orderCoffee(order)
.then((message) => {
console.log(message);
})
.catch((error) => {
console.log(error);
});
console .log("end ......................");
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 게시판 만들어 보기 - Only JavaScript ( 1. 로컬스토리지(localStorage)란? (0) | 2024.12.26 |
|---|---|
| JS 이벤트 처리 - 8(AJAX 와 Fetch API) (0) | 2024.12.23 |
| JS 이벤트 처리 - 6(배너변경하기) (0) | 2024.12.23 |
| JS 이벤트 처리 - 5(이미지 토글) (1) | 2024.12.22 |
| JS 이벤트 처리 - 4(반복문과동적생성) (0) | 2024.12.22 |
