JavaScript 프로미스 완전 가이드 — 초보자를 위한 설명
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 초보자 및 비동기 프로그래밍 개념을 학습하고자 하는 개발자
난이도: 기본 개념 설명 중심 (초보자 대상)
핵심 요약
- 프로미스(Promise)는 비동기 작업의 결과를 관리하는 객체로,
Pending,Resolved,Rejected세 상태를 가짐 .then()은 성공 시 실행,.catch()는 실패 시 실행,.finally()는 항상 실행async/await를 사용하면 비동기 코드를 동기처럼 작성 가능 (예:await fetch(...))
섹션별 세부 요약
1. 비동기 작업의 개념 설명
- 프로미스는 피자 주문과 같은 비동기 작업을 나타냄 (대기 → 성공/실패)
- 기존 콜백 지옥 문제를 해결하기 위한 도구
new Promise(resolve, reject)로 프로미스 생성 가능
2. 프로미스의 상태 및 메서드
Pending→ 작업 진행 중,Resolved→ 성공,Rejected→ 실패.then(result)→ 성공 시 처리,.catch(error)→ 실패 시 처리.finally()→ 항상 실행 (로더 숨기기, 로깅 등에 유용)
3. 프로미스 체이닝 및 에러 처리
.then()을 체이닝하면 비동기 작업 순서를 보장 (예:stepOne().then(() => stepTwo())).catch()는 모든 체이닝의 오류를 한 번에 처리 가능- 에러 처리 생략 시 앱이 무음으로 출발할 수 있음
4. `async/await` 사용법
async함수 내부에서await로 비동기 작업 결과 대기 가능- 예:
```javascript
async function makePizza() {
try {
const msg1 = await stepOne();
const msg2 = await stepTwo();
} catch (error) {
console.log("Error:", error);
}
}
```
5. 실무 예제: `fetch()`와 프로미스
fetch()는 프로미스를 반환 (네트워크 요청).json()으로 응답 데이터 변환 가능- 예:
```javascript
fetch("https://api.example.com/data")
.then(response => response.json())
.then(user => console.log(user))
.catch(error => console.error("Error fetching:", error));
```
결론
- 비동기 작업을
.then()/.catch()로 체이닝하거나async/await로 간결하게 처리 - 모든 프로미스 체이닝에
.catch()를 추가해 오류를 통합적으로 처리해야 함 fetch()와 같은 API 호출은 프로미스 기반으로 설계되어 있어.then()/.catch()또는async/await사용이 필수적