Asynchronous JavaScript

동기와 비동기 (Sync & Async)

동기는

티켓을 끊으러 가는 것을 예로 들면 좋겠다.

티켓을 끊기전까지는 그 줄에 서 있어야 하고 계속해서 기다리면서 대기열이 순차적으로 생긴다.

비동기는

커피 주문을 시키고 진동벨을 예로 들면 좋겠다.

커피 주문을 시키고 그 줄에서 빠져나와 의자에 앉아서 진동벨이 울리기까지 기다리게 된다.

진동벨이 울리면 내가 주문한 커피를 받아 올 수 있다.

Callback

비동기를 하기위해서는 순서를 제어할 수 있어야 한다.

순서를 제어하기 위해서는 Call을 기다려야 한다.

Call이 불려지기 전까지는 대기 할 수 있어야 한다.

허나, 이런 Callback에도 불구하고 코드의 가독성이 떨어지면서, 문제의 구간이 생긴다.

일명 Callback Hell이라는 구간이 생기는 것이다.

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

코드 출처 : 리브레 위키

Callback Hell이 발생되는것은 함수를 연달아 사용하게 되면서 읽기 어려울 정도로 변하게 되면서, 가독성이 떨어지는 것을 볼 수 있다. 이것을 해결하기 위해 나온 Promise 패턴을 도입하게 된다.

Promise

Promise 패턴은 ECMAScript 2015 표준으로써 많이 활용되고 있다.

Promise는 resolve 와 reject를 호출하게 된다.

resolve는 참(true)일 경우 반환을 하며, reject는 거짓(false)일 경우 반환을 하게 만들면서 사용되고 있다.

Promise 패턴도 Hell을 벗어날 수 없게 된다.

// Resolve Promises
connectToDatabase()
  .then((database) => {
    return getUsers(database)
      .then((users) => {
          return getUserSettings(database)
            .then((settings) => {
              return enableAccess(user, settings);
            })
      })
  })

코드 출처 : medium

Async Function

Promise Hell을 극복하기 위해 나온 ECMAScript 2017 표준으로 사용되는 Async 함수이다.

Async 함수는 파이어폭스, 구글 크롬, 마이크로소프트 엣지, 사파리, 삼성 브라우저를 비롯한 대부부의 최신 브라우저에서 사용이 가능하고, node.js는 7.6.0 이후 버전에서 별도 설정 없이 사용할 수 있다. IE 등의 옛날 브라우저에서 이용하기 위해서는 Babel 등의 자바스크립트 트랜스파일러를 사용하면 된다.

여기서 Bebel이란 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러를 말한다.

Async 함수는 await을 사용하며, promise가 완료될 때까지 함수를 정지시킨다.

seTimeout을 아무리 늘린다고 해도 await을 입력하게 되면, 그 즉시 대기상태에 머물게 된다.

여기서 고민! 비동기를 하기 위해서는 진동벨이 울려야 한다고 말을 했다. 그런데 await은 동기화적으로 코드가 실행이 된다. 아직 더 고민해야 할 문제 중 하나가 아닐까 싶다. 비동기를 동기처럼 ~

await은 말그대로 해당 promise가 이행대기에 들어가야 할지 거부상태에 들어가야 할지 자체를 모두 '평가'후에 그 값(이행할 값, 또는 거부된 이유)을 돌려주기 때문에 동기처리처럼 기다리게 됨
await 키워드는 평가되기를 기다린 후 이행할 값 또는 거부된 이유 자체를 돌려줌
await이 사용되지 않으면 그냥 promise상태