12. 자바스크립트는 어떻게 작동하는가

How JavaScript Works

자바스크립트 엔진 중 유명한 것이 구글의 V8엔진입니다. V8엔진은 크롬과 노드 js에서 사용됩니다. 

V8엔진은 크게 두 부분으로 구성됩니다.

1. 메모리힙(Memory Heap): 메모리할당이 이루어지는 곳입니다.
2. 콜스택(Call Stack): 코드가 실행 되면서 스택 프레임이 쌓이는 곳입니다.

자바스크립트의 엔진이 중요하긴 하지만 엔진 만으로 모든 것이 이루어지는 것은 아닙니다. 브라우저가 제공하는 웹 API라는 것도 있어서 DOM, AJAX, setTimeout등이 여기에 포함됩니다. 또한 이벤트루프와 콜백큐도 자기 역할을 하고 있습니다.

콜스택

자바스크립트는 싱글 스레드(single-threaded) 프로그래밍 언어입니다. 다시 말하면 콜스택이 하나라는 뜻입니다. 따라서 한 번에 하나의 일만 할 수 있습니다. 아래와 같은 자바스크립트 코드가 있을 때,

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

먼저 맨 아래에 있는 printSquare(5) 함수가 스택에 쌓였습니다. 그 위로 printSquare안의 오브젝트 var s = multiply(x,x)가 쌓였고 처리 된 다음, console.log()함수가 실행됐습니다. 이것 역시 바로 처리되고 마지막으로 맨처음에 쌓인 printSquare(5)함수가 처리되고 스택은 비게 되었습니다. 재귀함수를 잘 사용하지 못하면 콜 스택이 무한으로 쌓이게 되어 스택날림(Blowing the Stack)이 일어날 수 있습니다.

동시성, 이벤트 루프

단일 쓰레드를 기반으로 코딩을 하는 것은 어찌보면 참 쉬울 수 있습니다. 

예를 들어 데드락(deadlocks)과 같이 멀티쓰레드 기반 환경에서 대처해야 하는 상황을 신경쓰지 않아도 되기 때문입니다.

하지만 단일 쓰레드는 제한점도 많습니다. 자바스크립트는 콜스택이 하나입니다. 

만약 콜스택 내에 수행시간이 긴 함수가 있으면 어떤 일이 벌어질까요? 

예를 들어 브라우저의 자바스크립트로 복잡한 이미지를 변형을 해야 한다고 생각해보겠습니다.

‘왜 이게 문제이지?’ 라고 물을지도 모르겠습니다. 

콜스택에 수행할 함수가 있으면 브라우저는 사실 아무것도 할 수 없다는 게 문제입니다.

바로 ‘블록킹'되는 것입니다. 브라우저는 렌더링을 할 수도 없고 다른 코드를 수행할 수도 없고 그야말로 끼어 있는 상황이 되는 것입니다.

이는 부드러운 UI가 표현 되기를 원하는 경우 문제가 될 수 있습니다.

문제는 또 있습니다. 브라우저는 콜스택 내의 많은 작업을 수행하면서 꽤 긴 시간 동안 응답이 없을 수 있습니다. 

그러면 대부분의 브라우저에서 에러를 일으키고 사용자에게 해당 페이지를 닫을지 물어보기도 합니다.

그러면 UI를 막지 않고 브라우저가 응답없음 상태에 빠지게 하지 않으면서도 무거운 코드를 수행하려면 어떻게 해야 할까요? 

바로 해결책은 비동기 콜백(asynchronous callbacks)입니다.

비동기 콜백

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 

비동기 처리의 가장 흔한 사례는 제이쿼리의 ajax입니다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax 통신을 빼놓을 수가 없습니다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문입니다.

또 다른 비동기 처리 사례는 setTimeout()입니다. setTimeout()은 Web API의 한 종류입니다. 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행합니다.

콜백함수

콜백함수는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 말한다.

콜백함수가 자주 사용되는 대표적인 예는 이벤트 핸들러 처리이다.

콜백 함수는 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정시점에 실행된다.

콜백함수 알아보기

Reference

JavaScript Execution Context : https://poiemaweb.com/js-execution-context

How JavaScripts Works. By huiseoul engineering

비동기란? : https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/