비동기 작업 문제 해결 방법 Callback, Promise, Async/Await.

비동기 작업 문제를 해결하는 세 가지 방법: Callback, Promise, Async/Await.

---

1. Callback 함수로 비동기 작업 해결

Callback은 함수의 인수로 다른 함수를 전달해, 작업 완료 후 호출된다.

 

function fetchData(callback) {
    setTimeout(() => {
        const success = true;
        if (success) {
            callback(null, '성공');
        } else {
            callback('실패', null);
        }
    }, 1000);
}

// 사용
fetchData((error, result) => {
    if (error) {
        console.log('에러 발생:', error);
    } else {
        console.log('결과:', result);
    }
});

 

장점

• 간단하고 직관적.

단점

• Callback Hell: 여러 개의 비동기 작업을 중첩하면 코드가 복잡해지고 가독성이 떨어짐.

 

 

 

2. Promise로 비동기 작업 해결

Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체이다. ES6(ES2015)부터 지원된다.

 

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve('성공');
            } else {
                reject('실패');
            }
        }, 1000);
    });
}

// 사용
fetchData()
    .then(result => console.log('결과:', result))
    .catch(error => console.log('에러 발생:', error));

 

 

장점

• 가독성이 개선되고, 체이닝(then, catch)을 통해 비동기 작업 연결이 간단.

단점

• 코드가 길어질 경우 여전히 가독성이 떨어질 수 있음.

---

3. Async/Await으로 비동기 작업 해결

Async/Await은 ES7(ES2017)에서 도입되었다. Promise 기반 코드를 동기 코드처럼 작성할 수 있게 해준다.

 

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve('성공');
            } else {
                reject('실패');
            }
        }, 1000);
    });
}

// 사용
async function executeAsyncTask() {
    try {
        const result = await fetchData();
        console.log('결과:', result);
    } catch (error) {
        console.log('에러 발생:', error);
    }
}

executeAsyncTask();

 

 

 

 

비교

가독성	낮음 (Callback Hell 가능)	중간 (체이닝 가능)	높음 (동기 코드처럼)
에러 처리	복잡 (중첩된 에러 처리 필요)	간단 (.catch 사용)	간단 (try-catch 사용)
복잡한 비동기	관리 어려움	체이닝으로 관리 가능	간결하게 관리 가능

---

결론

• Callback: 단순한 비동기 작업에 적합.
• Promise: 다중 비동기 작업이나 체이닝 작업에 적합.
• Async/Await: 가독성이 중요하고 복잡한 비동기 작업에 적합.