JS) Async-await의 필요성

JS는 동기식 언어이다.

동기는 한 번에 하나의 작업을 수행하고, 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다.

비동기는 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말한다.

JS가 웹 사이트에서 동작할 때 동기적으로만 수행된다면 한 동작이 끝날 때까지 화면에 아무것도 나타나지 않거나 다음 동작을 수행하는데 지장이 간다.

웹페이지는 보다 유동적으로, 효율적으로 많은 일을 하기 위해서 비동기적으로 동작할 수 있어야 한다.

라면 먹는 과정을 예로들어 설명하자면 순서는 다음과 같다

컵라면_뜯기();
스프_꺼내기();
스프_뜯어서_뿌리기();
뜨거운물_담기();
3분기다리기();
먹기();

각 과정을 동기(sync), 비동기(async)로 나타낼 수 있다.

[SYNC]컵라면_뜯기
[ASYNC]스프_꺼내기
[SYNC]스프_뜯어서_뿌리기
[SYNC]뜨거운물_담기
[ASYNC]3분기다리기
[SYNC]먹기

하지만 JS에서 코드의 실행순서는 코드를 작성한 순서대로 진행되지는 않는다.
동기처리를 모두 완료한 후 비동기처리를 진행되기 때문이다.

동기처리인 "컵라면뜯기", "스프뜯어서뿌리기", "뜨거운물담기", "먹기"가 먼저 실행되고
비동기 처리인 "스프_꺼내기", "3분기다리기"가 실행된다.

그렇기에 async-await를 이용해서 순서성을 주는 것이다.

비동기처리가 필요한 작업 앞에 await를 붙여
promise가 실행되어 그 결과값을 받아 올 때까지 기다리기 때문이다.

(async ()=>{
컵라면_뜯기();
await 스프_꺼내기();
스프_뜯어서_뿌리기();
뜨거운물_담기();
await 3분기다리기();
먹기();
}

callback함수를 이용해서 다음과 같이도 짤수 있는데
callback이 많아질수록 가독성이 매우 떨어지고 에러가 발생했을때 찾아내기가 어려워
async-await을 많이 사용한다

컵라면_뜯기();
스프_꺼내기(()=>{
    스프_뜯어서_뿌리기();
    뜨거운물_담기();
    3분기다리기(()=>{
        먹기();
    })
});

사람한테는 먼저 작동 되어야할것이 윗줄에 있는 모습을 읽기가 편하기 때문에 코드를 작성할땐 동기, 비동기 여부 관련없이 프로그래머가 생각하기에 먼저 실행 되어야 할것으로 생각 되는것을 윗줄에 작성한다. 이것을 가능하게 해주는게 async-await 이다