JavaScript 콜백 지옥 해결법 - Promise, async/await 사용법 소개

JavaScript 콜백 지옥 해결법 - Promise, async/await 사용법 소개

 

 

자바스크립트에서 비동기 프로그래밍을 다룰 때 가장 흔히 마주치는 문제 중 하나는 콜백 지옥입니다. 이 문제를 해결하기 위해 등장한 Promise와 async/await은 코드를 더 읽기 쉽게 만들고 비동기 코드를 관리하기 쉽게 합니다. 이 글에서는 Promise와 async/await의 개념, 사용법, 그리고 실제 코드에서의 활용을 예시와 함께 살펴보겠습니다.

 

 

Promise란 무엇인가?

 

Promise(약속) 는 자바스크립트에서 비동기 코드를 다루는 객체입니다. 이것은 비동기 작업이 완료되면 또 다른 동작을 수행하도록 예약된 객체로 생각할 수 있습니다.

 

 

Promise의 사용법

 

Promise를 사용하면 다음과 같이 코드를 작성할 수 있습니다.

 

function fetchData() {
    return new Promise((resolve, reject) => {
        // 비동기 작업 수행
        setTimeout(() => {
            if (Math.random() < 0.5) {
                resolve("데이터 가져오기 성공!");
            } else {
                reject("데이터 가져오기 실패!");
            }
        }, 1000);
    });
}

// Promise 사용
fetchData()
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error);
    });

 

위 코드에서 fetchData 함수는 Promise를 반환하며, 작업이 성공하면 resolve를 호출하고, 실패하면 reject를 호출합니다. 이를 .then 및 .catch를 사용하여 처리합니다.

 

 

async/await란 무엇인가?

 

 

async/await은 Promise를 더 쉽게 다룰 수 있도록 도와주는 문법적인 기능입니다. async 함수는 항상 Promise를 반환하며, await는 Promise가 완료될 때까지 실행을 일시 중지합니다.

 

 

async/await의 사용법

 

async/await을 사용하면 코드가 더 간결해집니다.

 

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (Math.random() < 0.5) {
                resolve("데이터 가져오기 성공!");
            } else {
                reject("데이터 가져오기 실패!");
            }
        }, 1000);
    });
}

async function getData() {
    try {
        const result = await fetchData();
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

getData();

 

getData 함수는 await를 사용하여 fetchData의 결과를 기다립니다. 코드가 순차적으로 실행되는 것처럼 보이며 가독성이 향상됩니다.

 

 

실제 활용 사례 : 네트워크 요청

 

Promise와 async/await은 네트워크 요청과 데이터베이스 액세스와 같은 비동기 작업에서 자주 사용됩니다. 아래는 네트워크 요청의 예시입니다.

 

 

async function fetchUserData(userId) {
    try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
        throw error;
    }
}

fetchUserData(123)
    .then(userData => {
        console.log(userData);
    })
    .catch(error => {
        console.error("사용자 데이터를 가져오는 중 오류 발생:", error);
    });

 

이 코드는 사용자 데이터를 비동기적으로 가져오며, 오류 처리도 포함하고 있습니다.

 

 

끝으로

 

Promise와 async/await은 콜백 지옥을 해결하고 비동기 코드를 관리하기 위한 강력한 도구입니다. 이 글에서는 이러한 개념의 기초, 사용법, 그리고 실제 활용 사례를 다뤘습니다. 콜백 지옥에서 벗어나 더 읽기 쉽고 유지보수가 용이한 코드를 작성하고, 비동기 작업을 보다 효율적으로 다룰 수 있습니다.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 콜백함수 사용법, 콜백 지옥, 에러 처리, 관련 소스 코드

 

JavaScript 배열 메소드 find() 쉽게 배우기 - 예시 코드 제공

 

JavaScript 배열 메소드 reduce() 쉽게 배우기 - 예시 코드 제공