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은 콜백 지옥을 해결하고 비동기 코드를 관리하기 위한 강력한 도구입니다. 이 글에서는 이러한 개념의 기초, 사용법, 그리고 실제 활용 사례를 다뤘습니다. 콜백 지옥에서 벗어나 더 읽기 쉽고 유지보수가 용이한 코드를 작성하고, 비동기 작업을 보다 효율적으로 다룰 수 있습니다.
▼ 아래 글도 읽어보세요! ▼
'Programming & Platform > JavaScript' 카테고리의 다른 글
JavaScript 명시적 this 바인딩, apply 메소드 쉽게 배우기 - 예시 코드 제공 (0) | 2023.12.19 |
---|---|
JavaScript 명시적 this 바인딩, call 메소드 쉽게 배우기 - 예시 코드 제공 (0) | 2023.12.17 |
부트스트랩 달력 특정일자 비활성화 하는 방법 bootstrap datepicker (0) | 2023.12.15 |
JavaScript 콜백함수 사용법, 콜백 지옥, 에러 처리, 관련 소스 코드 (0) | 2023.12.13 |
JavaScript로 이미지 위에 마우스 커서를 손가락 모양으로 바꾸기 (0) | 2023.12.11 |