node.jsreact.jsvue.jsnext.js등.. 프론트엔드, 백엔드 분야를 막론하고 다양한 환경에서 자바스크립트를 기반으로 하는 라이브러리나 프레임워크가 다양해졌다. 또한 최신 트렌드에서도 살펴볼 수 있듯이 자바스크립트의 생태계는 날이 갈수록 강력해지고 있고 본인도 다양한 라이브러리나 프레임워크를 사용했었다. 근데 정작 어떻게 동작하는지에 대해서 설명도 안되고, 코어개념도 정확히 이해를 하지 않고 사용하고 있어서 스터디한 내용을 공유하고자 한다.
자바스크립트 ?
자바스크립트는 싱글 쓰레드 기반의 인터프리터 언어이다. 따라서 코드는 한줄씩 실행된다.
쓰레드(thread)란 프로세스(운영체제로부터 자원을 제공받은 프로그램) 내부의 제공받은 자원을 사용하는 실행의 단위를 의미한다.
2개이상의 쓰레드를 보유한 프로세스를 멀티 프로세스라고 한다
실행환경
컴파일러가 따로 존재하지 않고, 자바스크립트는 실행해줄 수 있는 자바스크립트 엔진이 필요하다. 브라우저에서 실행될 수 있는 이유는 각 브라우저 내부에 자바스크립트 엔진이 내장되어있기때문이다.
- Chrome - V8
- Safari - Webkit
- IE / Edge - Chakra
- Firefox - SpiderMonkey
또한 우리가 서버를 구성할 때 사용하는 node.js또한 자바스크립트를 실행시켜주는 런타임 환경이다. 자바스크립트가 브라우저외에서도 동작할 수 있게 해준다.
구조
자바스크립트 엔진은 하나의 콜 스택과 메모리 힙을 갖고 있다. 콜 스택이 하나기 때문에 한 줄씩 실행 될 수 밖에 없는 환경이다.
이 말은 곧 하나의 작업을 실행할 수 밖에 없고 따른 일을 하려면 먼저 들어온 일을 처리해야된다는 말이다. (동기식 언어)
그런데 우리는 코드를 짜다보면, 비동기적으로 처리하는 작업이 많다. 예를 들어 화면에서 여러 데이터를 받아와야할 경우가 있다.
이럴 때 서버에서 전송 받은 어떤 결괏값에 의해 다음 로직이 진행되어야 할 때는 동기식으로 처리하는게 옳지만, 상관 없는 데이터들을 동기식으로 처리한다면 화면을 띄우는데 너무 오래걸릴 것이다. 이럴 때 비동기 처리가 되어야 하는데 ajax, 파일 읽기, setTimeout 등이 있다.
그렇다면 비동기 처리는 이런 싱글 쓰레드 기반의 환경에서 어떻게 동작이 가능할까?
- Call Stack
콜 스택은 메모리에 존재하는 공간 중 하나로 코드를 읽어 내려가면서, 수행할 작업들을 하나씩 쌓는 스택형태의 공간이다.
또한 실행 컨텍스트와 원시 타입(string, number, boolean, null, undefined, symbol)의 데이터는 저장이 가능하다.- Memory Heap
메모리힙은 참조 객체(array, object, function)의 값이 저장되는 공간이다. 콜 스택에서 코드를 읽어 내려가다, 참조 형태의 변수를 만나게 되면 메모리 주소에 해당 값을 넣어놓고 링크한다.
비동기 처리가 어떻게 가능한가
원래는 멀티 쓰레드 기반이여야 비동기가 가능하다 왜냐면 한 쓰레드가 작업이 오래걸리는 일을 실행할 때 다른 쓰레드가 다른일을 할 수 있기 때문이다.
근데 비동기처리가 가능한 이유는 브라우저에는 Web API(node.js에서는 Libnuv)라는 비동기로 처리할 수 있는 공간이 따로 있기 때문이다.
자바스크립트 콜 스택에서 코드를 한 줄 한 줄 실행하다가 비동기로 처리해야하는 코드를 마주치면 해당 코드는 Web API 공간에 분류가된다.
Web API에 보내진 비동기 코드들은 각각 처리가 되고 콜백상태 때 실행이 되는데, 처리된 작업들은 task queue로 이동된다.
태스크 큐는 FIFO 형식이다. 태스크 큐에 들어온 콜백 코드들은 이제 다시 콜 스택으로 이동되어야 한다.
콜 스택으로 이동될 때는 콜 스택에 실행할 코드가 없을 때 순차적으로 이동되게된다.
이렇게 콜 스택과 태스크큐의 상태를 계속해서 확인해서 콜 스택이 비었을 때 태스크 큐에서 꺼내 이동시켜주는 장치를 event loop라고 한다.
또한 이러한 반복적인 동작을 tick이라고 한다.
태스크 큐에 담길 태스크는 2가지 종류이다. Macro Task와 Micro Task가 있고 각각 어떤 함수의 콜백이냐에 따라 달라지게 된다.
그리고 해당하는 태스크 큐에 담기게 된다.
- Macro Task Queue
setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI Rendering- Micro Task Queue
process.nextTick, Promise, Object.observe, MutationObserver
TIL
오늘은 자바스크립트가 실행되는 환경에 대해서 그리고 핵심인 비동기 동작이 어떻게 가능한가에 대해서 공부를 하고 작성을 했다.
사실 자바스크립트는 비동기처리가 불가능한 언어이다.
Web API나 Libuv같은 비동기 라이브러리가 처리를 대신해주고 이벤트 루프를 통한 순환 덕분에 가능한 작업이다.
되게 중요한 개념이다 👍
