동기와 비동기에 관한 설명을 처음 들었을 때
Async-Await
Async : 비동기
비동기적으로 작동한다는 것은 순서에 영향을 받지 않는 여러 동작들이 동시에 실행된다는 의미이고, 동기적으로 작동한다는 것은 순서대로 실행되는 동작들을 의미한다.
자바스크립트는 동기적으로 작동하는 언어지만 외부 라이브러리의 도움을 받거나 자바스크립트 내장 비동기 함수를 사용하면 원하는 부분을 비동기적으로 처리할 수 있다.
async함수는 항상 Promise객체를 반환하는데 반환값을 고의적으로 Promise가 아닌 다른 값으로 지정한다해도 암묵적으로 Promise객체에 들어가게 된다.
const 함수 = async () => return 응애_나_아니야_프로미스;const 함수 = async () => return Promise.resolve(응애_나_아니야_프로미스);위의 두 코드는 같은 코드이다.
Promise객체는 비동기 작업이 끝나게 될 미래 시점의 완료 또는 실패 그리고 그 결과값을 상태로 나타낸다.
- Pending (대기) : 완료도, 실패도 안 된 상태
- Fullfilled (이행) : 연산 완료 상태
- Rejected (거부) : 연산 실패 상태
자바스크립트 내장 비동기 함수의 대표적인 예로는
시간 관련 내장 함수인 setTimeOut()이나 setInterval()이 있고,
외부 라이브러리의 대표적인 예로는
HTTP 요청을 위한 REST api(axios)나 GraphQL api(apllo)가 있다.
웹 서비스를 구현할 때 프론트 단에서 많이 쓰게 되는 것이 HTTP 요청인데 이 HTTP 요청 관련 함수들은 전부 비동기 함수이다.
근데 await은 왜 같이 묶여있냐고?
async함수를 작성한다고 해도 await이 없으면 비동기 함수로 정의한 async함수는 동기적으로 작동하게 된다.
그리고
일반 함수 안에 await을 작성하는 건.. 뭐 말해봤자 의미 없겠지만 애초에 문법 에러가 날 뿐더러 동기에 동기를 적용하는 게... 의미가 없겠지 안 그래?
Await : 멈춰!(...?)
await은 쉽게 말하자면 비동기적으로 작동하는 함수 앞에 붙이면 동기적으로 작동하게 만드는 연산자이다.
근데 await 은 async 함수 "안에서만" 사용할 수 있는 조금 특이한 친구이다.
그래서 비동기 함수의 앞에 그냥 냅다 갖다 박는다고 되는게 아니라,
const 나_함수 = async () => {
await 나_비동기함수();
}
또는
async function 나_함수() {
await 나_비동기함수();
}이런 식으로 async 를 붙여서 비동기로 정의한 함수를 만들고,
그 안에서 동기적으로 작동하길 원하는 비동기 함수 앞에 await을 붙이면 된다 2마리야..
async function과 await을 쓰는 이유
await을 사용하면 이 Promise들을 반환하는 async함수들을 동기적으로, 그러니까 코드가 적힌 순서대로 실행되게 해서 코드를 보는 사람으로 하여금 직관적으로 파악하게 도와준다. 즉, 가독성면에서 매우 좋다.
물론 .then() 메서드를 chaining 시켜서 사용해도 되지만 async-await조합이 훨씬 더 가독성이 좋다.
간단한 예시를 보여주자면,
n초 후에 콜백 함수를 실행시켜주는 timer 비동기 함수가 있다고 가정하자.
timer(n, callbackFn)
근데 이 비동기 함수를 나는 1초가 걸리는 첫 번째 작업이 끝나면 그 후에 1초가 걸리는 두 번째 작업을 ... 이렇게 여러 작업을 1초 간격으로 동기적으로 실행시키고 싶어!!! 라고 하면
timer(1000, function(){
첫_번째_작업();
timer(1000, function() {
두_번째_작업();
timer(1000, function() {
세_번째_작업();
}
}
}
이렇게 작성할 수 있다. 이게 규모가 커지고 여러 작업이 되면 코드가 아주 💩이 되는 상황을 볼 수 있다. 흔히들 콜백지옥 이라고 부른다.
이 똥을 개선하기 위해 .then() 으로 체이닝 시키는 방법이 있다.
timer(1000)
.then(function(){
첫_번째_작업();
return timer(1000);
})
.then(function(){
두_번째_작업();
return timer(1000);
})
.then(function(){
세_번째_작업();
return timer(1000);
})
훨씬 나아졌지만, 아직 더 나아질 수 있다. 바로 async-await을 사용하면!
async function run() {
await timer(1000);
첫_번째_작업();
await timer(1000);
두_번째_작업();
await timer(1000);
세_번째_작업();
}
run();이미지 출처: 침착맨(문제시 삭제하겠습니다)
