Java스크립트(Async/Await)

이번 포스팅에서는 JavaScript에서 비동기 프로그래밍을 더 쉽게 다룰 수 있도록 도와주는 async/await에 대해 알아보겠습니다.
비동기 프로그래밍은 특히 웹 개발에서 많이 사용되며, 서버와의 통신이나 데이터 로딩 같은 상황에서 유용합니다.

1. 비동기 프로그래밍의 필요성

JavaScript는 기본적으로 단일 스레드로 동작합니다. 즉, 한 번에 하나의 작업만 처리할 수 있습니다. 만약 시간이 오래 걸리는 작업을 수행하면, 다른 작업들이 대기 상태에 놓이게 됩니다. 예를 들어, 서버로부터 데이터를 받아오는 동안 웹 페이지가 멈추는 경우를 생각해 볼 수 있습니다. 이를 해결하기 위해 비동기 프로그래밍이 필요합니다.

2. 콜백 함수

비동기 작업을 처리하기 위해 가장 먼저 등장한 방법은 콜백 함수였습니다. 하지만 콜백을 여러 번 중첩하게 되면 코드가 복잡해지고 가독성이 떨어지는 단점이 있습니다.

예제:

function fetchData(callback) {
    setTimeout(() => {
        callback('데이터 수신 완료');
    }, 1000);
}

fetchData((data) => {
    console.log(data); // 1초 후 '데이터 수신 완료' 출력
});

3. 프로미스(Promise)

콜백 지옥을 피하기 위해 등장한 것이 프로미스입니다. 프로미스는 비동기 작업의 성공 또는 실패를 다루기 위한 객체로, .then()과 .catch() 메서드를 사용하여 결과를 처리합니다.

예제:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('데이터 수신 완료');
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // 1초 후 '데이터 수신 완료' 출력
    })
    .catch(error => {
        console.error(error);
    });

 

4. Async/Await

async/await는 프로미스를 더 간편하게 사용할 수 있도록 도와주는 문법입니다. async 키워드를 사용하여 함수를 정의하고, await 키워드를 사용하여 프로미스가 해결될 때까지 기다립니다. 이를 통해 마치 동기식 코드처럼 코드를 작성할 수 있습니다.

4.1 Async 함수
async 키워드가 붙은 함수는 항상 프로미스를 반환합니다. 이 함수 내에서 await를 사용할 수 있습니다.

예제:

async function fetchData() {
    return '데이터 수신 완료';
}

fetchData().then(data => {
    console.log(data); // '데이터 수신 완료' 출력
});

4.2 Await 사용하기
await는 프로미스가 해결될 때까지 기다리게 하며, 코드의 흐름을 더 직관적으로 만들어 줍니다.

예제:

async function getData() {
    const data = await fetchData();
    console.log(data); // '데이터 수신 완료' 출력
}

getData();

 

5. 에러 처리

async/await에서도 에러 처리는 중요합니다. try/catch 문을 사용하여 에러를 잡을 수 있습니다.

예제:

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error('오류 발생:', error);
    }
}

getData();

 

6. 여러 비동기 작업 처리하기

async/await를 사용하면 여러 비동기 작업을 순차적으로 처리할 수 있습니다. 예를 들어, 두 개의 데이터를 순차적으로 가져오는 경우를 살펴보겠습니다.

예제:

function fetchData1() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('데이터 1 수신 완료');
        }, 1000);
    });
}

function fetchData2() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('데이터 2 수신 완료');
        }, 1000);
    });
}

async function getData() {
    const data1 = await fetchData1();
    console.log(data1);
    const data2 = await fetchData2();
    console.log(data2);
}

getData();

 

7. 마치며

async/await는 비동기 코드를 더 간편하고 직관적으로 작성할 수 있게 해주는 문법입니다. 복잡한 콜백 지옥이나 프로미스 체이닝을 피할 수 있어 코드 가독성이 높아지며, 에러 처리 또한 쉽게 할 수 있습니다.