20.12.22 Asynchronous&Promise

Asynchronous&Promise파트는 비동기&동기에 관한 개념과 그것을 구현하는 것을 배웠다.

출처: PoiemaWeb

위의 그림은 동기&비동기를 쉽게 구분하기위해 커피숍에서 주문을 하는 상황을 그린 것이다.
동기는 하나의 주문이 실행되고 그것이 끝날때까지는 다음 주문을 받지 못한다.
비동기는 그와 다르게 진동벨을 가지고 다른 곳에서 할 일을 하고 있다가 벨이 울리면 가져가면 된다.

Why Asynch?

비동기는 위의 그림처럼 서버가 요청을 처리할 동안 다른 일 처리를 할 수 있다.

밑에 그림을 보면 동기는 각각의 일이 끝나는 시점에 다음 일을 처리하고, 비동기는 한꺼번에 진행이 되기 때문에 시간적 요소에도 강점이 있다.

Callback?

흔히 알고 있는 callback이란 '함수를 인자로 호출하는 것'이다.

비동기에서 원하는 기능을 순차적으로 실행되게끔 만들기 위해 첫번째가 실행되면서 두번째가 실행되고, 그 다음이 실행되게끔 만들기 위해 Callback이라는 개념을 잘 인지하고 구현해야한다.

그런데 이렇게 Callback을 자주 실행하다보면 다음과 같은 상황이 벌어진다.
출처:코드스테이츠

연속된 들여쓰기로 인해 코드 가독성도 떨어지고, 디버깅이 쉽지 않게 된다.

그래서 사람들은 "우리 그냥 이렇게 쓰면 안될까?" 하면서 약속을 하게 되는데,

Promise?

출처:코드스테이츠

위의 이미지는 그냥 Callback함수와는 달리 Promise로 구성한 것이다.

Promise는 함수의 인자로 Callback을 넣어주지 않는다.
다만 새로운 인스턴스(Promise)를 리턴하고 그 인자로 resolve와 reject라는 Promise만의 콜백을 받는다.

위에서 보면 .then이라는 메소드가 있는데, '이게(앞) 끝나면 ~을 실행해줘' 라는 메소드이다.

이렇게 구성하면 윗윗 그림에 있는 Callback Hell을 벗어날 수 있다.

async await

async await는 최근에 나온 문법으로 Promise보다 훨씬 더 간결하게 사용할 수 있다.
출처:코드스테이츠

위의 이미지를 보면 윗단은 Promise와 같은데 아랫부분에 .then이 안보인다.
다만 result, one, two, three, four에 각각 async와 await를 담아서 일반 함수처럼 사용한다.

다음은 Asynchronous&Promise 에서 파생된 개념정리이다.

1. 실제적으로 비동기가 어디에 쓰일까?

물론 비동기는 아주 널~리 쓰인다. 이번엔 세 가지를 알아보자.

1)시간의 흐름에 따른 애니메이션 따위의 작업을 할때

• 사용되는 Method : setTimeout, setInterval, requestAnimationFrame 등등
  (여기서 requestAnimationFrame는 Front end 개발자가 세련된 애니메이션을 웹에서 구현할 때 사용되니 꼭 공부하자.)

2)파일 I/O(input/output)

• 사용되는 Method : (node.js)fs.readFile, fs.writeFile 등등

3)네트워크 요청

• 사용되는 Method : (browser)fetch (http), (node.js) http 모듈, 데이터베이스 접근 등등

2. Blocking & Non-Blocking?

JavaScript에서는 Blocking & Non-Blocking = 동기 & 비동기 라고 볼 수 있다.
Blocking은 마냥 대기해야 하는 상황을 뜻한다.
(참고로, Alert은 Blocking. 그래서 웹에서는 잘 안쓰인다.)
Non-Blocking은 백그라운드에서 실행이 가능한 것을 뜻함.

사람들은 Blocking한 상황을 몹시 싫어한다. 특히, 한국인은!
이럴 땐 로딩 이미지를 넣어서 그들의 마음을 치유해주자!

이 기사를 보면 우리나라 사람들 늦는 거 싫어한다는 것을 잘 알 수 있다.

3.중첩된 callback이 발생하는 사례는 무엇이 있을까?

파일을 업로드한다고 했을 때를 생각할 수 있다.

웹에 파일을 업로드한다고 했을 때 다음의 세가지를 실행한다고 해보자.

1)파일 입출력

2)입출력 되는 동안 타임라인 애니메이션

3)네트워크 요청

이것을 코드로 작성해보면 이런 느낌이지 않을까?

importFile(result => {
	doAnimation(progress => {
    	uploadFile(result => { 
        
        })
    })
})

4.Promise chaning & Promise All?

둘다 비동기를 구현하기 위해 쓰는 Promise에 대한 형태라고 생각하면 좋다.

차이점
Promise chaning : 순차적인 실행을 위해
Promise All : 한꺼번에 실행하기 위해

둘 다 상황에 맞게 쓰면 되겠다.

5.Promise의 세가지 상태

- 출처

1)대기(Pending)

2)이행(Fulfilled)

3)거부(reject)

꼭 알아놓자.