자바스크립트에서 함수의 비동기 처리를 위한 Promise 사용법은 무엇인가요?

Q1: 자바스크립트에서 Promise란 무엇인가요?
A1: Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. 미래에 일어날 작업의 결과값을 처리하기 위한 방법으로, 콜백 함수 대신 가독성과 에러 처리가 용이하도록 설계되었습니다.

---

Q2: Promise를 어떻게 생성하나요?
A2:
```javascript
const promise = new Promise((resolve, reject) => {
// 비동기 작업 수행
if (성공조건) {
resolve(성공값);
} else {
reject(에러값);
}
});
```
- `resolve`는 작업 성공 시 호출
- `reject`는 작업 실패 시 호출

---

Q3: Promise 결과를 어떻게 처리하나요?
A3:
```javascript
promise
.then(result => {
// 성공 시 result 처리
})
.catch(error => {
// 실패 시 error 처리
});
```
- `.then()`은 성공 콜백 등록
- `.catch()`는 실패 콜백 등록

---

Q4: Promise를 간단한 비동기 함수로 사용하는 예시는?
A4:
```javascript
function delay(ms) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(`Waited ${ms}ms`);
}, ms);
});
}

delay(1000).then(message => console.log(message));
// 1초 후 "Waited 1000ms" 출력
```

---

Q5: Promise 체이닝이란 무엇인가요?
A5:
여러 비동기 작업을 순차적으로 수행하기 위해 `.then()`을 이어 붙이는 방식입니다. 각 단계가 다음 함수에 값을 전달하며, 중간에 에러 발생 시 `.catch()`로 넘어갑니다.
```javascript
doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => console.log(finalResult))
.catch(error => console.error(error)); ```

---

Q6: async/await와 Promise의 차이점은 무엇인가요?
A6:
`async/await`는 Promise 기반 비동기 코드를 더 직관적이고 동기 코드처럼 작성할 수 있도록 도와줍니다.
```javascript
async function fetchData() {
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
```
기본적으로 `async` 함수는 Promise를 반환하며, `await`는 Promise가 처리될 때까지 기다립니다.

---

Q7: Promise의 상태(state)에는 어떤 것이 있나요?
A7:
- Pending (대기): 아직 완료되지 않은 상태
- Fulfilled (이행): 성공적으로 완료된 상태
- Rejected (거부): 실패한 상태

한번 이행 또는 거부 상태가 되면 상태가 고정됩니다.

---

Q8: 여러 Promise를 동시에 처리하려면 어떻게 하나요?
A8:
`Promise.all()` 메서드로 여러 Promise를 병렬로 실행하고, 모든 Promise가 완료되면 결과를 배열로 반환합니다.
```javascript
Promise.all([promise1, promise2, promise3])
.then(results => {
// results는 각각의 Promise 결과 배열
})
.catch(error => {
// 하나라도 reject되면 실행
});
```

---

Q9: Promise의 에러 처리는 어떻게 해야 하나요?
A9:
`.catch()` 메서드를 써서 에러를 잡아낼 수 있습니다. 체이닝 된 `.then()` 중 어디서든 에러가 발생하면 가장 가까운 `.catch()`가 실행됩니다.
또는 `async/await` 내에서 `try...catch`로 처리합니다.

---

Q10: 자주 발생하는 Promise 관련 실수는 무엇인가요?
A10:
- `Promise`를 반환하지 않고 `then()` 사용하기
- `catch()`를 빼먹어 에러가 전파되는 경우
- 중첩된 콜백 대신 Promise 체이닝을 사용하지 않아 가독성이 떨어짐
- `Promise.all()`에서 하나라도 실패하면 전체가 실패하는 점 미처 고려하지 않음

---

이상으로 자바스크립트 Promise의 기본 개념과 사용법, 자주 묻는 질문에 대한 답변이었습니다.

JavaScript에서 비동기 처리를 위해 Promise를 사용하는 방법은 현대 웹 개발에서 매우 중요한 개념입니다.

Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체로, 비동기 작업이 성공적으로 완료되면 결과 값을 반환하고, 실패하면 오류를 반환합니다.

이를 통해 코드의 가독성을 높이고, 콜백 헬(callback hell) 문제를 해결할 수 있습니다.

Promise의 기본 구조 Promise는 `new Promise()` 생성자를 사용하여 생성합니다.

이 생성자는 두 개의 인자를 받는 함수를 인자로 받습니다: `resolve`와 `reject`. `resolve`는 비동기 작업이 성공적으로 완료되었을 때 호출되고, `reject`는 실패했을 때 호출됩니다.

```javascript const myPromise = new Promise((resolve, reject) => { // 비동기 작업 수행 const success = true; // 예시로 성공 여부를 나타내는 변수 if (success) { resolve("작업이 성공적으로 완료되었습니다.

"); } else { reject("작업이 실패하였습니다.

"); } }); ``` Promise 사용하기 Promise를 사용하여 비동기 작업을 수행할 때는 `.then()`과 `.catch()` 메서드를 사용합니다.

`.then()` 메서드는 Promise가 성공적으로 완료되었을 때 호출되며, `.catch()` 메서드는 실패했을 때 호출됩니다.

```javascript myPromise .then(result => { console.log(result); // "작업이 성공적으로 완료되었습니다.

" }) .catch(error => { console.error(error); // "작업이 실패하였습니다.

" }); ``` Promise 체이닝 Promise는 체이닝이 가능하여, 여러 개의 비동기 작업을 순차적으로 수행할 수 있습니다.

각 `.then()` 메서드는 이전 Promise의 결과를 받아 처리할 수 있습니다.

```javascript const fetchData = () => { return new Promise((resolve) => { setTimeout(() => { resolve("데이터를 가져왔습니다.

"); }, 1000); }); }; fetchData() .then(data => { console.log(data); // "데이터를 가져왔습니다.

" return "다음 작업을 수행합니다.

"; }) .then(nextData => { console.log(nextData); // "다음 작업을 수행합니다.

" }) .catch(error => { console.error("오류 발생:", error); }); ``` Promise.all 여러 개의 Promise를 동시에 실행하고, 모든 Promise가 완료될 때까지 기다리려면 `Promise.all()` 메서드를 사용할 수 있습니다.

이 메서드는 배열 형태의 Promise를 인자로 받아, 모든 Promise가 성공적으로 완료되면 결과를 배열로 반환합니다.

```javascript const promise1 = Promise.resolve(

3); const promise2 = new Promise((resolve) => setTimeout(resolve, 1000, "foo")); const promise3 = new Promise((resolve, reject) => setTimeout(reject, 500, "오류 발생")); Promise.all([promise1, promise2]) .then((values) => { console.log(values); // [3, "foo"] }) .catch((error) => { console.error("오류 발생:", error); }); Promise.all([promise1, promise2, promise3]) .then((values) => { console.log(values); }) .catch((error) => { console.error("오류 발생:", error); // "오류 발생: 오류 발생" }); ``` Promise.race `Promise.race()` 메서드는 주어진 Promise 중 가장 먼저 완료된 Promise의 결과를 반환합니다.

이 메서드는 여러 비동기 작업 중 가장 빠른 결과를 얻고자 할 때 유용합니다.

```javascript const promise1 = new Promise((resolve) => setTimeout(resolve, 100, "첫 번째 작업 완료")); const promise2 = new Promise((resolve) => setTimeout(resolve, 200, "두 번째 작업 완료")); Promise.race([promise1, promise2]) .then((result) => { console.log(result); // "첫 번째 작업 완료" }); ``` async/await Promise를 더욱 간결하게 사용할 수 있는 방법으로 `async`와 `await` 키워드를 사용할 수 있습니다.

`async` 함수는 항상 Promise를 반환하며, `await` 키워드는 Promise가 해결될 때까지 기다립니다.

이를 통해 비동기 코드를 동기 코드처럼 작성할 수 있습니다.

```javascript const fetchDataAsync = () => { return new Promise((resolve) => { setTimeout(() => { resolve("비동기 데이터"); }, 1000); }); }; const executeAsync = async () => { try { const data = await fetchDataAsync(); console.log(data); // "비동기 데이터" } catch (error) { console.error("오류 발생:", error); } }; executeAsync(); ``` 결론 Promise는 JavaScript에서 비동기 처리를 위한 강력한 도구입니다.

비동기 작업을 더 쉽게 관리하고, 코드의 가독성을 높이며, 에러 처리를 간편하게 할 수 있게 해줍니다.

`Promise.all`, `Promise.race`, `async/await`와 같은 기능을 통해 복잡한 비동기 로직을 간단하게 처리할 수 있습니다.

이러한 Promise의 사용법을 잘 이해하고 활용하면, 비동기 프로그래밍에서 발생할 수 있는 여러 문제를 효과적으로 해결할 수 있습니다.