JavaScript에서 Async와 Await (신입 개발자를 위한 쉬운 설명)

Source: Dev.to

Introduction

비동기 JavaScript를 이해한 뒤, 다음으로 중요한 개념은 async와 await입니다.
이들은 비동기 코드를 간단하고 읽기 쉬운 형태로 작성하도록 도와줍니다.

What is async?

async는 함수 앞에 붙이는 키워드입니다. JavaScript에 다음을 알려줍니다:

이 함수는 비동기 코드를 다루며 항상 Promise를 반환합니다.

Example

async function greet() {
  return "Hello World";
}

greet().then(result => console.log(result));

What is await?

await는 async 함수 내부에서 사용됩니다. JavaScript에 다음을 알려줍니다:

비동기 작업이 완료될 때까지 여기서 기다린 뒤, 계속 진행합니다.

Simple Example (Code)

function getData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

async function showData() {
  console.log("Fetching data...");
  const result = await getData();
  console.log(result);
}

showData();

Output

Fetching data...
Data received

비록 기다리지만, 브라우저가 멈추지는 않습니다.

Real‑Life Example (Very Easy)

Online Shopping Analogy

Without await:

• 제품을 주문합니다.
• “배송됐나요?” 라고 계속 물어봅니다.
• 코드가 복잡해집니다 😵

With async / await:

• 주문을 합니다 🛒
• 평온하게 기다립니다.
• 배송이 도착하면, 열어봅니다 📦

결과: 깔끔하고, 읽기 쉬우며, 이해하기 쉬운 코드.

Why Use Async & Await?

• 비동기 코드를 동기 코드처럼 보이게 합니다.
• 신입 개발자도 쉽게 이해할 수 있습니다.
• 복잡한 .then() 체인을 피할 수 있습니다.
• 가독성과 디버깅이 향상됩니다.

Rules to Remember

• await는 async 함수 내부에서만 작동합니다.
• async 함수는 항상 Promise를 반환합니다.
• await는 함수를 일시 정지시키며, 전체 프로그램을 멈추지는 않습니다.