서버에 데이터를 요청하고 응답이 오기 전에 다음 코드가 실행되어 undefined를 마주한 적이 있으신가요? 자바스크립트의 비동기적 특성 때문에 발생하는 이 문제는 **Promise**를 통해 우아하게 해결할 수 있습니다. 콜백 함수의 단점을 보완하고 코드의 가독성을 비약적으로 높여주는 Promise의 동작 원리와 상태 변화를 상세히 알아보겠습니다! 😊
1. Promise의 생명 주기: 3가지 상태(States) 🏗️
Promise는 생성되고 종료될 때까지 세 가지 중 하나의 상태를 가집니다. 이 상태 흐름을 이해하는 것이 Promise 공부의 시작입니다.
| 상태 | 설명 |
|---|---|
| Pending (대기) | 비동기 처리 로직이 아직 완료되지 않은 초기 상태입니다. |
| Fulfilled (이행) | 비동기 처리가 성공적으로 완료되어 결과 값을 반환한 상태입니다. (resolve 호출) |
| Rejected (거부) | 비동기 처리가 실패하거나 오류가 발생한 상태입니다. (reject 호출) |
2. 결과 핸들링: .then, .catch, .finally 📑
Promise 객체는 작업이 완료된 후 후속 처리를 위해 메서드를 제공합니다. 이를 통해 여러 비동기 작업을 순차적으로 연결(Chaining)할 수 있습니다.
- .then(): 성공 시 실행됩니다. 새로운 Promise를 반환하여 계속 체이닝할 수 있습니다.
- .catch(): 실패(에러) 발생 시 실행됩니다. 체인 도중 발생한 모든 에러를 잡아냅니다.
- .finally(): 성공/실패 여부와 상관없이 마지막에 무조건 실행됩니다. (리소스 해제 등에 사용)
3. 실전 예제: Promise 구현하기 💻
const getData = new Promise((resolve, reject) => {
const success = true;
setTimeout(() => {
if (success) resolve(“데이터 로드 성공!”);
else reject(new Error(“실패”));
}, 1000);
});
// 2. 사용 (Consumer)
getData
.then(result => console.log(result)) // “데이터 로드 성공!”
.catch(err => console.error(err))
.finally(() => console.log(“종료”));
🚀 Promise Mastery Checklist
Immutable State
한번 결정된 상태(Fulfilled/Rejected)는 절대 변경되지 않는다는 것을 인지하고 있는가?
Error Catching
체이닝 마지막에 .catch()를 배치하여 예상치 못한 런타임 에러를 방어하고 있는가?
전문가 Q&A ❓
all은 모든 Promise가 성공해야 완료되지만, race는 가장 먼저 완료(성공 혹은 실패)되는 Promise의 결과만 취합니다.Promise는 단순히 새로운 문법을 넘어, 자바스크립트가 비동기를 대하는 패러다임의 변화를 의미합니다. 이 개념을 명확히 잡아야만 비동기 처리의 최종 진화형인 async/await를 자유자재로 다룰 수 있습니다. 오늘 배운 내용을 바탕으로 서버 통신 로직을 직접 구현해 보세요! 궁금한 점은 언제든 질문해 주세요. 😊