[JavaScript] async, await

▶ 비동기 프로그래밍

엄마가 세탁기를 돌리고 청소를 하라고 했을 때,
세탁이 끝날 때까지 기다린 후 청소를 한다면 동기적 방식
세탁기를 누르고 청소를 하고 있다면 비동기적 방식 이다.

▶ 비동기 방식이 필요한 경우

• Web API 요청 (서버에서 데이터를 받아올 때)

• 파일 읽기 (서버 쪽에서 파일을 읽어올 때)

• 암호화/복호화

• 작업 예약 (몇 초 후에 해야 되는 작업이 필요할 때)

▶ async await

async/await는 비동기적인 작업을 처리할 수 있는 ES2017 문법이다.

async 함수를 정의하면 함수 내부에서 await 키워드를 이용하여 비동기적으로 처리되는 작업이 완료될 때까지 기다린 후, 결과값을 반환하는 처리를 할 수 있다.

만약 async 를 사용하지 않고 동기적으로 코드가 돌아가게 한다면,

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

const getDog = async () => {
    await sleep(1000);
    console.log('멍멍');
};

const getRabbit = async () => {
    await sleep(500);
    console.log('토끼토끼');
};
const getTurtle = async () => {
    await sleep(3000);
    console.log('거북거북');
};

async function process() {
    getDog();
    getRabbit();
    getTurtle();
}

process();

===================================
  
출력

토끼토끼
멍멍
거북거북

process 에선 멍멍이 -> 토끼 -> 거북이 순으로 호출해도 호출되는 순서는 토기 -> 멍멍이 -> 거북이 순이다. 이는 await 를 걸어두지 않았기 때문에 먼저 끝나는 녀석부터 화면에 나오기 때문이다.

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

const getDog = async () => {
    await sleep(1000);
    console.log('멍멍');
};

const getRabbit = async () => {
    await sleep(500);
    console.log('토끼토끼');
};
const getTurtle = async () => {
    await sleep(3000);
    console.log('거북거북');
};

async function process() {
    await getDog();
    await getRabbit();
    await getTurtle();
}

process();

===================================
  
출력

멍멍
토끼토끼
거북거북

이렇게 하면 제대로 나오는 것을 확인할 수 있다.

▶ 마치며

첫 회사에 입사했을 때, API 를 호출 후 호출한 데이터를 이용해 차트를 만들어야 했는데, 제대로 호출한 것 같았는데 어쩔 때는 표가 제대로 나오고 어쩔 때는 표가 제대로 안 나와서 뭘까 했던 적이 있다. API 호출이 끝난 후 차트를 찍었어야 했는데, 차트가 렌더링된 후 API 호출이 끝났기 때문이다.
지금 생각해보면 진짜 아무것도 몰랐던 시기였는데, 그 시기만큼 무언가를 빠르고 간절하게 흡수했던 적이 없었던 것 같다.

블로그 글보다 이거 보면 좋다
https://www.youtube.com/watch?v=m0icCqHY39U (얄코의 비동기 프로그래밍)