자바스크립트 async await 사용법

자바스크립트에서 비동기 처리를 다룰 때 가장 직관적이고 널리 쓰이는 방법이 바로 async await입니다. 과거의 콜백 함수나 프로미스(Promise)의 복잡한 체이닝 방식에서 벗어나, 동기식 코드처럼 읽기 쉽고 간결하게 비동기 로직을 짤 수 있도록 도와주는 문법입니다. 오늘은 자바스크립트 async await 사용법의 기초부터 실전 예제까지 확실하게 정리해 보겠습니다.

1. async await 개념과 필요성

자바스크립트는 싱글 스레드로 작동하기 때문에 API 호출이나 파일 읽기 같은 작업을 비동기로 처리해야 화면이 멈추지 않습니다. 기존의 .then()을 사용하는 Promise 방식은 코드가 길어지면 꼬리가 물리듯 복잡해지는 단점이 있었습니다. async await는 이러한 프로미스 객체를 기반으로 하되, 작성 방식을 깔끔하게 개선하여 가독성을 극대화하기 위해 도입되었습니다.

2. async await 기본 문법과 작성법

사용법은 매우 간단합니다. 비동기 코드가 포함된 함수 앞에 async 키워드를 붙이고, 함수 내부의 프로미스 반환 작업 앞에 await 키워드를 붙여주면 됩니다. 이렇게 하면 자바스크립트 엔진은 해당 비동기 작업이 완료되어 결과 값을 반환할 때까지 코드 실행을 잠시 기다렸다가 다음 라인을 수행합니다.

// 기본적인 async await 예제
async function fetchUserData() {
    console.log("데이터 요청 시작");
    let response = await fetch("https://api.example.com/user");
    let data = await response.json();
    console.log("결과 출력:", data);
}

3. async await 예외 처리 방법 (try catch)

비동기 통신을 하다 보면 네트워크 오류나 서버 문제 등으로 에러가 발생할 수 있습니다. async await 구조에서는 익숙한 try...catch 문을 사용하여 에러를 처리합니다. 비동기 실행 영역을 try 블록으로 감싸고, 실패 시 실행할 코드를 catch 블록에 작성해 주면 에러를 안전하게 잡아낼 수 있어 프로그램이 멈추는 것을 방지합니다.

// try catch를 포함한 예외 처리 예제
async function safeFetch() {
    try {
        let response = await fetch("https://api.example.com/data");
        let result = await response.json();
        return result;
    } catch (error) {
        console.error("데이터를 가져오는 중 에러 발생:", error);
    }
}

4. 실무에서 자주 쓰는 async await 패턴

실무에서는 주로 여러 개의 API를 동시에 호출하거나 순차적으로 처리할 때 async await를 씁니다. 만약 여러 데이터를 동시에 받아와도 된다면 Promise.all과 await를 조합하여 실행 속도를 획기적으로 향상시킬 수 있습니다. 이를 통해 불필요한 대기 시간을 없애고 최적의 로딩 속도를 유지할 수 있습니다.

이처럼 async await를 활용하면 가독성과 예외 처리가 쉬워져 버그를 줄이고 깔끔한 코드를 작성할 수 있습니다. 기초 문법부터 에러 처리 및 병렬 최적화까지 반복 연습하여 실전에 바로 적용해 보시기 바랍니다.