[js] 자바스크립트 동작원리(비동기처리)

자바스크립트 엔진이 자바스크립트로 구성되는 프로그래밍의 심장이다!

 

웹, window, os 모두 일맥상통하니 자바스크립트를 겁나 파보자.. 

 

 

 

 

자꾸 헷갈리는데 꼭 짚고 넘어가자

 

 

동기: 끝날때까지 기다렸다 순차적으로~~

비동기: 응답상태 기다릴 필요없이 다음!

 

 

자바스크립트는 동기적 언어이다 기본적으로! (===single thread)

 

 

등의 비동기적으로 처리해야하는 경우가 많으므로 이때, 비동기 콜백 을 사용해야하는데

 

 

어떻게 작동되는걸까?

 

 

이를 이해하기 위해서

 

JS Engine

webapi

event-roop

 

를 알아보자

 

 

1. JS Engine

ex) 크롬과 nodejs에서 사용하는 대표적인 JS Engine으로 v8이 있다

 

자바스크립트 엔진은 크게 memory heap과 call stack으로 이루어져 있다. 

memory heap: 데이터를 임시 저장하는 곳. 함수, 변수등 관리

call stack: 코드 내부의 실행 순서를 기록해서 순차적으로 진행할수 있도록 하는 곳

 

stack 이기 때문에 중간에 오래걸리는 녀석이 생기면 음청 기다려야해

 

 

 

이런 점을 해결하기위해 web API 와 callback que, event loop등을 사용!

 

 

 

 

 

 

 

 

callback function은 함수가 선결되어야 하는 일이 끝난뒤, 후속으로 하는일을 알려주는 함수

ex) setTimeout(function(){ A }, 1000) 이라면

 

setTimeout함수는 callback function중 하나(만들어져있는..!)

첫번째 인자로 후속적인 일인 A와, 두번째 인자로 기다릴 시간을 받는 함수

 

setTimeout함수 외에도 ajax 등 자바스크립트를 사용하기 위해선 반드시 알아둬야하는 개념임!

 

 

webAPI

오래걸리는 작업을 대신해줌 

: 브라우저 안에서 C++ 로 구현된 쓰레드로 비동기 이벤트를 처리. (자바스크립트의 일을 덜어줌..!)

 

=> 이때 이벤트를 처리하고 다음에 자바스크립트에게 넘길 일들을 저장하고 있는 보관소가 큐방식 callback queue

 

 

 

 

이때 자바스크립트의 call stack이 비어있는지를 주기적으로 확인하여 web api의 callback que에서 callback function을 가져와 call stack에 코드가 실행될수 있도록 돕는 역할이 event loop

 

싱글스레드인 자바스크립트 엔진과 / 일을 나눠서 실행해줄 브라우저 WEB API가 / 상호작용 소통하면서 비동기처리를 시의적절? 하게 할수 있게하는 거시 event loop 이렇게 이해하면 될까? 

 

 

=> 사실 비동기처리처럼 보이게 하는 것!

1. 엔진이 스크립트 소스를 읽고 callback queue에 쌓아둔다 

2. 이벤트 루프가 계속해서 callstack이 비었는지 확인해 가며 다음 할일들을 stack(동기적으로실행될수 있는 순서를 정해서)에 쌓는다

1,2는 계속해서 일어나고 

3. web api는 렌더링이 되는 화면이라고 생각하면 된다. callstack에서 동기적으로 순서가 정해진 함수들을 실행해서 web api에 마지막으로 그리게된다.

 

 

---

+ ??

queue와 stack의 구조가 single thread, multi- 로 쓰일수 있는 원리를 생각해보자..

 

---

 

 

 

event loop YOUTUBE:::

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

 

v8 코드를 직접 열어보면 우리가 알고있는 비동기관련 callback 함수 같은 것들은 찾아볼수 없다.