[JavaScript] async/await

📚 async/await란 무엇인가요?

async/await는 자바스크립트에서 비동기 작업을 처리하는 현대적이고 간결한 방법이에요. ES2017에서 도입된 이 문법은 비동기 코드를 동기 코드처럼 읽고 쓸 수 있게 해주어, 개발자가 비동기 로직을 더 쉽게 이해하고 작성할 수 있게 도와줘요.

 

async/await는 레스토랑에서 주문한 음식을 기다리는 과정과 유사해요.

먼저, async 함수는 레스토랑에 들어가서 주문을 하는 것과 같이 특정 비동기 작업(예: 데이터 요청)을 시작해요. 그리고 await는 주문한 음식이 준비될 때까지 기다리는 것처럼, 비동기 작업의 완료를 기다리며 그 동안 함수의 실행을 일시 정지해요. 작업이 완료되고 결과가 준비되면, 마치 서빙된 음식을 받아 식사를 시작하는 것처럼, await 다음의 코드가 실행되어 결과를 활용하게 돼요.

 

---

🖥️ async/await의 사용

async와 await 키워드를 사용하면, 비동기 함수를 선언하고, 비동기 작업이 완료될 때까지 함수의 실행을 일시적으로 중지할 수 있어요. 이를 통해 비동기 작업을 마치 동기적인 방식으로 작성할 수 있게 돼요.

1. async 함수

• async 키워드를 함수 앞에 붙이면, 해당 함수는 항상 Promise를 반환해요.
• 이는 함수 내에서 비동기 작업을 수행할 수 있음을 의미하며, 함수가 완료되었을 때 Promise가 이행(resolved)되거나 거부(rejected)돼요.

// 비동기 함수 정의
async function fetchData() {
  const response = await fetch('https://example.com/data');
  return response.json();
}

// 함수 사용
fetchData().then(data => console.log(data));

위에 작성된 예제 코드에 대한 설명은 다음과 같아요.

Async 함수 (fetchData):
- async function fetchData()는 웹에서 데이터를 비동기적으로 가져오는 함수입니다.
- fetch를 사용해 데이터를 요청하고, response.json()으로 응답을 JSON 형식으로 변환합니다.

2. await 표현식

• await 키워드는 async 함수 내에서만 사용할 수 있으며, Promise의 결과가 반환될 때까지 함수의 실행을 일시 중지해요.
• await는 Promise가 이행되기를 기다리며, Promise가 이행되면 그 결과 값을 반환해요. 이를 통해 비동기 작업의 결과를 동기적인 방식으로 처리할 수 있어요.

// async 함수 내부에서 사용
async function processData() {
  try {
    const data = await fetchData(); // fetchData 함수 호출, 완료까지 기다림
    console.log('처리된 데이터:', data);
  } catch (error) {
    console.error('데이터 처리 중 오류 발생:', error);
  }
}

// processData 함수 호출
processData();

위에 작성된 예제 코드에 대한 설명은 다음과 같아요.

Await 표현식 (processData 내부):
- processData 함수는 await fetchData()를 사용해 fetchData 함수의 결과를 기다립니다.
- await 키워드가 있기 때문에, fetchData 함수가 완료될 때까지 processData 함수의 실행이 일시적으로 중지됩니다.

 

---

🤔 async/await의 장점

async/await의 사용은 여러 가지 장점을 가지고 있어요:

• 가독성 향상: 비동기 코드를 동기 코드처럼 읽고 이해하기 쉽게 만들어요.
• 에러 처리: try...catch 블록을 사용하여 에러를 쉽게 처리할 수 있어요.
• 코드 간결성: 콜백 함수나 체인된 .then() 호출보다 간결한 코드를 작성할 수 있어요.

async function fetchData() {
  try {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    console.log('데이터:', data);
  } catch (error) {
    console.error('데이터 불러오기 오류:', error);
  }
}

fetchData();

가독성 향상: 위 예제에서 await fetch()와 await response.json()은 순차적으로 이해하기 쉽게 배열되어 있습니다.

에러 처리: fetch 함수에서 오류가 발생하면 catch 블록이 실행되어 오류를 처리합니다.

코드 간결성: async/await은 .then()과 .catch()를 사용하는 Promise 체인보다 훨씬 간결하고 명확한 코드를 작성할 수 있게 해줍니다. 이는 코드의 유지보수성을 크게 향상시킵니다.

 

---

🚨 주의할 점

• await는 오직 async 함수 내에서만 사용할 수 있어요. 이는 await가 비동기 작업의 완료를 기다리는 역할을 하기 때문에, 일반 함수에서는 사용할 수 없어요.
• 여러 비동기 작업을 병렬로 처리해야 할 경우, Promise.all()을 사용하여 모든 작업이 동시에 실행되도록 할 수 있어요. 이는 각각의 await 호출이 순차적으로 실행되어 시간이 더 걸릴 수 있는 문제를 해결해요.
• try...catch 블록을 적절히 사용하여 비동기 작업 중 발생할 수 있는 예외나 오류를 효과적으로 처리해야 해요. 이렇게 하면 예기치 못한 오류로부터 프로그램을 안전하게 보호할 수 있어요.

 

---

📖 결론

async/await는 자바스크립트 비동기 프로그래밍의 패러다임을 혁신적으로 변화시켰어요. 이 문법을 통해 개발자들은 복잡한 비동기 로직을 마치 동기적인 코드처럼 간결하고 명확하게 작성할 수 있게 되었어요. 이는 코드의 가독성을 크게 향상시키며, 에러 처리와 디버깅을 더욱 용이하게 만들어요.

 

async/await의 도입으로, 콜백 기반의 비동기 처리에서 발생하던 콜백 지옥과 같은 문제들을 효과적으로 해결할 수 있게 되었어요. 또한, 이 문법은 개발자가 비동기 코드의 흐름을 더 직관적으로 이해하고 관리할 수 있도록 도와줘요.

 

하지만 async/await를 사용할 때는 비동기 작업의 병렬 처리, 적절한 에러 핸들링, 실행 컨텍스트에 대한 이해가 필요해요. 이러한 요소들을 고려하여 async/await를 적절히 사용한다면, 자바스크립트 애플리케이션의 성능과 유지보수성을 크게 향상시킬 수 있어요.

 

async/await를 숙달하는 것은 현대 웹 개발에서 필수적인 기술이며, 이를 통해 보다 효율적이고 강력한 비동기 코드를 작성할 수 있어요.

---

🔗 추가 정보

• 자바스크립트의 async/await에 대한 더 깊은 이해를 원하신다면, MDN Web Docs에서 자세한 정보를 찾아볼 수 있어요.