프론트엔드 노트

JavaScript의 비동기 처리 방식은 웹 개발에서 매우 중요한 요소입니다. 비동기 처리를 이해하고 활용하는 것은 사용자 경험을 개선하고 애플리케이션의 성능을 극대화하는 데 있어 필수적입니다. 이번 글에서는 JavaScript의 비동기 처리에 대한 다양한 방법과 이를 활용한 패턴을 자세히 살펴보겠습니다.

비동기 처리의 필요성

JavaScript는 단일 스레드 언어로, 동기적으로 실행되기 때문에 긴 작업이 발생하면 사용자 인터페이스(UI)가 멈추는 문제가 발생할 수 있습니다. 이를 해결하기 위해 비동기 처리를 사용합니다. 비동기 처리는 시간이 걸리는 작업을 백그라운드에서 실행하고, 탁월한 사용자 경험을 제공하기 위해 결과를 나중에 받아오는 방식을 의미합니다.

콜백 함수

가장 기본적인 비동기 처리 방법은 콜백 함수를 사용하는 것입니다. 콜백 함수는 특정 작업이 완료된 후 실행되는 함수입니다. 다음은 콜백을 활용한 예제입니다.

function fetchData(callback) {
    setTimeout(() => {
        const data = { name: 'John', age: 30 };
        callback(data);
    }, 1000);
}

fetchData((data) => {
    console.log('데이터:', data);
});

위 코드에서 fetchData 함수는 1초 후에 데이터를 반환하는 비동기 작업을 수행합니다. 이 작업이 끝나면 콜백 함수가 호출되어 결과를 출력합니다.

프로미스(Promise)

콜백 함수는 중첩이 많아지면 가독성이 떨어지는 문제를 초래합니다. 이를 해결하기 위해 JavaScript에서는 프로미스라는 객체를 도입했습니다. 프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다.

다음은 프로미스를 사용한 예제입니다.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { name: 'Jane', age: 25 };
            resolve(data);
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log('데이터:', data);
    })
    .catch((error) => {
        console.error('오류:', error);
    });

위 코드에서는 fetchData 함수가 프로미스를 반환합니다. 1초 후에 성공적으로 데이터를 반환하면 resolve가 호출되고, 이후 then 블록에서 데이터를 처리합니다. 만약 에러가 발생했다면 reject를 호출하여 catch 블록에서 에러를 처리할 수 있습니다.

async/await

JavaScript ES2017(ES8)에서 도입된 async/await 구문은 비동기 코드를 더 간결하고 가독성 있게 작성할 수 있게 해줍니다. async 함수 내부에서 await 키워드를 사용하여 프로미스가 해결될 때까지 기다릴 수 있습니다.

다음은 async/await을 사용한 예제입니다.

async function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            const data = { name: 'Alice', age: 28 };
            resolve(data);
        }, 1000);
    });
}

async function getUserData() {
    try {
        const data = await fetchData();
        console.log('데이터:', data);
    } catch (error) {
        console.error('오류:', error);
    }
}

getUserData();

getUserData 함수에서 fetchData 호출 앞에 await를 붙이면, 프로미스가 해결될 때까지 코드 실행이 일시 중지됩니다. 이를 통해 비동기 코드를 동기적으로 작성한 것처럼 보이게 됩니다.

에러 처리

비동기 작업에서 에러가 발생하는 경우, 적절한 에러 처리가 중요합니다. 프로미스에서는 catch 메서드를 사용하여 에러를 처리할 수 있으며, async/await 구문에서는 try/catch 블록을 사용하여 에러를 처리합니다.

async function fetchData() {
    throw new Error("데이터를 가져오는 중 오류 발생");
}

async function getUserData() {
    try {
        const data = await fetchData();
        console.log('데이터:', data);
    } catch (error) {
        console.error('오류:', error.message);
    }
}

getUserData();

마무리

JavaScript의 비동기 처리는 현대 웹 애플리케이션에서 필수적인 개념입니다. 콜백 함수, 프로미스, 그리고 async/await는 각각의 상황에 맞춰 사용될 수 있으며, 이를 통해 더 나은 사용자 경험을 제공할 수 있습니다. 각 방식의 장단점을 이해하고 적절히 활용하여 효과적인 비동기 코드를 작성하는 것이 중요합니다. 비동기 처리에 대한 깊은 이해는 더 나은 프론트엔드 개발자로 성장하는 데 큰 도움이 될 것입니다.

JavaScript 비동기 처리 마스터하기

비동기 처리의 필요성

콜백 함수

프로미스(Promise)

async/await

에러 처리

마무리