[ JavaScript ] 비동기 처리를 위한 Promise 객체

📌 목차

1. Promise란?
2. Promise 언제 사용할까?
3. Promise 가 왜 필요할까?
4. Promise 의 3가지 상태
5. Promise 이행되었을 때 실행 결과
6. 마무리

 

✅ Promise 란?

자바스크립트 비동기 처리에 사용되는 객체

➡️  비동기란 무엇이며 자바스크립트에서 왜 비동기가 필요할까?

자바스크립트는 싱글 스레드(프로그램이 샐힝되는 최소 단위로 일을 처리하는 작업자가 한 명이라고 이해하기) 언어
 한 번에 하나의 작업만 처리할 수 있는 구조 
이런 구조에서 시간이 오래 걸리는 작업이 들어오면? 다른 작업들은 기다리게 되고, 서버 응답까지 기다리게 된다면 전체 프로그램이 멈추는 현상이 생길 수 있습니다.

➡️ 자바스크립트는 싱글 스레드인데도 UI가 멈추지 않는 이유는?

백그라운드에서 비동기 작업을 따로 처리하고 결과가 준비되면 다시 메인 스레드(작업자)에게 전달하는 구조를 사용
예로 setTimeout, fetch, Promise, asyn/await 같은 기능들이 동작하는 방식 
즉 비동기 처리를 통해 싱글 스레드 구조에서도 부드럽게 작업 수행이 가능합니다.
그렇기 때문에 비동기 이해하고 중요합니다.

✅ Promise 언제 사용할까?

주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서벙서 데이터를 요청하고 받아오기 위해 API를 사용합니다. API가 실행되면 서버에 데이터 요청을 보내고 받아온 데이터를 화면에 데이터 표시랄 합니다. 이 때 오류가 발생하면 빈화면이 뜹니다. 이와 같은 문제를 해결하기 위한 방법 중 하나가 Promise 입니다.

 

✅ Promise 가 왜 필요할까?

1. 콜백 지옥을 해결

예전에 비동기 작업을 콜백 함수로 처리했습니다.

login(id, pw, (user) => {
  getProfile(user, (profile) => {
    getPosts(profile, (posts) => {
      console.log(posts);
    });
  });
});

이런 구조는 
들여쓰기가 계속 깊어지고, 가독성이 나빠지고, 에러처리가 힘들어집니다. 
그래서 등장한 Promise  중첩 없이 순서를 표현할 수 있습니다.

login(id, pw)
  .then(getProfile)
  .then(getPosts)
  .then(console.log)
  .catch(console.error);

2. 비동기 흐름을 "예측 그낭하게" 만들기 위해

Promise 는 "미래에 성공할 수도, 실패할 수도 있는 작업을 하나의 객체로 표현" 합니다.
성공하면 resolve, 실패하면 reject  이후 처리는 .then() / .catch() 로 연결하여 미리 정의한 방식으로 처리가 가능합니다.

3. 코드 가독성과 유지보수성 향상을 위해

코드흐름이 명확해집니다. 성공은 then 실패는 catch 마지막 정리는 finally 

4. async/await 문법의 기반이 되기 때문에

요즘 자주 쓰는 async/awai 문법은 Promise기반

// Promise 예시
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('데이터'), 1000);
  });
};

fetchData().then(data => console.log(data));

// async/await 예시
async function getData() {
  const data = await fetchData();
  console.log(data);
}
getData();

 

✅ Promise 의 3가지 상태

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

promise 생성

new Promise()

new Promise() 메서드를 호출할 때 콜백 함수를 선언, 인자는 resolve, reject 

new Promise(function( resolve, reject ) {
	resolve()
     reject()
})

✅ Promise 이행되었을 때 실행 결과

• then() 이행되었을 때
• catch() 거부되었을 때
• finally() 이행되거나 거부되더라도 항상 실행

에러 처리는 then의 두 번째 인자로 처리가 가능하나  가급적 catc()를 사용 권장

then

promise.then(
  function(result) { /* 결과(result)를 다룹니다 */ },
  function(error) { /* 에러(error)를 다룹니다 */ }
);

catch

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

// .catch(f)는 promise.then(null, f)과 동일하게 작동합니다
promise.catch(alert); // 1초 뒤 "Error: 에러 발생!" 출력

finally

new Promise((resolve, reject) => {
  /* 시간이 걸리는 어떤 일을 수행하고, 그 후 resolve, reject를 호출함 */
})
  // 성공·실패 여부와 상관없이 프라미스가 처리되면 실행됨
  .finally(() => 로딩 인디케이터 중지)
  .then(result => result와 err 보여줌 => error 보여줌)

 

출처: MDN

✅ 마무리

Promise는 단순한 기능이 아니라, 자바스크립트의 비동기 세계를 더 안전하고, 읽기 쉽고, 깔끔하게  만들어주는 핵심 도구입니다. Promise 는 중첩 구조에서 벗어나 가독성을 향상 시켜주며, 성공/실패를 명확하게 표현이 가능합니다. 체이닝 구조로 코드 관리가 쉽고 async/await 기반의 문법 사용을 위한 필수 요소 입니다.

 

참고

https://ko.javascript.info/promise-basics

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/