avaScript의 비동기 프로그래밍은 특히 네트워크 요청, 파일 작업 또는 완료하는 데 시간이 걸리고 코드 실행을 차단하고 싶지 않은 작업과 같은 작업을 처리하는 맥락에서 핵심 개념입니다. JavaScript는 비동기 작업을 처리하기 위한 여러 가지 접근 방식을 제공합니다.
CallBack
JavaScript에서 비동기 작업을 처리하는 가장 기본적이고 전통적인 방법은 콜백을 사용하는 것입니다. 콜백은 다른 함수에 인수로 전달되는 함수이며 일부 작업이 완료된 후에 실행됩니다.
function fetchData(callback) {
// Simulate an async operation (like fetching data from an API)
setTimeout(() => {
callback("Data retrieved");
}, 1000);
}
fetchData((data) => {
console.log(data); // Output after 1 second: Data retrieved
});콜백은 간단하지만 여러 비동기 작업을 처리할 때 "콜백 지옥"으로 알려진 복잡하고 중첩된 구조로 이어질 수 있습니다.
Promise
Promise는 비동기 작업을 처리하기 위해 콜백보다 개선되었습니다. JavaScript의 Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 개체입니다.
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data retrieved");
}, 1000);
});
}
fetchData().then(data => {
console.log(data); // Output after 1 second: Data retrieved
}).catch(error => {
console.error(error);
});Promise는 연결 가능하며 종종 중첩된 콜백보다 더 읽기 쉬운 코드로 이어집니다.
then에는 resolve값(성공시), catch는 reject(실패시) 들어갑니다.
finally는 성공이든 실패든 모두 들어갑니다.
Async/Await
async/await는 JavaScript의 최신 구문 기능으로, 비동기 코드 작업을 더욱 쉽게 해줍니다. async 함수는 항상 약속을 반환하고 await는 약속이 해결되거나 거부될 때까지 기다리는 데 사용됩니다.
async function fetchData() {
// Simulate waiting for an async operation (like a network request)
await new Promise(resolve => setTimeout(resolve, 1000));
return "Data retrieved";
}
async function main() {
try {
const data = await fetchData();
console.log(data); // Output after 1 second: Data retrieved
} catch (error) {
console.error(error);
}
}
main();async/await는 비동기 코드를 동기 코드처럼 보이고 동작하게 하여 이해하고 유지 관리하기 쉽게 만듭니다.
올바른 접근방식 선택
- Callback: 간단한 경우에는 좋지만 복잡한 시나리오에서는 코드 유지 관리가 덜 필요할 수 있습니다.
- Promise: 콜백에 비해 더 나은 제어 흐름과 오류 처리를 제공합니다.
- Async/Await: 현대적이고 깔끔하며 Promise를 처리하는 코드를 더 읽기 쉽고 작성하기 쉽게 만듭니다.
'async/await'는 약속에 대한 단순한 구문일 뿐이며 새로운 흐름 제어 메커니즘을 도입하지 않는다는 점을 기억하는 것이 중요합니다. JavaScript의 비동기 프로그래밍은 코드를 더 쉽게 관리하고 읽을 수 있도록 발전했으며 이러한 개념을 이해하는 것이 효율적인 JavaScript 애플리케이션을 작성하는 데 중요합니다.
