[JS] 자바스크립트 비동기와 Promise

자바스크립트 비동기와 Promise

 

 

자바스크립트 비동기 처리와 Promise에 대해 쉽게 정리해보자!

---

1. 자바스크립트 비동기 처리 ; 콜백 함수(Callback)

자바스크립트는 기본적으로 싱글 스레드로 작동한다.

그래서 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기 등)을 그냥 실행하면 프로그램이 멈춰버릴 수 있다.
이를 해결하기 위해 비동기 처리가 등장했다.

 

 

대표적인 비동기 처리 방법 중 하나가 바로 콜백 함수

// 콜백함수를 사용해서, 비동기함수 안에서 콜백을 호출
function add(a, b, callback) {
    setTimeout(() => {
        const sum = a + b;
        callback(sum);
    }, 3000);
}

add(1, 2, (value) => {
    console.log(value); // 3초 후 3 출력
});

• setTimeout은 비동기 작업을 모방하기 위해 사용함.
• 3초 후에 두 수를 더한 값을 콜백 함수에 넘김.

 

 

콜백 지옥 (Callback Hell)

 

콜백을 연속적으로 사용하면 코드가 점점 중첩되고 읽기 어렵게 변하는 문제가 발생한다.

이를 '콜백 지옥'이라고 부른다.

 

// 음식 주문하기
function orderFood(callback) {
    setTimeout(() => {
        const food = "떡볶이";
        callback(food);
    }, 3000);
}

// 음식 식히기
function cooldownFood(food, callback) {
    setTimeout(() => {
        const cooldownedFood = `식은 ${food}`;
        callback(cooldownedFood);
    }, 2000);
}

// 음식 냉동하기
function freezeFood(food, callback) {
    setTimeout(() => {
        const freezedFood = `냉동된 ${food}`;
        callback(freezedFood);
    }, 1500);
}

// 콜백 지옥 발생
orderFood((food) => {
    console.log(food);

    cooldownFood(food, (cooldownedFood) => {
        console.log(cooldownedFood);

        freezeFood(cooldownedFood, (freezedFood) => {
            console.log(freezedFood);
        });
    });
});

 

• orderFood → cooldownFood → freezeFood 순서로 작업이 진행돼야 하는데, 콜백 안에 콜백, 또 그 안에 콜백을 넣어야 해서 코드가 복잡해진다.

 

 

➡️이런 문제를 해결하기 위해 등장한 게 바로 Promise 

 

---

 

1.  Promise란 무엇인가?

 

Promise는 '미래에 완료될 수도, 실패할 수도 있는 작업'을 나타내는 자바스크립트 객체
비동기 작업을 보다 깔끔하게 다루기 위해 만들어졌다.

 

Promise는 세 가지 상태를 가질 수 있다.

pending (대기)	작업이 아직 완료되지 않은 상태
fulfilled (성공)	작업이 성공적으로 완료된 상태 (resolve 호출)
rejected (실패)	작업이 실패한 상태 (reject 호출)

 

즉, Promise는 비동기 작업을 시작하고, 결과가 성공이든 실패든 그 결과를 저장하는 컨테이너다.

 

---

 

2. Promise 기본 구조

 

Promise 객체는 다음처럼 생성한다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 실행
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("작업 성공!");
    } else {
      reject("작업 실패!");
    }
  }, 2000);
});

 

• resolve(value): 작업이 성공했을 때 호출하는 함수
• reject(error): 작업이 실패했을 때 호출하는 함수

 

---

 

3.  Promise 사용하기 - then과 catch

 

Promise는 then과 catch 메서드를 통해 결과를 다룬다.

• .then (성공했을 때 실행할 콜백)
• .catch (실패했을 때 실행할 콜백)

promise
  .then((value) => {
    console.log(value); // "작업 성공!" 출력
  })
  .catch((error) => {
    console.log(error); // 실패했을 경우 에러 출력
  });

 

 

---

 

💡예시코드 숫자에 10 더하기 (add10 함수)

 

 

function add10(num) {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof num === "number") {
        resolve(num + 10);
      } else {
        reject("num이 숫자가 아닙니다");
      }
    }, 2000);
  });

  return promise;
}

• num이 숫자이면 2초 후에 10을 더한 결과를 반환
• num이 숫자가 아니면 오류 메시지를 반환

const p = add10(0);

p.then((result) => {
  console.log(result);      // 10
  return add10(result);     // 10 + 10
}).then((result) => {
  console.log(result);      // 20
  return add10(result);     // 20 + 10
}).then((result) => {
  console.log(result);      // 30
}).catch((error) => {
  console.log(error);       // 에러가 발생했을 경우 실행
});

 

• 처음 0을 넘기고 10을 더한 10을 반환
• 이어서 10을 받아 또 10을 더한 20을 반환
• 또 이어서 20을 받아 10을 더한 30을 반환
• 중간에 오류가 발생하면 .catch 블록에서 에러를 처리

 

 

---

 

 

5.  Promise 체이닝 (Chaining)

Promise의 큰 장점 중 하나는 then을 연속해서 이어붙일 수 있다는 점이다.

➡️ Promise 체이닝

 

 

각 then은 이전 then이 반환한 값을 다음 then으로 넘겨준다.

add10(5)
  .then(result => add10(result))
  .then(result => add10(result))
  .then(result => console.log(result)) // 최종 결과 출력
  .catch(error => console.log(error));

• 비동기 작업이 순서대로 깔끔하게 이어진다.
• 중간에 하나라도 실패하면 바로 .catch()로 넘어간다.

 

---

 

 

💡요약

 

• 콜백은 간단하지만, 콜백 지옥에 빠질 위험이 있다.
• Promise를 사용하면 비동기 코드를 훨씬 읽기 쉽고 관리하기 쉽게 만들 수 있다.
• async/await를 사용하면 Promise를 더 깔끔하게 사용할 수 있다. (to be continued..)
• Promise는 비동기 작업을 다루는 객체이다.
• resolve와 reject로 성공과 실패를 구분한다.
• then으로 결과를 이어붙이고, catch로 에러를 처리할 수 있다.
• Promise 체이닝을 통해 복잡한 비동기 흐름도 깔끔하게 관리할 수 있다.

 

 

 

---

 

 

 

 

 

질문이나 추가 설명이 필요하다면 댓글로 남겨주세요! 😊