개발 공부하며 생각나거나 겪었던 이슈들과 참고할 내용들을 적어나갈 블로그 입니다.

런타임 환경

자바스크립트 런타임 환경 ( 엔진 이해, 스택개념 정리 )

자바스크립트는 싱글 쓰레드 언어

브라우저안에 여러 가지의 쓰레드가 들어 있기때문에 웹 APIs들을 이용하면 멀티쓰레딩이 가능

Memory Heap
- 데이터를 만들 때 저장되는 공간
- 구조적으로 정리된 자료구조가 아니라 아무곳에서나 저장되어져 있다.
Call Stack
- LIFO(last in first out) 쌓이는 구조
- 재귀 함수 : 함수안에서 함수 자기자신을 호출
  - 프로세스또는 스택 마다 지정된 콜 스택 사이즈가 있어서 콜 스택을 잘못 쓸 경우 지정된 최고 사이즈를 초과하여 에러발생 할 수 있음

브라우저 런타임 환경 이해 ( 큐 개념정리 )

Queue FIFO ( First In First Out ) => ex) add(), remove()

웹 API를 사용할때 콜백 함수를 등록 해 놓고,

원하는 이벤트가 발생하면 바로 웹 API는 태스크 큐에 우리가 등록한 콜백 함수를 큐 안으로 넣고,

이벤트 루프는 빙글빙글 돌면서 콜스택과 태스크 큐를 관찰하는 아이인데,

콜 스택이 비워져 있으면 태스크 큐에 있는 아이를 하나만 가지고 와서 콜스택에 넣어준다.

전체적인 흐름

자바스크립트 엔진에는 Heap 과 Call Stack 이 있다.

Call Stack 은 함수가 실행되는 과정을 기억하기 위해서 쓰이는 자료구조이다.

자바스크립트가 동작하는 런타임 환경에서는 태스크 큐 와 마이크로 태스크 큐 를 이용해서 asynchonous , 비동기 적인 처리를 하게 된다.

태스크 큐 는 한번에 하나씩만 Call Stack 으로 가지고 온다.

마이크로 태스크 큐 는 들어 있는 아이들과 새로 추가된 아이들까지 모두 다 수행할 때까지, 마이크로 태스크 큐 가 비어있게 될 때 까지 Call Stack 으로 가지고 온다.

Render 는 이벤트 루프 가 매 번은 아니되 주기적으로 브라우저에게 UI를 업데이트 하기 위해서

자주 자주 들러준다.

호출한 리퀘스트 애니메이션 프레임 콜백 큐 는 이 업데이트가 일어나기 전에 한번 쭉 순회하면서 코드가 실행이 된다.

리디아 할리의 시각화 움짤링크

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();