Asynchronous JavaScript - Callbacks, Promises, and Async/Await

🚀 오늘은 JavaScript에서 비동기 처리에 대해 이야기해 볼 것입니다. 막연히 들어만 본 Callback, Promise, Async/Await에 대해 자세히 알아봅시다. 초보자도 이해할 수 있게 단계별로 살펴보며, 코드 예시를 통해 실제로 어떻게 작동하는지 확인해보겠습니다.

🚥 Callback

Callback은 가장 기본적인 비동기 처리 방식입니다. 함수를 다른 함수의 인자로 전달하고, 필요한 시점에 실행하는 방식입니다.

    // 코드 예시
    function example(callback) {
        // 일부 코드
        callback(); // callback 함수 실행
    }

    example(() => {
        console.log("Callback function is executed!");
    });
    

🎁 Promise

Promise는 비동기 작업이 완료된 후의 결과를 나타냅니다. resolve(성공) 또는 reject(실패) 상태를 가집니다.

    // 코드 예시
    let promise = new Promise((resolve, reject) => {
        // 비동기 작업
        if (/* 성공 */) {
            resolve("Success!");
        } else {
            reject("Failure!");
        }
    });

    promise
        .then(result => { console.log(result); }) // "Success!"
        .catch(error => { console.log(error); }); // "Failure!"
    

🔮 Async/Await

Async/Await는 Promise를 더 쉽게 다룰 수 있게 하는 ES8의 특징입니다. 비동기 함수 앞에 async를 붙이고, Promise 앞에 await를 붙여 사용합니다.

    // 코드 예시
    async function example() {
        let result = await promise; // promise가 resolve 될 때까지 기다림
        console.log(result); // "Success!"
    }

    example();
    

💡 비동기 처리는 자바스크립트에서 중요한 개념입니다. Callback, Promise, Async/Await을 이용하여 효과적으로 비동기 작업을 관리할 수 있습니다.

---

📌 다음 글에서는 비동기 처리에 대한 깊이 있는 이해를 위해, 'Event Loop'와 'Task Queue'에 대해 알아보겠습니다. 🎊