콜스택(Call Stack)과 태스크큐(task Queue)

call stack

나중에 들어간게 먼저 나옴(LIFO : Last In First Out)

함수가 어떤순서대로 작성하게 되었는지..

 

콜스택을 잘못쓰면 '재귀함수'가 너무 과하게 쓰일 수 있다.

(재귀함수:함수안에서 자기안에서 자기를 계속 부르는 것)

 

task queue

먼저 들어간게 먼저 나옴(FIFO : First In First Out)

 

이벤트 루프는 콜스텍에 일이 있으면 일이 멈출때까지 기다린 이후 다른 일을 실행한다.

콜스택에 들어있는 함수가 끝나고 콜스택이 텅텅 비어 자바스크립트 엔진이 일을 안할 때 이벤트 루프에 있는 아이를 콜스택으로 데리고 온다 

그러면 자바스크립트 엔진이 콜스택에 들어온 함수를 실행하게 된다.

 

이벤트 루프는 프로세스가 동작하는 동안 빙글빙글 돈 다음, 콜스택이 있다면 테스크 큐에 들어있는 아이를 콜스택에 가져와 자바스크립트 엔진이 수행할 수 있도록 도와줌

 

이벤트 루프는 콜스택이 비어있지 않기 때문에 기다렸다가 콜백이 수행되면 이벤트 루프에 있는 테스크 큐에 있는 것을 콜스택에 가져옴

콜백이 끝나면 테스크 큐에 있는 것을 다시 가져온다 

이벤트 루프에서 돌고 있는 테스크큐에 있는 함수를 콜스택에 넣어 수행한다 수행이 끝나면 다시 테스크큐에 있는 아이를 콜스택에 가져온다.

 

 

자바스크립트 런타임 환경

태스크 큐(Task Queue)

웹 APIs에서 지정된 이벤트가 발생되었을때 태스크 큐에 넣음, 한번에 한가지만 가져옴

 

마이크로태스크 큐(Microtask Queue)

우리가 흔히 쓰는 프로미스에 등록된 콜백, 즉 프로미스가 다 수행이 되고 나면 그 다음에 등록된 콜백이 마이크로 테스크 큐에 들어옴

들어있는 아이들을 모두 다 수행할때까지 가지고 옴

 

랜더(Render)

주기적으로 업데이트 해야할 때 화면에 업데이트 해줌

브라우저에서 우리가 변형한 코드가 주기적으로 업데이트되기 위해서 주기적으로 업데이트 되는 순서

주기적으로 브라우저에게 ui를 업데이트하기위해 자주자주 들러준다