Javascript - DeepDive(6) : CallStack

흥미로운 사실!!

• 이 포스팅은 자바스크립트 개발자라면 알아야 할 필수 개념 리포지토리를 번역한것이다.

깃허브주소

들어가기전

웹 개발자들은 브라우저 내에서 상호작용하는 액션, 이벤트, 3D 모델의 조작, 크로스 플랫폼 모바일 어플리케이션(PWA...) 등 자바스크립트를 통해서 구현한다.
과거 IE 가 주로 사용 될때, 혁신적으로 편리했던 JQuery 가 역사속으로 점차 사라져가면서 자바스크립트가 더 주목받고 있다.

그러나 자바스크립트는 점점 복잡해지고, 기능은 추가되고, 알아야 할 것이 너무 많아지고 있다. 현대적인 모바일 웹앱을 만드는데 알아야 할 것이 너~무 많다. Webpack, Babel, ESLint, Mocha, Karma, Grunt, Typescrit, Frameworks...(React, Vue, Angular...), Nuxt, Next, ......js

위 모든것에 기초에는 자바스크립트가 있다는 것을 절대 안된다고 생각한다. 현재까지도 V8 엔진의 역할, 웹 브라우저의 역할, 위에 늘어놓은 여러가지 용어들에 한번쯤 들어봤고, 가볍게는 설명할 수 있으나 전문적으로 들어가면 정말 대답하기 곤란한 것들이 많다. 이 포스팅을 통해 앞으로 회사에서 진행하는 웹앱 프로그래밍에 좀 더 전문적으로 다가가는데 도움이 되고, 향후 이직과정에도 도움이 될 수 있었으면 좋겟다. 여기까지 잡소리 그만하고 자바스크립트 동작과정에 대해 자세히 적어보겠다.

콜스택이란?

함수의 호출을 기록하고 저장하는 자료구조라고 생각하면 된다. 스택은 기본적으로 LIFO(Last In, First Out) 구조라고 배웠을 것이다. 마찬가지로 호출된 함수는 가장 마지막에 선언된 함수가 먼저 종료되는 방식이다.
우리가 함수를 호출하면 해당 함수 프로퍼티는 콜스텍에 Push 되고, 역할을 완료하면 Pop 된다.

가끔 우리는 함수를 재귀적으로 부르다가 무한 루프에 빠지게 된다. 이런 경우 RangeError: Maximum call stack size exceeded 라는 에러가 발생할 것이다. 간단한 개념이므로 이 정도만 하고 넘어가겠다.

힙

오브젝트(객체) 들은 힙 내부에 할당된다. 힙은 거의 구조화 되지 않은 영역의 메모리이다. 변수와 객체들의 모든 메모리 할당은 여기에서 일어나게 된다.

큐

자바스크립트 런타임에서는 메시지 큐라는 것을 같고 있다. 스택과 대비되는 큐 주고는 FIFO(First In, First Out) 의 구조라고 배웠을 것이다. 스택이 충분한 공간을 가지고 있을 떄, 메시지는 큐 밖으로 나와서 메시지가 가지고 있던 함수 목록들이 실행된다. 이렇게 초기 스택 프레임이 만들어진다. 스택이 다시 빌때 메시지 수행도 끝이난다.
런타임 과정에서 이벤트들에 대한 콜백 함수가 제공된다면, 이 메시지들은 외부 비동기 이벤트들에 대한 응답으로 큐에 쌓일 것이다.

비동기란?

비동기란 요청한 그자리에서 결과를 리턴하는 것이 아니다. 실제로 Non Blocking I/O 와 같이 사용되어 진정한 Async 를 이룰 수 있다고 할 수 있다. 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 되고, 그 시스템이 사이에 다른 작업을 진행할 수 있게 해준다.

이벤트 루프 정리

자바스크립트는 1개의 스레드로 동작한다. 즉 1개의 Call Stack 을 가지고 있다. 스택이 1개만 있기 때문에 1번에 1개의 작업만 실행할 수 있고, 제어권은 단 1개이다. 이러한 특성을 효율적으로 사용하기 위해서 위에서 설명한 Async 를 가능하게 해줄 수 있다.

순서는 아래와 같다.

1. 인터플리터가 비동기 함수를 만나면, 즉시 Call Stack에서 지운다.

2. 이 비동기함수는 Web API 로 넘어간다.

3. 비동기 함수는 Web API 에 담겨있다가 요청한 시간이 지나면 Callback Queue(메시지큐) 에 쌓이게 된다.

4. Event Loop 는 Call Stack 과 Callback Queue 사이에서 Call Stack 이 비어있는지 확인한다.

5. 모든 함수의 실행이 완료되고, Call Stack 이 비워지면, Event Loop 는 Callback Queue 에 담겨있는 함수들을 먼저 들어온 순서대로 Call Stack 으로 넘겨준다.

   실제로 web API 에 대표 함수인 setTimeout 과 setInterval 은 web API, callback Queue, Call Stack 의 동작방식을 잘 생각해보면 지연시간에 보장성 에 큰 차이를 갖는 다는 것을 이해할 수 있다.

   더욱 자세하게 설명하고 싶지만, Web API 에 대해서는 나중으로 미루도록 하겠다..