자바스크립트의 비동기 작업 처리방식

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 자바스크립트에서 비동기적 처리를 진행하는 과정, 방식에 대해서 제가 이해한 부분을 이야기 해 볼까 합니다.

* Phlilp Roberts의 What the heck is the event loop anyway? 영상을 참고 했습니다.

Phlilp Roberts : What the heck is the event loop anyway? | JSConf EU 2014

https://www.youtube.com/watch?v=8aGhZQkoFbQ

자바스크립트는 내부적으로 stack, webapis, task queue, event loop 를 가지고 있습니다.

stack 은 코드를 실행하는 작업장으로, 해당 작업은 스코프 단위로 수행합니다.

wepapis 는 비동기 작업을 stack으로 부터 넘겨받아 해당 코드를 실행합니다.

task queue는 wepapi가 완료한 작업을 저장하는 공간입니다. task queue에 저장된 task들은 해당 시점에서 stack이 비워지면 stack위에 올라가 실핼될 예정인 작업들입니다.

event loop는 stack 을 모니터하고 있다가 stack이 비워질 때마다 task queue에 있는 작업들을 stack으로 올리는 역할을 수행합니다.

그림으로 설명하면 다음과 같습니다.

1. stack에서 scope단위로 코드를 실행합니다.

2. 실행 도중 비동기 처리가 필요한 코드가 있으면 webapis로 넘기고 stack에서는 코드를 계속 실행합니다.

3. webapis는 넘겨받은 코드를 실행합니다.

4. webapis에서 코드의 실행이 끝나면 리턴값을 task queue로 넘깁니다.

5. task queue에서 대기합니다.

6. event loop는 stack이 비었는지 확인합니다.

7. 한 스코프의 실행이 끝나면,

8. event loop가 task queue에 있는 task들을 stack으로 올립니다.

9. 올라간 코드가 실행되고, 1과정으로 돌아가 반복.

제가 이해한 부분은 여기까지 입니다. 모쪼록 글을 읽는 분들께 도움이 됐길 바랍니다. 감사합니다.

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)