JavaScript 비동기 처리: 콜백부터 async/await까지 한눈에 이해하기

비동기 처리란 무엇인가?

현대 웹 개발 환경에서는 데이터를 가져오거나 파일을 읽는 등의 작업이 빈번히 발생합니다. 이 과정에서 프로그램 실행을 잠시 멈추지 않고 처리하도록 만드는 기술이 비동기 처리입니다. 이를 활용하면 화면이 멈추지 않고 부드럽게 동작하며, 사용자는 빠르고 효율적인 경험을 누릴 수 있습니다.

콜백(Callback) 함수의 개념

처음 비동기 접근법으로 자주 사용하던 방식은 콜백 함수입니다. 특정 동작이 끝난 후 그 결과를 전달받기 위해 함수를 인자로 넘기는 구조입니다.

예제: 콜백을 사용한 비동기

function fetchData(callback) {
    setTimeout(() => {
        const data = { name: "홍길동", age: 30 };
        callback(data);
    }, 1000);
}

fetchData((result) => {
    console.log("콜백으로 받은 정보:", result);
});

이 방식은 간단하지만, 복잡한 연쇄 동작을 처리하다 보면 코드가 깊게 중첩되는 문제가 발생합니다(이른바 콜백 지옥).

Promise의 등장과 개선

콜백의 복잡성을 해결하기 위해 Promise가 등장했습니다. 이것은 성공 시 resolve를, 실패 시 reject를 반환하는 객체 형태의 구조입니다. 코드 가독성이 높아지고 에러 처리도 명확해집니다.

예제: Promise 활용

function fetchUserData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const userData = { name: "김철수", job: "개발자" };
            resolve(userData);
        }, 1000);
    });
}

fetchUserData()
    .then(data => console.log("Promise 결과:", data))
    .catch(error => console.error("에러 발생:", error));

async/await로 더욱 간결해진 코드

Promise를 한 단계 더 발전시킨 접근법이 async/await입니다. 비동기 처리를 마치 동기 코드처럼 작성할 수 있어 가독성이 뛰어나며, 에러 핸들링도 명확해집니다.

예제: async/await 적용

async function getInfo() {
    try {
        const user = await fetchUserData();
        console.log("async/await 결과:", user);
    } catch (error) {
        console.error("문제 발생:", error);
    }
}

getInfo();

위 예제는 비동기 결과를 기다렸다가 받은 다음 처리하므로, 코드가 직관적입니다.

비동기 처리 방법 선택 기준
• 콜백: 단순한 비동기 작업에 적합하지만, 복잡해질 경우 관리가 어렵습니다.
• Promise: 콜백 구조 문제를 해결하고 체이닝이 가능하지만, 연속적인 비동기 로직이 길어지면 여전히 다소 장황해질 수 있습니다.
• async/await: 최신 문법으로, 간결하고 읽기 쉬운 코드 작성을 지원합니다.

비동기 처리는 웹 개발에서 필수적인 요소로 자리 잡았습니다. 콜백에서 Promise로, 다시 async/await로 발전한 흐름을 이해하면, 어떤 상황에서 어떤 방식을 활용할지 명확해집니다. 이 글을 통해 비동기 코드를 효율적으로 작성하고 안정적인 사용자 경험을 제공하는 데 도움이 되길 바랍니다.

위 글은 자연스러운 흐름으로 비동기 처리 개념을 정리하고, 예제를 통해 실제 적용 방법을 제시하였습니다. 이를 통해 JavaScript 환경에서의 비동기 동작을 명확히 이해하고 효율적으로 코드를 작성하는 발판을 마련할 수 있을 것입니다.