Async / Await란,

Promise 기반 비동기 작업을 더 읽기 쉽게 작성할 수 있도록 도와주는 문법이야.
마치 비동기 작업을 동기 코드처럼 작성할 수 있게 해주는 도구,
결과가 나올 때까지 잠깐 기다렸다가 다음 일을 한다고 생각하면 돼!

📍핵심(쉬운) 설명

Async / Await은 음식 주문 후 기다리는 과정과 비슷해.

• 음식 주문 (Promise 생성): 식당에서 음식을 주문. 이 작업은 시간이 걸리므로 비동기로 처리.
• 음식을 기다림(await): 음식을 기다리는 동안 다른 일을 하지 않고, 멈춰서 결과를 기다려.
• 음식이 나옴 (Promise 완료): 음식이 나오면, 그때부터 다음 일을 진행.
  Async / Await은 이렇게 "주문 → 기다림 → 음식 도착 후 작업"을 코드로 표현.

🔍 Async / Await의 핵심 개념

• async 함수: 비동기 작업을 처리하기 위한 함수로, 항상 Promise를 반환.
  함수 앞에 async를 붙이면, 그 안에서 await사용 가능.

• await 키워드: Promise가 완료될 때까지 기다렸다가 결과를 반환.
  await은 async 함수 안에서만 사용 가능.

🔍 자주 사용되는 패턴(예시)

1️⃣ 기본 사용법

const fetchData = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1"); // 데이터를 가져올 때까지 기다림
  const data = await response.json(); // JSON 파싱이 완료될 때까지 기다림
  console.log(data); // 데이터 출력
};
fetchData();

• 동작 과정: fetch 함수가 데이터를 가져올 때까지 await로 기다림. -> 가져온 데이터를 JSON으로 변환할 때도 await로 기다림. -> 최종 데이터를 출력.

2️⃣ Async / Await로 에러 처리

const fetchData = async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    if (!response.ok) {
      throw new Error("데이터를 가져오는데 실패했습니다.");
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("에러 발생:", error.message);
  }
};
fetchData();

• 특징: try...catch 블록을 사용해 에러를 처리.
  Promise의 .catch() 대신 동기 코드처럼 작성 가능.

🙌 Promise를 왜 사용할까?

• 코드 가독성 증가: .then() 체인이 없는 깔끔한 코드 작성 가능.
  동기 코드처럼 읽히므로, 쉬운 유지보수.
• 에러 처리 간단: try...catch 블록으로 에러를 다룰 수 있어, 코드가 더 직관적.
• Promise보다 간결: 여러 비동기 작업이 연결될 때도 쉽게 작성 가능.

🚀 진짜 쉬운 설명

Async / Await은 Promise 기반의 비동기 작업을 더 동기적으로 보이게 작성하는 방법으로, 코드 가독성과 유지보수를 크게 향상시킴.

(더 쉬운 예시)

• 비동기 작업 없이 코드를 작성

console.log("1. 피자를 주문합니다.");
// 피자가 나올 때까지 기다리지 않고, 그냥 다음 일을 해버림
console.log("2. 음료수를 주문합니다.");

• Async / Await를 사용

const orderPizza = async () => {
  console.log("1. 피자를 주문합니다.");
  await new Promise((resolve) => setTimeout(resolve, 3000)); // 3초 기다림
  console.log("2. 피자가 도착했습니다!");
};

orderPizza();