[JavaScript] 비동기적 프로그래밍, Promise, async 그리고 await

 

 

 

제목의 개념들을 간단히 짚고 넘어가 보려고 한다.

 

---

 

 

데이터를 받는 방식은 동기와 비동기로 2가지가 있다.

이 두가지 개념에 대해서 알아보도록 하자.

 

 

동기 (Synchronous)

 

 

사전적 의미와 같이 동시에 일어난다는 의미이다.

요청과 그에 대한 응답이 동시에 일어나야 하는 개념이므로, 요청에 대한 응답이 이루어져야 다음 동작이 일어나게 된다.

동기의 경우에는 모든 코드가 순차적으로 진행되므로 어떤 식으로 코드가 진행되는지 파악하기 좋다.

다만 요청에 대한 응답이 주어질 때까지 처리가 지연되므로 이에 따른 지연이 일어나게 된다.

 

 

비동기 (Asynchronous)

동기와는 반대로 요청과 응답이 동시에 일어나지 않는 개념이다.

모든 일이 순차적으로 일어나지 않고, 동시다발적으로 여러 요청과 응답이 이루어지게 된다.

동시에 여러 요청과 응답이 주어지기 때문에 혼란스러울 수 있으나, 그만큼 빠른 속도로 실행을 할 수 있다는 장점이 있다.

동기와 비동기 처리방식을 장표를 이용하여 표현하면 다음과 같이 표현할 수 있다.

 

 

 

비동기적 처리가 필요한 이유

어떠한 웹으로부터 여러 데이터를 받아서 표현하는 웹을 만든다고 했을 때,

동기적 처리를 기반으로 페이지를 구성한다면 전체 페이지의 로딩이 매우 지연될 것이 자명하다.

따라서 우리는 데이터의 수신과 같은 응답의 기다림이 필요한 경우, 비동기적 처리를 통해 로딩 시간을 대폭적으로 줄일 수 있게 된다.

 

 

 

 

---

 

 

 

아무런 지식이 없는 상태에서 비동기적 코드를 우리가 짠다고 했을 때,

어떠한 작업이 진행되고, 다시 타이머가 진행되고, 작업이 반복되는 작업을 다음과 같이 작성하게 된다.

 

timer(1000, function() {
    console.log('작업');
    timer(1000, function() {
        console.log('작업')
        timer(1000, function() {
            console.log('작업')
            timer(1000, function() {
                console.log('작업')
            });
        });
    });
});

 

 

이를 한국어로는 콜백지옥이라고도 표현한다.

 

 

이를 해결하기 위해 나타난 개념이 promise이다.

 

 

 

 

 

---

 

 

Promise, async, await

promise란?

편의상 프로미스라고 하겠다.

프로미스는 자바스크립트에서 비동기 처리를 위해 사용되는 객체로 다음의 그림과 같이 프로미스 메서드는 요청이 성공했을 경우 then, 실패했을 경우 catch로 이어지는 코드를 짤 수 있다.

 

 

따라서 우리는 이 프로미스를 사용하여 위의 콜백 지옥의 함수를 다음과 같이 간편하게 표현할 수 있다.

timer(1000)
    .then(function() {
    console.log('작업')
    return timer(1000);
    })
    .then(function() {
    console.log('작업')
    return timer(1000);
    })
    .then(function() {
    console.log('작업')
    return timer(1000);
    })
    .catch(function(){
    console.log('에러 발생')
})

각각의 작업들을 chaining함으로써 콜백 지옥에서 벗어날 수 있게 된다.

 

 

 

하지만 사람들은 여기서 코드를 더 간결하게 완성도 있게 만들고 싶어 했고,

이렇게 나오게 된 게 async, await가 되겠다.

이 같은 코드를 async와 await를 이용하면 다음과 같이 바뀌게 된다.

async function run(){
    await timer(1000)
    console.log('작업')
    await timer(1000)
    console.log('작업')
    await timer(1000)
    console.log('작업')
}

run()

이를 이용하면 비동기적인 코드 작성을 동기적 코드와 유사하게 작성할 수 있게 된다.

(문법적 단순함을 추구)