비동기 : 마이크로태스크 큐 메크로테스크 큐

비동기는 동시의 문제가 아닌, 순서의 문제이다.

한번 비동기는 영원한 비동기

비동기란 간단히 말해 실행됐는데, 결과값을 나중에 쓸 수 있는 것이다.
비동기를 처리시, 콜스택에 비동기 함수가 들어온다면 콜스택은 즉시 background(자바스크립트 엔진, OS를 통합한 개념) 로 보낸다. (여기서 백그라운드는 자바스크립트 엔진, OS를 통합한 개념으로, 자바스크립트로 구현되지 않았다. 이는 싱글 스레드가 아니라는 의미로, 동시(물론 컴퓨터에서 동시란 없지만 거의 흡사하다고 치자.) 실행이 가능.)

사진 출처 : https://codingsalon.tistory.com/59

+ 갑자기 궁금한 왜 자바스크립트는 싱글 스레드를 선택했을까? 의문에 대한 답변 포스트 (https://miracleground.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%99%9C-%EC%8B%B1%EA%B8%80-%EC%8A%A4%EB%A0%88%EB%93%9C%EB%A5%BC-%EC%84%A0%ED%83%9D%ED%96%88%EC%9D%84%EA%B9%8C-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4-%EC%8A%A4%EB%A0%88%EB%93%9C-%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%8F%99%EA%B8%B0-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A3%A8%ED%94%84)

요약하자면, 웹 브라우저 보조 언어로 개발되어 멀티 스레드에서 발생하는 여러 문제점들을 고민하지 않게 하기 위해 자바스크립트 고안.

아래는 간단한예시이다.

function myFunc1() {
  setTimeout(() => {
    console.log("time");
  }, 0);
  myFunc2();
  Promise.resolve().then(() => {
    console.log("promise");
  });
  console.log("func1");
}

function myFunc2() {
  console.log("func2");
}

myFunc1();

func2 -> func1 -> promise -> time

결론 부터 말하자면, 그 이유는 먼저 콜스택을 비우고 태스크큐를 실행하기 때문이다.
콜스택을 비우는 과정에서 func2 -> func1
이 찍히고,
그 다음 태스크 큐를 실행. 헌데 마이크로 태스크 큐는 매크로 태스크 큐에 비해 우선순위가 높다
여기서 마이크로 큐에는 promise와 process.nextTick등이 들어간다.

정확히는 promise.resolve()는 동기이고, then부분 부터 비동기!
그리고 만약 animation frames가 있다면 순서는 마이크로 테스크 큐 animation frames 메크로 테스크 큐 !!


후에 기억안날 때 참고하면 좋을 포스팅 : https://velog.io/@yejineee/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84%EC%99%80-%ED%83%9C%EC%8A%A4%ED%81%AC-%ED%81%90-%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C-%ED%83%9C%EC%8A%A4%ED%81%AC-%EB%A7%A4%ED%81%AC%EB%A1%9C-%ED%83%9C%EC%8A%A4%ED%81%AC-g6f0joxx