JavaScript에서 Async/Await: 더 깔끔한 비동기 코드 작성

Source: Dev.to

콜백 (읽기 어려움)

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

• 읽기 어려움
• 유지보수 어려움

프로미스 (좀 나아졌지만 여전히 장황함)

fetchData()
  .then(data => {
    return processData(data);
  })
  .then(result => {
    console.log(result);
  })
  .catch(err => {
    console.error(err);
  });

• 콜백보다 나음
• 여전히 .then() 체이닝 필요

Async/await 가 도입된 이유:

• 비동기 코드를 단순화
• 가독성 향상
• .then() 체이닝 회피

프로미스 위에 얹은 문법 설탕(syntactic sugar)입니다.

Async 함수

Async 함수는 항상 프로미스를 반환합니다.

// Example placeholder – add your async function here

greet().then(console.log); // Hello

Await

await 키워드는 프로미스가 해결될 때까지 실행을 일시 정지합니다.

// Example placeholder – use await inside an async function

👉 비동기 코드를 마치 동기 코드처럼 보이게 합니다.

Async 함수 흐름

async function starts
   ↓
await pauses execution
   ↓
promise resolves
   ↓
execution resumes

// You can add a comparison diagram or code here if needed

Async/Await 사용하기

async function run() {
  try {
    const data = await fetchData();
    const result = await processData(data);
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

• 훨씬 깔끔하고 읽기 쉬움
• 오류 처리를 위해 try...catch 사용

// Additional error‑handling examples can be placed here

중요한 참고 사항

• await 은 async 함수 안에서만 동작합니다.
• 전체 프로그램을 차단하지 않고 실행을 일시 정지합니다.
• 오류는 항상 try...catch 로 처리하세요.

실제 예시

async function fetchUser() {
  try {
    const response = await fetch("https://api.example.com/user");
    const data = await response.json();

    console.log(data);
  } catch (err) {
    console.error("Failed to fetch user");
  }
}

• .then() 체이닝 없이 동기 코드처럼 보입니다.
• 오류를 한 곳에서 처리합니다.

비교

언제 async/await 를 사용해야 할까

• API와 작업할 때
• 여러 비동기 작업을 다룰 때
• 깔끔하고 가독성 좋은 코드를 원할 때

Async/await 은 현대 JavaScript 에서 가장 중요한 기능 중 하나입니다. 이를 통해:

• 더 깔끔한 비동기 코드 작성

• 콜백 지옥(callback hell) 회피

• 오류를 우아하게 처리

• async → 프로미스를 반환

• await → 프로미스가 해결될 때까지 대기

프로미스보다 깔끔하고, 오류 처리를 위해 try...catch 를 사용합니다.