자바스크립트에서 중요한 런타임 환경에서의 코드 실행 순서를 제대로 알아보고 이해하기 위해 쓰는 글
처음부터 천천히 살펴보겠습니다아
자바스크립트는 단일 스레드 (Single Thread)이다.
이는 한 번에 한 가지 작업만 처리 할 수 있고, 해당 작업이 완료되기 전에는 다른 작업을 처리할 수 없다!
이런 이유로, 자바스크립트의 코드는 동기적(synchronous)으로 실행된다.
순서대로 코드가 작업을 실행하며, 완료되기 전엔 다른 작업을 처리하지 않는 현상을 블로킹(Blocking)이라고 한다.
이렇게 순서대로 하나의 작업만을 실행하게 된다면, 동시적으로 다른 일을 수행할 수 없고 모든 작업이 완료될 때까지 기다리게 되면 어마무시한 시간이 걸리게 될 것이다.
이 문제를 해결하기 위해 자바스크립트에서는 비동기(Asynchronous) 작업을 처리할 수 있게 했다.
비동기 작업은 특정 작업이 완료될 때까지 기다리지 않고 다른 작업을 진행할 수 있게 하는 방식을 의미한다.
이를 통해서 웹 페이지의 UI가 멈추지 않고 다른 작업을 수행하게 됨!
비동기 처리의 대표적인 방식으로는
콜백 함수, 프로미스(Promise), 그리고 async/await이 있다!
저번 블로그 내용에서 확인할 수 있듯이,
Promise나 async/await은 우리가 잘 아는 네트워크 요청, 이벤트 핸들러 등이 있다.
그럼 런타임 환경에서 자바스크립트는 함수를 어떻게 동작시키는지 알아보도록 하자!
일단 자바스크립트에는 엔진이 존재하는데,
자바스크립트 엔진 중에 가장 많이 사용되는 엔진은 V8이다.
V8은 구글에서 개발한 자바스크립트 엔진으로, 주로 크롬 브라우저와 Node.js에서 사용된다!
자바스크립트 런타임 환경에서 이 V8과 Callback Queue, Event Loop, 그리고 웹 브라우저에서 제공하는 Web API가 함께 동작을 한다.
이 친구들이 어떻게 동작을 하는지 아래에서 더 정확하게 확인해보도록 하겠음!
아래는 런타임 환경에서 동작하는 그림 예시이다!
일단 V8에 stack이라고 써져있는 부분은 콜스택(callstack) 이라고 주로 불리는 부분이다.
처음에 코드가 실행이 됐을 때,
전역 컨텍스트가 만들어져 콜스택에 제일 먼저 올라가게 된다.
전역 컨텍스트는 우리가 선언한 변수, 함수 등의 내용을 담고 있다.
그 다음 console.log 같은 로그가 있다면 콜스택에 올라가게 된다.
이 과정 속에서 전역 컨텍스트에 있는 함수가 호출이 된다면, 함수 컨텍스트가 만들어져 콜스택에 올라가게 된다!
이 콜스택은 LIFO(Last In First Out)으로 동작한다.
가장 마지막에 호출된 함수가 가장 먼저 작업이 처리된다.
처리가 된 함수는 콜스택에서 제거된다!
함수가 실행하는 로직에 비동기 작업이 있다면, 함수를 바로 실행하지 않고 그 작업을 Web API로 보내게 된다.
Web API는 AJAX 같은 네트워크 요청이나 setTimeout 같은 기능을 제공하기에 작업을 처리할 수 있으므로 Web API로 보내지는 것이다.
(하지만 Web API 환경마다 제공하는 기능이 다르므로 재확인은 필수!)
Web API에서 작업이 완료가 되어 결과가 준비가 되면, 이 비동기 작업을 콜백큐(callback queue)로 보내게 된다.
이 콜백큐(callback queue)는
비동기 작업들이 실행될 준비가 되어 Web API에서 옮겨진 곳이다.
이는 FIFO(Fisrt In First Out)으로 작동하며,
제일 먼저 들어온 작업이 먼저 나가는 방식이다.
콜백큐에 있는 작업들은 콜스택에 아무 작업이 없다면 이벤트 루프(Event Loop)가 제일 앞에 있는 작업을 콜스택으로 옮겨준다.
콜스택으로 옮겨진 작업은 실행되고 나서 콜스택에서 제거된다!
이벤트 루프는
콜스택과 콜백큐를 끊임없이 지켜보고, 콜스택에 아무 작업이 없을 때마다 콜백큐에서 작업을 하나씩 옮겨주는 역할을 한다.
이렇게 비동기 작업을 옮기고 옮기는 작업을 반복하여, 모든 비동기 작업을 완료하고 마지막으로 콜스택에서 제거가 됨으로써 끝나게 되는 것이다.
자바스크립트는 동기적으로 코드를 실행하지만, 런타임 환경에서 이러한 동작들을 거치며 비동기 작업을 동기적으로 처리하는 것처럼 보인다!
