JavaScript 기초: async/await

JavaScript 기초: async/await

이번 포스팅에서는 JavaScript의 비동기 처리를 더 직관적이고 간결하게 작성할 수 있는 async/await에 대해 알아보겠습니다.

1. async/await란?

async와 await는 프로미스를 보다 쉽게 다룰 수 있도록 도와주는 문법입니다. 이를 통해 비동기 코드를 마치 동기 코드처럼 작성할 수 있습니다.

2. async 함수

async 키워드를 사용하여 비동기 함수를 선언할 수 있습니다. async 함수는 항상 프로미스를 반환합니다.

// async 함수 선언
async function sayHello() {
    return "안녕하세요!";
}

// 함수 호출
sayHello().then(message => console.log(message)); // "안녕하세요!"
    

3. await 키워드

await는 프로미스가 해결될 때까지 기다린 후, 결과를 반환합니다. await는 반드시 async 함수 안에서만 사용할 수 있습니다.

// await 사용 예제
async function fetchData() {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
}

fetchData();
    

4. 에러 처리

try/catch 구문을 사용하여 async/await에서 발생할 수 있는 에러를 처리할 수 있습니다.

async function fetchDataWithErrorHandling() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("오류 발생:", error);
    }
}

fetchDataWithErrorHandling();
    

5. 실습 예제

실습 과제

1. async/await를 사용하여 2초 후 "작업 완료!"를 출력하는 코드를 작성하세요.

정답 확인 👇

// 실습: async/await 사용 예제
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncTask() {
    await delay(2000); // 2초 기다림
    console.log("작업 완료!");
}

asyncTask();

            

이번 포스팅에서는 async/await를 활용한 비동기 처리에 대해 알아보았습니다. 다음에는 JavaScript의 배열과 객체에 대해 알아보겠습니다!