Promise란 무엇인가요?
_____A1: Promise는 자바스크립트에서 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. 비동기 작업이 성공적으로 완료되면 값을 반환하고, 실패하면 에러를 반환하는 메커니즘을 제공합니다.
Q2: Promise의 상태(state)는 어떤 것이 있나요?
A2: Promise는 세 가지 상태를 가집니다.
- Pending(대기): 초기 상태로, 작업이 아직 완료되지 않음
- Fulfilled(이행): 작업이 성공적으로 완료되어 결과 값을 반환함
- Rejected(거부): 작업이 실패하여 이유(에러)를 반환함
Q3: Promise를 사용하는 이유는 무엇인가요?
A3: 비동기 작업을 처리할 때 콜백 지옥(callback hell)을 방지하고, 코드의 가독성과 유지보수성을 향상시키기 위해 사용합니다. Promise를 사용하면 비동기 작업의 순차적 실행과 에러 처리가 간편해집니다.
Q4: Promise를 생성하는 기본 문법은 어떻게 되나요?
A4: Promise는 new Promise() 생성자를 통해 만듭니다. 생성자는 실행(resolve, reject)를 처리하는 두 개의 함수를 인수로 받는 콜백 함수를 인자로 가집니다.
```js
const promise = new Promise((resolve, reject) => {
// 비동기 작업 처리
if(성공) {
resolve(결과값);
} else {
reject(에러);
}
```
Q5: Promise 결과를 어떻게 받나요?
A5: Promise는 then(), catch(), finally() 메서드를 사용해 결과를 처리합니다.
- then(onFulfilled, onRejected): 성공 시 콜백 처리
- catch(onRejected): 실패 시 콜백 처리
- finally(onFinally): 성공/실패 여부와 관계없이 항상 실행
Q6: Promise 체이닝이란 무엇인가요?
A6: then() 메서드는 새로운 Promise를 반환하기 때문에 여러 개의 then()을 연결해 순차적으로 비동기 작업을 실행하는 것을 의미합니다. 이를 Promise 체이닝이라고 합니다.
Q7: Promise와 async/await의 관계는 무엇인가요?
A7: async/await는 Promise를 기반으로 한 문법 설탕(syntactic sugar)으로, 비동기 코드를 동기 코드처럼 작성할 수 있게 해 줍니다. async 함수는 항상 Promise를 반환하며, await 키워드는 Promise가 해결될 때까지 기다립니다.
Q8: Promise를 사용할 때 주의할 점은 무엇인가요?
A8: Promise를 올바르게 처리하지 않으면 예외가 누락되거나, 상태가 변하지 않아 비동기 작업이 중단될 수 있습니다. 반드시 reject 처리와 catch 문을 통해 에러를 처리해야 하며, 불필요한 중첩은 피하는 것이 좋습니다.
Q9: Promise.all()이란 무엇인가요?
A9: Promise.all()은 여러 개의 Promise를 병렬로 실행하고, 모든 Promise가 Fulfilled 상태가 되면 결과 값을 배열로 반환하는 메서드입니다. 하나라도 Rejected 상태가 되면 즉시 에러를 반환합니다.
Q10: Promise와 콜백 함수의 차이점은 무엇인가요?
A10: 콜백 함수는 함수에 넘겨진 함수로서, 비동기 작업 호출 후 결과 처리에 주로 사용됩니다. 하지만 콜백 지옥과 예외 처리가 어렵다는 단점이 있습니다. Promise는 콜백보다 명확한 상태 관리와 체이닝 구조를 제공해 가독성과 예외 처리가 더 쉽습니다.
비동기 프로그래밍은 웹 애플리케이션에서 매우 중요한 개념으로, 사용자 인터페이스가 차단되지 않고 동시에 여러 작업을 수행할 수 있게 해줍니다.
Promise는 이러한 비동기 작업의 결과를 나타내며, 성공적으로 완료되었는지 또는 실패했는지를 추적할 수 있도록 도와줍니다.
Promise의 기본 개념 Promise는 세 가지 상태를 가질 수 있습니다: 1. 대기(Pending) : 초기 상태로, 비동기 작업이 아직 완료되지 않았음을 나타냅니다.
2. 이행(Fulfilled) : 비동기 작업이 성공적으로 완료되었음을 나타내며, 이 상태에서는 결과값을 포함합니다.
3. 거부(Rejected) : 비동기 작업이 실패했음을 나타내며, 이 상태에서는 오류 정보를 포함합니다.
이러한 상태는 비동기 작업이 진행되는 동안 변화할 수 있으며, Promise는 이 상태 변화에 따라 적절한 처리를 할 수 있도록 메서드를 제공합니다.
Promise의 생성 Promise는 `Promise` 생성자를 사용하여 생성할 수 있습니다.
이 생성자는 두 개의 인자를 받는 함수를 인자로 받으며, 이 함수는 비동기 작업을 수행합니다.
이 함수 내에서 비동기 작업이 성공하면 `resolve` 함수를 호출하고, 실패하면 `reject` 함수를 호출합니다.
```javascript const myPromise = new Promise((resolve, reject) => { // 비동기 작업 수행 const success = true; // 예시를 위한 변수 if (success) { resolve("작업이 성공적으로 완료되었습니다.
"); } else { reject("작업이 실패했습니다.
"); } }); ``` Promise의 사용 Promise는 `then`, `catch`, `finally` 메서드를 사용하여 결과를 처리할 수 있습니다.
- then() : Promise가 이행되었을 때 호출되는 메서드입니다.
이행된 값은 `then`의 인자로 전달됩니다.
- catch() : Promise가 거부되었을 때 호출되는 메서드입니다.
거부된 이유는 `catch`의 인자로 전달됩니다.
- finally() : Promise가 이행되거나 거부된 후에 항상 호출되는 메서드입니다.
이 메서드는 결과와 상관없이 실행됩니다.
```javascript myPromise .then(result => { console.log(result); // "작업이 성공적으로 완료되었습니다.
" }) .catch(error => { console.error(error); // "작업이 실패했습니다.
" }) .finally(() => { console.log("비동기 작업이 완료되었습니다.
"); }); ``` Promise의 체이닝 Promise는 체이닝이 가능하여, 여러 비동기 작업을 순차적으로 실행할 수 있습니다.
각 `then` 메서드는 새로운 Promise를 반환하므로, 다음 `then` 메서드는 이전 `then`의 결과를 사용할 수 있습니다.
```javascript myPromise .then(result => { console.log(result); return "다음 작업으로 진행합니다.
"; }) .then(nextResult => { console.log(nextResult); }) .catch(error => { console.error(error); }); ``` Promise.all과 Promise.race Promise를 다룰 때 유용한 메서드로 `Promise.all`과 `Promise.race`가 있습니다.
- Promise.all : 여러 개의 Promise를 동시에 실행하고, 모든 Promise가 이행될 때까지 기다립니다.
모든 Promise가 성공적으로 이행되면 결과 배열을 반환하고, 하나라도 거부되면 즉시 거부됩니다.
```javascript const promise1 = Promise.resolve(
3); const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo')); const promise3 = 42; Promise.all([promise1, promise2, promise3]) .then(values => { console.log(values); // [3, "foo", 42] }); ``` - Promise.race : 여러 개의 Promise 중 가장 먼저 이행되거나 거부된 Promise의 결과를 반환합니다.
```javascript const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, '첫 번째')); const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, '두 번째')); Promise.race([promise1, promise2]) .then(value => { console.log(value); // "두 번째" }); ``` 결론 Promise는 자바스크립트에서 비동기 작업을 보다 쉽게 관리할 수 있는 강력한 도구입니다.
비동기 작업의 결과를 추적하고, 체이닝을 통해 여러 작업을 순차적으로 처리할 수 있으며, `Promise.all`과 `Promise.race`와 같은 메서드를 통해 여러 Promise를 동시에 관리할 수 있습니다.
이러한 기능들은 현대 웹 개발에서 비동기 프로그래밍을 보다 직관적이고 효율적으로 만들어 줍니다.
작성자:
김은호 [비회원]
| 작성일자: 1년 전
2024-09-08 14:47:22
조회수: 180 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
조회수: 180 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.