Q: 비동기 프로그래밍에서 'promise'란 무엇인가요?
A: Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체로, 미래에 어떤 값이 반환될 것을 약속(promise)하는 역할을 합니다. 콜백 함수보다 가독성이 좋고 에러 처리도 용이합니다.
Q: Promise를 사용하는 기본적인 예시는 어떻게 되나요?
A: 비동기 작업(예: 서버에서 데이터 가져오기 등)을 수행할 때 Promise를 생성하고, 작업이 성공하면 `resolve()`를, 실패하면 `reject()`를 호출합니다.
```javascript
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // 작업 결과를 가정
if (success) {
resolve('작업 성공!');
} else {
reject('작업 실패!');
}
}, 1000);
});
myPromise
.then(result => console.log(result)) // 작업 성공 시 호출됨
.catch(error => console.error(error)); // 작업 실패 시 호출됨
```
Q: Promise 사용의 장점은 무엇인가요?
A: 콜백 지옥(callback hell)을 방지해 코드가 깔끔해지고, `.then()`, `.catch()`, `.finally()` 체이닝을 통해 흐름 제어가 용이하며, 에러 처리를 한 곳에서 할 수 있습니다.
Q: 비동기 함수에서 Promise를 반환하는 경우는 언제인가요?
A: 예를 들어, fetch API나 파일 읽기 등 외부 작업이 완료되면 결과를 반환하는 함수에서 Promise를 반환해 호출하는 쪽에서 `.then()`이나 `async/await`으로 처리할 수 있습니다.
```javascript
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('데이터 로드 완료');
}, 1500);
});
}
fetchData().then(data => console.log(data));
```
Q: async/await과 Promise는 어떻게 관련되나요?
A: async 함수는 내부에서 Promise를 반환하며, `await` 키워드는 Promise가 처리될 때까지 기다립니다. Promise를 더 직관적으로 사용할 수 있게 돕습니다.
```javascript
async function getData() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error(error);
}
}
getData();
```
요약: Promise는 비동기 작업의 성공 또는 실패를 표현하는 객체로, 콜백보다 명확한 흐름 제어와 에러 관리를 제공합니다. 기본적으로 Promise를 생성하고, `.then()`과 `.catch()`를 활용하여 결과를 처리하며, `async/await` 구문과 함께 사용하면 더욱 편리합니다.
비동기 프로그래밍에서 'Promise'는 JavaScript에서 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. Promise는 비동기 작업이 완료되었을 때의 결과값을 다루기 쉽게 만들어 주며, 코드의 가독성을 높이고 콜백 헬(<a href='https://sangseek.com/sangseeks/callback/ko'>callback</a> hell) 문제를 해결하는 데 도움을 줍니다. Promise는 세 가지 상태를 가집니다: 대기(pending), 이행(fulfilled), 거부(rejected). Promise의 기본 사용 예시 1. Promise 생성 : Promise는 `new Promise()` 생성자를 사용하여 생성할 수 있습니다. 이 생성자는 두 개의 인자를 받는 함수를 인자로 받습니다. 이 함수는 비동기 작업을 수행하고, 성공 시 `resolve`를 호출하고, 실패 시 `reject`를 호출합니다. ```javascript const myPromise = new Promise((resolve, reject) => { const success = true; // 비동기 작업의 성공 여부를 나타내는 변수 if (success) { resolve("작업이 성공적으로 완료되었습니다."); } else { reject("작업이 실패했습니다."); } }); ``` 2. <a href='https://sangseek.com/sangseeks/Promise 사용/ko'>Promise 사용</a>하기 : Promise를 사용하여 비동기 작업의 결과를 처리할 수 있습니다. `then()` 메서드는 Promise가 이행되었을 때 호출되는 콜백 함수를 등록하고, `catch()` 메서드는 Promise가 거부되었을 때 호출되는 콜백 함수를 등록합니다. ```javascript myPromise .then(result => { console.log(result); // "작업이 성공적으로 완료되었습니다." }) .catch(error => { console.error(error); // "작업이 실패했습니다." }); ``` 3. Promise 체이닝 : 여러 개의 비동기 작업을 순차적으로 처리할 때 Promise 체이닝을 사용할 수 있습니다. 각 `then()` 메서드는 이전 Promise의 결과를 다음 Promise로 전달합니다. ```javascript const <a href='https://sangseek.com/sangseeks/fetchData/ko'>fetchData</a> = () => { return new Promise((resolve) => { setTimeout(() => { resolve("데이터를 가져왔습니다."); }, 1000); }); }; fetchData() .then(data => { console.log(data); // "데이터를 가져왔습니다." return "다음 작업을 수행합니다."; }) .then(nextData => { console.log(nextData); // "다음 작업을 수행합니다." }); ``` 4. Promise.all() : 여러 개의 Promise를 동시에 실행하고, 모든 Promise가 이행될 때까지 기다리려면 `Promise.all()`을 사용할 수 있습니다. 이 메서드는 모든 Promise가 이행되면 결과를 배열로 반환합니다. ```javascript const promise1 = Promise.resolve(3); const promise2 = new Promise((resolve) => setTimeout(resolve, 1000, "foo")); const promise3 = 42; Promise.all([promise1, promise2, promise3]) .then((values) => { console.log(values); // [3, "foo", 42] }); ``` 5. Promise.race() : 여러 개의 Promise 중 가장 먼저 이행되거나 거부된 Promise의 결과를 반환하려면 `Promise.race()`를 사용할 수 있습니다. ```javascript const promise1 = new Promise((resolve) => setTimeout(resolve, 500, "첫 번째")); const promise2 = new Promise((resolve) => setTimeout(resolve, 100, "두 번째")); Promise.race([promise1, promise2]) .then((value) => { console.log(value); // "두 번째" (100ms 후에 이행됨) }); ``` 결론 Promise는 비동기 프로그래밍에서 매우 유용한 도구로, 비동기 작업의 결과를 쉽게 처리할 수 있게 해줍니다. Promise를 사용하면 코드의 가독성을 높이고, 비동기 작업을 더 직관적으로 관리할 수 있습니다. 또한, Promise 체이닝, `Promise.all()`, `Promise.race()`와 같은 메서드를 통해 복잡한 비동기 작업을 효율적으로 처리할 수 있습니다. 이러한 특성 덕분에 Promise는 현대 JavaScript 개발에서 필수적인 개념으로 자리 잡고 있습니다.
