[Promise] 비동기 처리의 핵심 개념

728x90

Promise 

웹 개발에서 사용자 경험(UX)을 향상시키기 위해 필수적으로 사용되는 기법 중 하나가 비동기 프로그래밍입니다. 웹 애플리케이션은 종종 서버에 데이터를 요청하거나, 외부 API와 통신하거나, 일정 시간이 걸리는 작업을 수행해야 합니다. 이런 작업을 처리할 때 전체 애플리케이션의 흐름이 멈추지 않도록 하기 위해 비동기 처리 방식을 사용하게 되며, 그 핵심에 바로 Promise 객체가 존재합니다.

Promise는 자바스크립트에서 비동기 작업의 완료 여부와 결과를 나타내는 객체로, 콜백 함수의 단점을 보완하며 코드의 가독성과 유지 보수성을 크게 향상시켜줍니다. 비동기 처리의 흐름을 더 명확하게 만들기 때문에, then, catch, finally 같은 메서드를 통해 체계적으로 결과를 처리할 수 있습니다. 또한, async/await 문법도 Promise를 기반으로 동작하므로, Promise에 대한 이해는 필수입니다.

 

---

1.  Promise란?

Promise는 미래에 완료될 수도 있고 실패할 수도 있는 비동기 작업의 결과를 표현하는 객체입니다. 쉽게 말해, "곧 결과가 생길 테니 기다려!"라는 약속(Promise)인 셈이죠.

Promise의 상태

상태	설명
pending	대기 중 (작업이 아직 끝나지 않음)
fulfilled	작업이 성공적으로 끝남
rejected	작업이 실패함

 

---

2.  Promise 생성 방법

const promise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve('작업 성공!');
  } else {
    reject('작업 실패!');
  }
});

• resolve()는 성공 시 호출
• reject()는 실패 시 호출

.then()과 .catch() 사용

promise
  .then(result => {
    console.log('성공:', result);
  })
  .catch(error => {
    console.error('실패:', error);
  });

• .then()은 성공한 결과를 받음
• .catch()는 오류를 처리함

 

---

3.  예시 - 비동기 작업 시뮬레이션

function wait(ms) {
  return new Promise(resolve => {
    setTimeout(() => resolve(`✅ ${ms}ms 후 완료`), ms);
  });
}

wait(1000)
  .then(msg => console.log(msg)) // 1초 후: ✅ 1000ms 후 완료
  .catch(err => console.error(err));

 

---

4.  Promise 체이닝 (Chaining)

wait(1000)
  .then(msg => {
    console.log(msg);	// 첫 번째 then: 1초 뒤에 실행됨
    return wait(500);	// 두 번째 wait(500) 호출 → 새로운 프로미스를 반환
  })
  .then(msg => {
    console.log(msg);	// 두 번째 then: 0.5초 뒤에 실행됨
  });

• 여러 개의 비동기 작업을 순차적으로 처리할 수 있음
• 각 .then()은 다음 작업을 이어갈 수 있는 Promise를 반환

 

---

5.  async / await와의 관계

Promise는 async/await의 기반입니다.
async 함수 내부에서는 await 키워드로 Promise가 끝날 때까지 기다릴 수 있습니다.

async function run() {
  try {
    const msg1 = await wait(1000);
    console.log(msg1);

    const msg2 = await wait(500);
    console.log(msg2);
  } catch (error) {
    console.error('에러:', error);
  }
}

run();

• 가독성이 좋아지고, 마치 동기 코드처럼 작성할 수 있음

 

---

6.  Promise 유틸 함수

함수	설명
Promise.all([])	여러 Promise를 병렬 실행, 모두 성공 시 완료
Promise.race([])	가장 먼저 끝난 Promise의 결과를 반환
Promise.allSettled([])	모든 Promise의 결과를 배열로 반환 (성공/실패 구분)
Promise.reject()	실패한 Promise 생성
Promise.resolve()	즉시 성공한 Promise 생성

예시 - Promise.all

Promise.all([wait(1000), wait(2000)])
  .then(results => {
    console.log('모두 완료:', results);
  });

 

---

7.  마무리

Promise는 JavaScript의 비동기 흐름을 제어하는 핵심 도구입니다.

• .then() / .catch()로 체이닝 처리
• async/await으로 동기적 코드처럼 작성
• Promise.all()로 병렬 처리까지 가능

같이 보면 좋은 자료

블로그 글 : 

[Event Loop] 싱글 스레드 언어인 JavaScript는 어떻게 비동기적으로 동작할까?

[async와 await] 비동기 코드를 동기처럼 쓰는 방법

 

---