1. 프로세스와 쓰레드

이번엔 자바스크립트가 브라우저라는 공간에서 작동할때 어떤 일이 실제로 ‘뒤’ 에서 발생하는지 알아보고자 한다. 따라서 자바스크립트라는 언어의 동작원리를 좀더 구체적으로 이해함으로써 효율적인 코드작성이 가능할것이다. 그전에 프로세스와 쓰레드 부터 알아보자. 그림으로 나타내면 이렇게 나타낼 수 있다.

운영체제(윈도우) 안에서 여러가지 프로세스(vs code, chrome, itunes..) 가 작동한다. 이 프로세스는 각각 독립적으로 활동하기에 하나가 죽어도 다른 프로세스는 여전히 동작한다. 그리고 프로세스안에 기능을 구현하기 위한 여러가지 것들이 들어있다. heap 안에는 동적변수 data에는 전역변수, static 변수가 저장되어있다. 누가 쉽게 비유를 들어서 나도 그 비유를 가지고 설명하려고 한다.

Operation system > 공장

Process > 생산라인

Thread > 일꾼

한 공장 내에서 다양한 것들을 생산하는 라인이 작동한다.

일꾼이 1명뿐인 라인은 그 일꾼이 A라는 일도 하고, B라는 일도 해야할 때 A를 끝내고 나서야 B를 할 수 있다.

일꾼이 2명이 되면, 한 일꾼은 A를 하고 다른 일꾼은 B를 동시에 할 수 있다.

각 일꾼은 자기가 해야 하는 일의 순서를 기억하고 있다.

단, 일꾼이 같은 공구(공유 리소스)를 사용할 때 한 사람이 쓰고 제자리에 가져다 놓지 않는다거나 하는 문제가 발생할 수 있다.

(멀티쓰레딩 - 한 프로세스안에서 여러가지 쓰레드가 동시다발적으로 일어나는 현상)

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

자바스크립트가 실제 실행되는 런타임 환경에서 콜스택을 보면 코드상에서 실행된 순서대로 콜스택에 쌓이게 된다. 만약 재귀함수(자기 자신을 불러오는 함수) 콜스택에서는 먼저들어온 아이가 나중에 끝나가 됨(LIFO - Last In Last Out)

태스크 큐라는 것도 있다. 바로 web api에서 실행한 task가 저장되는 곳, 자료구조이다. 예를 들어, setTimeout web api를 실행할때 setTimeout에 있는 콜백함수는 태스크 큐에 저장되고, 콜스택에 있는 작업이 모두 끝나면 테스크 큐에 있는setTimeout콜백이콜스택으로 옮겨지면서 한번에 하나씩 실행이 된다.

이렇게 콜스택과 테스크 큐를 서로 왔다갔다 하면서 관찰하고 순서대로 일이 진행되도록 하는 아이가 event loop이라는 것이다.

더 자세한 내용은 runtime loupe 영상을 보면 된다. event loop라는 것은 다음글에서 설명하도록 하겠다.