자바스크립트 (기초편)

 

자바스크립트 쌩기초를 벗어난 당신 대단해. 👏👏👏👏👏

자바스크립트를 알기 전에 알아야 할 몇가지가 있다.

 

기초 지식 👇👇👇

프로세스 (Process)

사용자가 작성한 프로그램이 메모리 공간을 할당 받아 실행 중인 프로그램 단위를 뜻한다.

프로세스는 프로그램에서 사용되는 데이터, 메모리 등의 자원 + 스레드로 구성 된다.

스레드 (Thread)

스레드란 실제로 작업을 수행하는 주체를 뜻한다.

모든 프로세스에는 한 개 이상의 스레드가 존재하며 수행한다.

한개의 스레드는 싱글 스레드, 두개 이상의 스레드를 가지는 프로세스를 멀티 스레드 프로세스라고 칭한다.

동기, 비동기

동기란 ‘동시에 일어나는’ / 비동기란 ‘동시에 일어나지 않는' 을 뜻한다.

 

동기적이란 뜻은 쉽게 표한하자면 이렇다.

나는 A사이트에 들어간다. 즉, A사이트 서버에 A사이트 화면을 내려달라고 요청한다는 뜻이다.

그럼 그 요청에 대한 응답(화면)이 나오지 않는 이상 아무것도 할 수가 없다.

이것이 동기다. 요청 - 응답이 동시에 일어난다. 응답을 주지 않으면 그 이후로 더 이상 진행할 수 없다.

 

비동기란 뜻은 아래와 같다.

나는 사이트에서 어떠한 요청을 API를 통해서 요청한다.

그리고 나서 그 답이 언제 오기를 기다리는게 아닌 다른 작업들을 처리한다. (UI렌더링이라든가..)

꼭 답이 바로 와야 한다는 것이 아니라는거다.

 

그런데 나는 처음 이런 생각을 했다. 비동기도 답이 와야 하는거 아닌가?

API 요청하면 응답에 따라서 다음을 처리했는데 ?

틀렸다. 그 전체를 비동기라고 하는 것이 아니다. 그건 비동기 처리 후 코드의 실행 순서를 제대로 맞추기 위해 응답에 따른 콜백 함수처리를 따로 한 것이다. 비동기를 처리하는 방식인 것이다.

 

 

스텍(Stack), 큐(Queue)

자료구조에 나오는 ... 하 지난 날이여..

큐와 스텍은 자료구조를 뜻한다. 이벤트를 처리하는 하나의 방식같은거다.

 

스텍 (Stack)

스택은 옆의 이미지와 같이 책을 쌓는 방식이라고 생각하면 된다.

책을 쌓고 쌓고 쌓은 다음, 마지막에 쌓은 책부터 꺼낼 수 있는걸 뜻한다.

후입선출(Last In First Out)방식을 뜻한다.

 

활용한 예로는

웹 브라우저 뒤로 가기 (History.back)을 생각하면 된다.

쌓인 히스토리에서 뒤로가기 버튼을 눌러 이동시 쌓인 마지막의 페이지로 이동한다.

 

 

 

 

 

 

큐 (Queue)

큐는 선입선출(First in First Out) 방식으로

앞뒤가 뚫린 파이프에 이벤트를 하나씩 쌓고 처음 넣은 것 부터 쌓은 반대 방향에서 빼내는 방식이다.

 

활용한 예로는

우선순위가 같은 작업을 예약시 먼저 선언된 순서대로 작업이 진행되는 것을 생각하면 된다.

 

 

 

 

 

 

 

 

Do you know JavaScript?

자바스크립트는 싱글 스레드 언어이다. 정확히는 이벤트 루프가 싱글 스레드인 언어이다.

작업을 수행하는 주체가 한번에 하나의 일만 한다는 뜻이다.

그런데 싱글스레드 임에도 불구하고 여러 요청과 응답을 동시다발적으로 진행 할 수 있다.

왜 그럴까?

 

브라우저 환경 구조 및 자바스크립트 동작 방식

위의 이미지는 자바스크립트의 동작과정과 브라우저 환경 구조를 담은 대표적인 이미지이다.

자바스크립트 엔진은 힙 메모리와 하나의 콜 스택으로 구성되어 있다.

 

힙 메모리 (Heap)

동적으로 변하는 값들을 참조하는 참조값을 가지고 있다. 변수값의 넘버링 같은거랄까. (이건 또 파고들어가야해서..)

콜 스택 (Call Stack)

함수를 호출하면 실행 컨텍스트가 생성되고, 이런 실행 컨텍스트가 콜 스택을 구성한다. 콜 스택은 실행되게 될 이벤트 모음 같은거다.

 

 

가장 큰 역할을 하는 이벤트 루프 👇🏻

콜 스택이 비어 있으면 테스크 큐에서 하나씩 꺼내서 동작시키는 Loop 🔁를 말한다.

 

이벤트 루프는 여러 스레드가 사용되는 구동 환경(브라우저, NodeJS..)에서 자바스크립트 엔진과 연동하기 위해 사용된다.

 

독립적으로 실행되는 것은 아니고 웹 브라우저나 NodeJS가 같이 있는 멀티 쓰레드 환경에서 실행된다.

 

 

자바스크립트에서는 이벤트 루프가 메인 스레드가 되는 것이다.

이 메인 스레드는 어떤 일을 하냐면 ...

1. 코드를 실행
2. 이벤트를 받고 실행
3. 웹 컨텐츠 렌더링이나 페인팅

이러한 것들을 하면서 총제적으로 스케쥴링하고 실행시키는 역할을 하는 것이다.

 

 

 

WebAPIs

브라우저 또는 NodeJS에서 비동기 함수가 동작되게 지원하는 API들을 뜻한다.

 

 

테스크 큐 (Tesk Queue = Callback Queue)

테스트의 Set(=중복되지 않는 배열)을 뜻한다. 다른 이름으로는 콜백 큐라고도 한다.

콜 스택이 비어 있으면 이벤트 루프가 테스크 큐에서 쌓인 테스크를 순서대로 가져간다.

여기서 테스크 큐는 마이크로 테스크 큐(Event Queue)와 매크로 테스크 큐(Job Queue)로 나뉜다.

 

그렇다면 어떤게 마이크로 테스크고 어떤게 매크로인가가 궁금할 수 있을텐데..

WebAPIs에 따라서 마이크로 테스크 큐를 사용하거나, 매크로 테스크 큐를 사용하는지 정해진다.

 

아래의 종류들이 매크로, 마이크로 로 나뉘는 종류이다.

매크로 테스크 큐 : requestAnimationFrame, I/O, UI rendering, setTimeout, setInterval, setImmediate 
마이크로 테스크 큐 : process.nextTick, Promises, queueMicrotask(f), MutationObserver

마이크로 테스크 큐 (=Event Queue)

마이크로 테스크 큐는 한번 실행이 시작되면 큐가 빌 때까지 계속해서 실행된다.

그 실행 과정 중 마이크로 테스크는 그 안에서 마이크로 테스크를 만들어내는 경우도 있다.

그럼 그게 큐에 적재되고 그거까지 모두 실행되어야 한다.

작은 콜백함수 모음이 마이크로 테스크 큐 인데 빌 때까지 실행된다는 것이 이 큐의 포인트이다.

매크로 테스크 큐 (=Job Queue)

매크로 테스크 큐는 실행 시점에서 있는 테스크만을 실행시킨다.

만약 태스크 실행 중에 새로 만들어진 매크로 테스크가 있다면 그건 다음 실행 시점에 실행된다.

 

 

 

위의 환경 구조와 뜻을 알았으니 우리는 이것들을 조합해서 자바스크립트가 구동되는 동작원리를 배울 것이다.

동작원리, 바로 이거야!

1. 매크로 테스크 큐의 테스크들이 순서대로 콜스택으로 이동 후 실행 (실행 시점의 매크로 테스크 큐의 모든 테스크)
2. 콜 스택이 비워졌다면 마이크로 테스크 큐의 테스크 순서대로 실행 (마이크로 테스크 큐가 비워질때까지 반복)
3. 렌더링 실행
4. 매크로 테스크 큐에 새로운 테스크가 나타날 때까지 대기
5. 1번부터 반복

이게 동작 원리이다. 사실 이렇게 말하면 이해가 잘 안갈텐데..

좀 더 자세한 예시를 통해 설명해보겠다.

 

setTimeout(function() {
	console.log('setTimeout');
}, 0);

Promise.resolve()
	.then(function() {
		console.log('promise1');
	})
	.them(function() {
		console.log('promise2');
	});

자바스크립트로 위의 코드를 만들어 실행시키는 것을 가정하여 그 과정을 설명해본다.

 

1. 콜스택에는 전역 실행 객체가 있다. ‘스크립트 실행' 이라는 테스크가 매크로 테스크 큐에 들어간다.
2. 이벤트 루프는 매크로 테스크 큐에 있는 ‘스크립트 실행' 테스크를 실행한다.
3. 스크립트가 실행되면서 setTimeout() 함수에 도달한다. 이후 setTimeout web API가 타이머를 실행시키고 종료되면서 콜백 함수를 매크로 테스크 큐로 들어간다.
4. Promise에 도달하면 첫번째 콜백은 마이크로 테스크 큐에 들어간다.
5. 콜 스택이 비어있으므로 이벤트 루프는 마이크로 테스크 큐의 4번의 테스크를 콜 스택에서 실행시킨다.
6. 5번이 실행되는 과정에서 Promise의 두번째 콜백이 마이크로 테스크 큐에 들어간다.
7. 마이크로 테스크 큐에 6번이 적재되었으니 다시 콜 스택으로 이동시켜 실행시킨다. (마이크로 테스크 큐가 빌 때까지 반복)
8. 마이크로 테스크 큐가 비었고 콜 스택도 비어졌으니, 매크로 테스크 큐의 3번의 setTimeout 콜백 테스크가 콜 스택으로 이동 후 실행된다.

이런식으로 자바스크립트는 동작을 하고 있던 것이였다. (아 후련해)

 

 

 

 

 

 

 

여기까지가 기초가 아닌듯 기초편이였다. 🙌🏻

여기까지 이해한 당신 아주 칭찬해 👏🏻👏🏻👏🏻👏🏻👏🏻