2024.11.12(화) { Promise 기반 }

Promise 기반

Promise 기반이란, 비동기 작업(asynchronous operation)을 처리하기 위해 자바스크립트에서 제공하는 객체 기반의 데이터 타입을 의미합니다.
이를 통해 비동기 작업의 성공, 실패, 완료 여부를 추적하고 처리할 수 있습니다.

---

Promise의 핵심 개념

1. Promise는 자바스크립트의 비동기 작업을 처리하기 위한 구조입니다.
2. 3가지 상태(state)를 가집니다.
   • Pending(대기): 작업이 시작된 상태(아직 완료되지 않음).
   • Fulfilled(성공): 작업이 성공적으로 완료된 상태.
   • Rejected(실패): 작업이 실패한 상태.
3. Promise 객체는 then, catch, finally와 같은 메서드를 통해 작업의 성공, 실패를 처리합니다.

---

Promise 사용법

기본 문법

const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행
  let success = true; // 작업 결과를 나타내는 임의의 값

  if (success) {
    resolve("작업이 성공적으로 완료되었습니다."); // 성공 시 호출
  } else {
    reject("작업이 실패했습니다."); // 실패 시 호출
  }
});

// 작업 완료 후 처리
promise
  .then((result) => {
    console.log("성공:", result); // resolve() 호출 시 실행
  })
  .catch((error) => {
    console.error("실패:", error); // reject() 호출 시 실행
  })
  .finally(() => {
    console.log("작업 완료 여부와 상관없이 항상 실행됩니다.");
  });

---

Promise를 사용한 비동기 작업 예제

1. 비동기 작업: 데이터 요청 (setTimeout 사용)

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "서버에서 가져온 데이터";
      if (data) {
        resolve(data); // 성공 시 데이터 반환
      } else {
        reject("데이터를 가져오는 데 실패했습니다."); // 실패 시 에러 반환
      }
    }, 2000); // 2초 후 실행
  });
}

// Promise 처리
fetchData()
  .then((data) => {
    console.log("성공:", data); // "서버에서 가져온 데이터"
  })
  .catch((error) => {
    console.error("실패:", error);
  });

2. 비동기 작업: API 요청 (fetch 사용)

// fetch는 기본적으로 Promise 기반의 함수
fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => {
    if (!response.ok) throw new Error("네트워크 응답 오류");
    return response.json(); // JSON 데이터를 반환
  })
  .then((data) => {
    console.log("API 데이터:", data); // 성공적으로 데이터를 받음
  })
  .catch((error) => {
    console.error("에러 발생:", error); // 네트워크 오류 또는 기타 에러 처리
  });

---

Promise의 주요 메서드

1. then()

• 작업이 성공했을 때(resolve) 호출됩니다.

  promise.then((result) => {
  console.log(result); // 성공 결과
  });

2. catch()

• 작업이 실패했을 때(reject) 호출됩니다.

  promise.catch((error) => {
  console.error(error); // 실패 이유
  });

3. finally()

• 작업 성공, 실패 여부와 관계없이 항상 실행됩니다.

  promise.finally(() => {
  console.log("작업이 완료되었습니다."); // 항상 실행
  });

---

Promise의 활용

1. 여러 비동기 작업을 순차적으로 처리

const step1 = () => Promise.resolve("1단계 완료");
const step2 = () => Promise.resolve("2단계 완료");
const step3 = () => Promise.resolve("3단계 완료");

step1()
  .then((result1) => {
    console.log(result1);
    return step2(); // 다음 단계로 이동
  })
  .then((result2) => {
    console.log(result2);
    return step3();
  })
  .then((result3) => {
    console.log(result3); // 모든 단계 완료
  });

2. 여러 비동기 작업을 병렬 처리 (Promise.all)

const task1 = new Promise((resolve) => setTimeout(() => resolve("Task 1 완료"), 1000));
const task2 = new Promise((resolve) => setTimeout(() => resolve("Task 2 완료"), 2000));
const task3 = new Promise((resolve) => setTimeout(() => resolve("Task 3 완료"), 3000));

Promise.all([task1, task2, task3])
  .then((results) => {
    console.log(results); // ["Task 1 완료", "Task 2 완료", "Task 3 완료"]
  });

---

Promise와 비동기 처리의 장점

1. 콜백 지옥 해결: then 체인을 통해 콜백 중첩을 방지.
2. 가독성 향상: 작업 흐름을 직관적으로 표현 가능.
3. 에러 처리: catch를 통해 일괄적인 에러 처리 가능.

---

Promise와 관련된 추가 사항

• ES2017부터는 async/await 구문이 추가되어, Promise 기반의 비동기 작업을 더 간결하게 표현할 수 있습니다.
• Promise는 자바스크립트의 핵심 데이터 타입 중 하나로, 현대 웹 개발에서 널리 사용됩니다.

추가적으로 궁금한 점이 있다면 말씀해주세요!