비동기는 동시가 아니다. 순서의 문제다.

 

 

1. 비동기란 무엇이냐?

한 번 비동기는 영원한 비동기이다. async, await을 붙여 동기로 만들었다는 말은 말도 안된다는 소리다.

강사님은 말한다. 비동기를 동기로 바꾸려는 노력을 아예~ 하지마세요. 그간 했던 프로젝트가 떠오른다...

 

 

2. 비동기는 백그라운드를 거친다.

비동기이면 백그라운드를 한 번 거친다. 백그라운드는 OS 혹은 C++ 엔진 이라고 생각하면 된다.

호출 스택에서 비동기 함수가 실행되면 백그라운드에 들어간다.

백그라운드에 들어가는 순간 JavaScripts에서는 되지 않던 동시 실행이 가능해지는 영역이라고 생각하면 된다.

 

• 백그라운드에 들어가는 요소들
• setTimeout(비동기 함수)의 타이머
• Promise
• nextTick
• 네트워크 요청(ajax)
• 이벤트 리스너(click 등)

 

 

3. Task Queue와 이벤트 루프

백그라운드에 쌓인 녀석들은 특정 조건이 만족되면 테스크 큐(매크로 테스크 큐 / 마이크로 테스트 큐)에 쌓인다.

ex) setTimeput은 초가 조건

 

큐는 처음 들어왔던 요소가 처음 나가는 FIFO 구조이다.

FIFO 구조대로 테스크 큐에 쌓인 요소들을 이벤트 루프가 다시 호출 스택으로 하나씩 올려주게 된다.

호출 스택이 비어있을 때 올려준다.

 

 

4. Macro Task Queue와 micro Task Queue

Task Queue에는 2가지 종류의 Queue가 있다.

바로 Mecro Task Queue와 micro Task Queue이다.

 

이 때 마이크로 테스크 큐에는 다음의 비동기 함수가 들어간다.

• Promise
• process.nextTick

이 외 나머지 비동기 함수들은 매크로 테스크 큐에 들어간다.

 

매크로보다 마이크로가 더 먼저 실행된다. 즉, 마이크로의 우선순위가 더 높다.

이런 이유로 만약 마이크로 테스크 큐가 꽉 차있으면 영원히 매크로 테스크 큐는 실행이 안 되게 된다.

 

 

Tip!

비동기로 들어간 변수를 쓰고 싶다면 그 비동기 함수 안으로 들어가서 로직을 작성해야 한다.

절대 밖에서 비동기 안의 변수나 데이터를 얻으려고 노력하지마라!

한 번 비동기는 영원한 비동기니까!!!

 

그래서 콜백헬이 나오는 것이다.

비동기 안에 또 비동기 쓰고 싶으면 depth가 계속 들어가게 되기 때문이다.

이걸 해결하고자 나온 것이 Promise이다. 물론 Promise도 Promise hell( 강사님이 만든 용어 )가 있다 ^^