[JavaScript] New Javascript 15장 - 프로미스와 비동기 작업(Promise, async/await)

✅ 1. 비동기 작업이란?

자바스크립트는 기본적으로 싱글 스레드(Single thread)로 동작하는 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 그런데 시간이 오래 걸리는 작업까지 순서대로 기다리면 전체 실행 속도가 매우 느려집니다. 그래서 이러한 문제를 해결하기 위해 등장한 것이 바로 비동기 처리입니다. 

// 1. 비동기 작업 시작
console.log("비동기 작업을 시작합니다");

// 2. 비동기 작업 시뮬레이션 (예: API 호출, 파일 읽기 등)
setTimeout(() => {
  console.log("5초 후 실행");
}, 5000);

console.log("비동기 작업 종료");

 

➡️ 실행 결과

비동기 작업을 시작합니다
비동기 작업 종료
5초 후 실행

 

👉 시간이 걸리는 작업은 뒤로 미루고 나머지 코드를 먼저 실행하는 구조 

---

✅ 2. 콜백 함수 방식

비동기 작업은 처음에 콜백 함수로 처리했습니다, 그러나 문제는 작업이 많아질수록 코드가 늘어나 유지보수가 어려워집니다.

function work(callback) {
  setTimeout(() => {
    console.log("작업 완료");
    callback();
  }, 1000);

  work(() => {
    console.log("다음 작업");
  });
}

setTimeout(() => {
  console.log("1");

  setTimeout(() => {
    console.log("2");
    setTimeout(() => {
      console.log("3");
    }, 1000);
  }, 1000);
}, 1000);

 

👉 이 것을 콜백 지옥이라고 한다. 가독성이 떨어지고 유지보수의 최악 

---

✅ 3. Promise의 등장

이러한 콜백 지옥을 해결하기 위해 Promise(약속)이 등장하였습니다 Pomise는 "비동기 작업이 끝나면 결과를 알려주겠다"라는 약속을 의미하는 객체입니다.

const promise = new Promise((resolve, reject) => {
  const success = true; // 성공 여부를 나타내는 변수

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

 

👉 핵심

• resolve → 성공
• reject → 실패 

---

✅ 4. Promise 결과 출력

const promise = new Promise((resolve, reject) => {
  resolve("작업이 성공적으로 완료되었습니다.");
});

promise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

 

➡️ 실행 결과

작업이 성공적으로 완료되었습니다.

---

✅ 5. 실패 예시

// 실패 예시
const promise = new Promise((resolve, reject) => {
  reject("에러 발생");
});

promise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

 

➡️ 실행 결과

에러 발생

• 성공 → then
• 실패 →  catch

---

✅ 6. Promise 체이닝 

// Promise 체이닝
new Promise((resolve) => {
  resolve(10);
})
  .then((num) => num * 2) // 10 * 2 = 20
  .then((num) => num + 5) // 20 + 5 = 25
  .then((num) => {
    console.log(num); // 25
  });

 

➡️실행 결과

25

 

👉 흐름

10 →  20 → 25 →  출력

👉 콜백처럼 중첩이 필요하지 않음 

---

✅ 7. async / await (더 쉽게 사용)

🙂 async

async function test() {
  return "Hello, Async/Await!";
}

// 출력
test().then(console.log); // Hello, Async/Await!

 

👉 async 함수는 Promise를 반환

 

🙂 await 

function delay(ms) {
  return new Promise((resolve) =>
    setTimeout(() => resolve("Delayed Result"), ms),
  );
}

async function run() {
  const result = await delay(1000);
  console.log(result); // Delayed Result (1초 후 출력)
}

run(); // run() 호출하여 async 함수 실행

 

 👉 await = 결과 나올 때까지 기다림

 

---

✅ 8. 에러 처리

async function fetchData() {
  try {
    // 에러 처리
    const result = await Promise.reject("에러");
    console.log(result); // 에러 출력
  } catch (e) {
    console.error("Error fetching data:", e); // 에러 출력
  }
}

// 실행
fetchData();

 

👉 async/await에서는 try-catch를 사용

---

 ✅ 핵심 정리

• 비동기 = 기다리지 않고 다음 코드를 실행
• 콜백 →  Promise →  async/await 순으로 발전
• Promise는 try/catch 사용
• async/await는 더 읽기 쉬운 방식
• 에러는 catch 또는 try-catch로 처리

---

GitHub - javascript-only/newJSRoom: https://thinky.tistory.com/category/Front-End/JavaScript