`async`와 `await`

async와 await는 JavaScript에서 비동기(Asynchronous) 코드를 동기(Synchronous)처럼 다루게 해주는 문법

1️⃣ 비동기(Asynchronous)란?

• 일반적으로 JS는 순서대로 실행되지만, 네트워크 요청, 파일 읽기, DB 작업 등은 결과가 바로 안 나옴 → 비동기 작업
• 예:

console.log("1번");
setTimeout(() => console.log("2번"), 1000); // 1초 후 실행
console.log("3번");

출력:

1번
3번
2번

• setTimeout이 끝나기 전에 3번이 먼저 찍힘 → 비동기 실행

---

2️⃣ async 함수

• async는 함수 앞에 붙이는 키워드
• 의미: 이 함수 안에서 await를 사용할 수 있음, 그리고 함수는 항상 Promise를 반환

async function fetchData() {
  return "데이터";
}

console.log(fetchData()); // Promise { '데이터' }

• 위처럼 그냥 호출하면 Promise 객체가 반환됨
• await로 기다리면 실제 값으로 받을 수 있음

---

3️⃣ await 키워드

• await는 Promise가 처리될 때까지 기다린다는 뜻
• 반드시 async 함수 안에서만 사용 가능

async function fetchData() {
  let result = await new Promise((resolve) => {
    setTimeout(() => resolve("완료!"), 1000);
  });

  console.log(result);
}

fetchData();

출력:

(1초 후)
완료!

• await가 없으면 result는 Promise 객체 그대로 나옴
• await가 있으면 Promise가 완료될 때까지 코드 실행을 잠시 멈춘 후 결과를 가져옴

---

4️⃣ Firestore 예시

const docRef = await addDoc(collection(db, "books"), { title:"firebase리뷰" });

• addDoc → Firestore에 데이터를 추가하고 완료되면 문서 ID 반환
• await 없으면 docRef는 Promise 객체
• await 있으면 실제 문서 ID를 바로 받을 수 있음

---

🔑 핵심

1. async → 함수가 비동기 처리 가능하도록 선언
2. await → Promise가 끝날 때까지 기다린 후 결과를 반환
3. await는 반드시 async 함수 안에서만 사용 가능