안녕하세요. 오늘은 Promise, async, await에 대하여 알아보도록 하겠습니다!
비동기 프로그래밍
Java Script는 Event Driven즉, 어떤 사건이 발생하면 지체 없이 그 내용을 전달해 주는 것으로 실행구조를 가지고 있습니다 아래 예제 코드를 보며 이해해 보도록 하겠습니다.
코드를 살펴 보겠습니다.
window.onload = () => {
console.log('페이지가 로딩되는 시점에 실행됩니다.')
}
document.querySelector('.target').onclick = () => {
console.log('.target을 클릭했을 때 실행됩니다.')
}
document.querySelector('.input').onkeyup = () => {
console.log('.input에 키보드 입력을 했을 때 실행됩니다.')
}
예제 코드 1
위의 예제 코드 처럼 페이지가 로딩되고, target을 클릭하고, 키를 입력했을때 event를 감지하여 함수가 실행되는 구조입니다. 이런 형태를 Event Driven 이라고 합니다.
window.onload = () => {
setTimeout( () => {
console.log('1번 입니다.')
}, 1000)
console.log('2번 입니다.')
}
예제 코드 2
위의 예제 코드의 console은 누가 먼저 찍힐까요?
페이지가 로딩되고 2번이 먼저 실행 된 뒤 ,1초뒤에 1번이 실행됩니다.
즉 코드가 순차적으로 실행되는것이 아닌 Event 기반으로 코드가 실행이 됩니다.
그리고 이러한 Event가 많아질경우 흔히 말하는 CallBack 지옥으로 빠지게 됩니다.
setTimeout(() => {
console.log("1 번째 setTimeout");
setTimeout(() => {
console.log("2 번째 setTimeout");
setTimeout(() => {
console.log("3 번째 setTimeout");
setTimeout(() => {
console.log("4 번째 setTimeout");
setTimeout(() => {
console.log("5 번째 setTimeout");
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
예제 코드 3
위의 코드를 살펴보면 callback이 끝난 후에 또 callback.... 이렇게 callback 함수가 늘어나면 늘어날수록 피라미드 모양 같아서 피라미드 무덤이라는 이야기도 있습니다. 무덤에 빠지면 나올수 없죠..
이런 코드를 막기위해 Promise가 등장했습니다.
Promise의 등장
callback 지옥에서 벗어나고자 Promise가 도입 되었습니다.
뿐만 아니라 Promise의 도입된 목적은 다음과 같습니다.
비동기 처리는 함수에서 처리된 결과값을 반환할 경우, 함수에서 찾을 수 밖에 없어 코드가 복잡할 경우 어려움이 있습니다.
Promise는 구조가 간단해 반환값을 찾아 사용하기 쉽습니다.
비동기 처리를 위한 콜백패턴이 처리순서를 보장하지 않습니다.
에러처리에 대한 한계가 있습니다.
에러는 호출자 방향으로 전파되어 호출자가 사라지면 콜백함수를 호출하고 그것이 완료되기 전에 바로 호출스택을
빠져 나갑니다. 즉 함수를 호출한 호출자가 사라지는 겁니다.
Promise
promise의 문법은 다음과 같습니다.
let num = 0;
let _promise = () => {
return new Promise(resolve => {
// Promise 객체를 반환합니다.
setTimeout(() => {
console.log(`${++num} 번째 실행`);
// setTimeout이 끝나는 시점에서 resolve() 실행합니다.
resolve();
// 여기서 resolve는 then에서 인자로 넘겨진 callback 함수입니다.
}, 1000);
});
};
const callback = function() {
console.log("then 구문에서 반환하는 function은 resolve가 됩니다.");
};
_promise().then(callback);
예제 코드 4
위의 예제 코드( Promise )의 실행 순서는 다음과 같습니다.
Promise 객체를 반환합니다
Promise 객체의 인자에는 resolve function과 reject function이 있습니다.
Promise 객체에는 then 이라는 method가 있습니다.
then은 function을 인자로 받습니다.
then에서 넘겨진 function은 promise의 resolve에서 실행됩니다.
핵심은, then에서 function을 넘겨주고, 해당 function이 resolve입니다.
then을 계속 사용하기 위해서는 new Promise를 계속 반환 해주면 됩니다.
let _promise = () => {
return new Promise(resolve => {
setTimeout(() => {
console.log("1 번째 실행");
resolve();
}, 1000);
})()
.then(() => {
return new Promise(resolve => {
setTimeout(() => {
console.log("2 번째 실행");
resolve();
}, 1000);
});
})
.then(() => {
return new Promise(resolve => {
setTimeout(() => {
console.log("3 번째 실행");
resolve();
}, 1000);
});
})
.then(() => {
return new Promise(resolve => {
setTimeout(() => {
console.log("4 번째 실행");
resolve();
}, 1000);
});
});
};
예제 코드 5
보여지는 것 처럼, then을 계속 사용하기 위해 then의 인자 function에서 항상 new Promise를 반환합니다.
그래야 then을 이어서 사용할 수 있습니다.
let num = 0;
const _promise = () =>
new Promise(resolve => {
setTimeout(() => {
console.log(`${++num} 번째 실행`);
resolve();
}, 1000);
});
_promise().then(_promise).then(_promise).then(_promise).then(_promise).then(_promise);
예제 코드 6
예제 코드 5를 위의 코드처럼 추상화 시킬 수 있습니다.
하지만 다음 아래의 코드처럼 문제점이 있습니다.
let num = 0;
const _promise = () =>
new Promise(resolve => {
setTimeout(() => {
console.log(`${++num} 번째 실행`);
resolve();
}, 1000);
});
_promise().then(_promise).then(_promise).then(_promise).then(_promise).then(_promise);
console.log('이게 먼저 실행됩니다.')
예제 코드 6
동기프로그래밍을 하기 위해서 항상 then을 사용해야 한다는 것입니다. then 바깥에서는 여전히 비동기 프로그래밍 방식으로 실행됩니다. 그래서 async/await이라는 개념을 사용하여 훨씬 더 간단하게 promise를 사용할 수 있습니다.
async, await의 등장
Promise가 기존 콜백지옥에서 코드를 조금은 동기적으로 개선했지만 코드의 실행순서나 복잡함에 있어서는
고쳐야 할 부분이 있었습니다
그래서 이를 간편하게 만들고자 async, await이 도입되었습니다.
async, await
비동기로 실행되는 것들을 끝날 때 까지 기다리는 형태를 의미합니다. aysnc/await을 사용하기 위해선 일단 Promise를 사용해야 합니다. 다음 코드를 통해 살펴보겠습니다.
let num = 0;
const _function = () =>
new Promise(resolve => {
setTimeout(() => {
console.log(`${++num} 번째 실행`);
resolve();
}, 1000);
});
(async = () => {
// 함수 앞에 async 이라는 키워드를 붙혀줍니다.
await _function(); // promise를 반환하는 함수 앞에 await을 붙혀줍니다.
console.log("test1"); // await 구문이 완료될 때 까지 기다린 후 실행됩니다.
await _function();
console.log("test2");
await _function();
console.log("test3");
})();
예제 코드 6
다위의 코드(async, await)의 핵심 문법 다음과 같습니다.
함수 앞에 async이라는 키워드를 붙혀줍니다.
promise로 반환하는 것들 앞에 await을 붙혀줍니다.
※ javascript의 코드는 거의 대부분 함수 내부에서 작성됩니다. 그렇기 때문에 async/await 문법은 매우 편리하 게 사용 될 수 있습니다.
※ 그리고 async/await 에서 resolve에 인자를 넣어주면 해당 값이 await 구문에 반환됩니다.
let num = 0;
const _function = () =>
new Promise(resolve => {
setTimeout(() => {
console.log(`${++num} 번째 실행`);
resolve(num * 5);
}, 500);
});
(async () => {
const num1 = await _function();
console.log(num1); // 콘솔 값 5
const num2 = await _function();
console.log(num2); // 콘솔 값 10
})();
예제 코드 6
것위의 예제 처럼 resolve(num *5)를 하였고, const num1=await _function() 에는 num *5 의 결과가 반환 되어습니다. then 구문 보다 훨씬 폭 넓고 쉽게 사용할 수 있습니다.
이상으로 promise, async, await에 대하여 알아보았습니다. 감사합니다.
