자바스크립트/파이썬은 어떻게 작동할까?

자바스크립트/파이썬은 어떻게 작동할까?

 

자바스크립트는 어떻게 작동할까?

컴파일 언어? 인터프리터 언어?

자바스크립트는 어떻게 동작할까? 기본적으로 컴파일 언어일까? 인터프리터 언어일까?

명확하게 답변을 내리기는 어려우나 현대의 V8 엔진 등을 사용하는  자바스크립트는 인터프리터 언어 라고 할 수 있다. 

하지만 자바스크립트 또한 컴파일 과정을 거친다. 다만 자바스크립트 엔진 내부에서 실행중 컴파일이 필요한 경우에 내부에서 컴파일 한다. 

 

자바스크립트 엔진 작동 방식

위 그림을 바탕으로 자바스크립트 엔진의 작동방식에 대해서 알아보자. 먼저 엔진이 실행할 JS 파일을 받게 된다. 파싱, AST(Abstract Syntax Tree)를 구축하는 과정을 거친다.

다음으로 Interpreter가 코드를 읽으며 실행한다. 코드를 수행하는 과정에서 프로파일러가 지켜보며 최적화 할 수 있는 코드를 컴파일러에게 전달해준다. 주로 반복해서 실행되는 코드 블록을 컴파일(최적화)한다. 그리고 원래 있던 코드와 최적화된 코드를 바꿔준다. 코드를 우선 인터프리터 방식으로 실행하고 필요할 때 컴파일 하는 방법을  JIT(Just-In-Time) 컴파일러  라고 부른다.

결론은, 자바스크립트는 실행되는 플랫폼에 따라 인터프리팅과 컴파일이 혼합되어 사용된다. 이 방식은 자바스크립트의 성능을 크게 향상시켰다.

자바스크립트 엔진

자바스크립트 엔진은 Javascript 코드를 이해하고 실행을 도와주는 역할을 수행한다.

대표적인 JS 엔진으로는 구글의 V8엔진이 있으며 구글 크롬과 노드js 등에서 사용된다.

JS 엔진은 아래 그림과 같이 크게 Memory Heap과 Call Stack으로 이루어져 있다.

 

JS엔진의 Memory Heap과 Call Stack

 - 메모리힙(Memory Heap) : 메모리 할당이 이뤄지는 곳
                                                      데이터를 임시 저장하며 함수나 변수, 함수를 실행할 때 사용하는 값들을 저장
 - 콜스택(Call Stack) :             코드가 실행되면서 스택 프레임이 쌓이는 곳
                                                       코드가 실행되면서 코드의 내부의 실행 순서를 기록해 놓고,
                                                       하나씩 순차적으로 진행할 수 있도록 도와주는 곳

콜스택

자바스크립트는 싱글 쓰레드(Single-threaded) 프로그래밍 언어다. 즉 콜스택이 하나로, 한 번의 하나의 일만 처리할 수 있다.

//예시코드

function first() {
    second();
    console.log('first');
}

function second() {
    third();
    console.log('second');
}

function third() {
    console.log('third');
}

first();

콜스택 예시

예를 들어 다음과 같은 코드를 실행하면 위 그림과 같은 결과가 나온다.

함수 호출 순서대로 쌓이고, 역순으로 실행되며 함수 실행이 완료되면 스택에서 빠진다.

 

그런데 만약 콜스택에 들어간 코드 중 일부가 시간이 오래걸린다면? 위 예시에서 second()함수 처리에 시간이 오래걸린다면 어떻게 될까?

그러면 당연히 그 다음에 호출되어야하는 코드도 실행이 지연될 수 밖에 없다. 이런 상황이 특정 코드가 오래 걸려 다른 코드를 실행하지 못하게 되어 block이 된 상태이다.

 

그렇다면 마냥 기다리기만 해야할까?

 

이 때, 효과적으로 event를 관리하기 위해 필요한 것이 바로 web API와 Callback Queue, event loop 등이다.

 

Callback Function

우리가 라면을 끓일 때, 면이나 스프를 넣기 위해 물이 끓을 때까지 불 앞에서 마냥 기다리기만 하는 것이 아닌 파를 썰거나 계란을 준비하 듯 효율적으로 시간을 사용하듯 자바스크립트도 효과적으로 시간을 분배하며 이벤트를 관리한다.

위 예시와 같이 자바스크립트에서는 함수가 실행이 끝나면, 다음에 실행할 일을 정할 수 있는데 이것을 Callback이라고 부른다.

 

//Callback fucntion 예시

function run() {
	console.log('3초 후 실행');
}

console.log('시작');
setTimeout(run, 3000);
console.log('끝');

 

setTimeout 함수는 첫 번째 인자로 callback function을 받고, 두 번째 인자로 기다릴 시간을 받는 함수다.

 

위 코드를 실행하면 시작 -> 끝 -> (3초 후) 3초 후 실행이 출력됨을 알 수 있다.

 

즉, callback Function은 함수가 정해놓은 일이 끝난 뒤, 후속으로 하는 일을 알려주는 함수이다.

 

brower web APIs

우리가 빨래와 같이 시간이 오래걸리는 일을 세탁기 등에 맡기고 다른 업무에 임할 수 있듯 브라우저에서도 이와 비슷한 역할을 수행하는 것이 바로 brower web API이다.

brower web API는 브라우저 안에 C++ 구현된 쓰레드로 주로 DOM event, AJAX request, setTimeout 등 비동기 이벤트를 처리한다. javascript 싱글 쓰레드의 영향을 받지 않고, 독립적으로 이벤트를 처리할 수 있다.

 

---

---

파이썬은 어떻게 작동할까?

파이썬의 특징/장점

파이썬의 특징이자 장점은 다음 세가지다.

1. 파이썬은  인터프리터 언어 다.
2. 파이썬은 문법이 쉽고 간결하다.
3. 파이썬은 생산성이 높아 개발 속도가 빠르다.

컴파일 언어

compile 언어와 interpreter 언어의 가장 큰 차이점은 pre-processing, 컴파일 유무다. 

 

컴파일이란 A -> 컴파일 -> B 언어로 변환하는 과정이다.

 

주로 Java, C#, Swift등 고급 언어로 작성된 소스코드를 기계어로 변환하는 것을 의미한다. 변환된 기계어는 고급언어를 바로 인터프리팅 방식으로 실행한 것보다 빠르다. 아래 예제를 통해 컴파일 방식의 성능이 월등히 좋은 대표적인 경우를 살펴보자.

function sum () {
	let result = 0
	for (let i = 1 ; i <= 10 ; i++){
		result += i;
	}
	return result;
}
sum() // for loop.. -> 55
sum() // for loop.. -> 55
sum() // for loop.. -> 55
​
// compile 결과
sum() = 55
sum() = 55
sum() = 55

컴파일을 마친 기계어는 sum 함수의 결과를 55로 기억하고 있다. 반면 인터프리터 언어는 매번 sum 함수를 실행해 10번의 loop 를 거쳐, 55를 반환한다. 이러한 차이는 프로그램(특히 큰 프로그램)에서 속도의 차이를 보여준다.

[출처] 꾸준함의 힘을 믿는 지오니의 일상 -컴파일러 예시

 

인터프리터 언어

컴파일러(compiler)를 사용하는 C언어나 자바와는 달리 파이썬은 인터프리터에 의해 실행되는 스크립트 언어이다.

 

인터프리터(interpreter)란 소스 코드를 처음부터 한 라인씩 차례대로 해석하며 실행하는 프로그램이다.

인터프리터는 실행할 때마다 코드를 한 라인씩 바로 기계어로 변환하기 때문에 실행 속도가 컴파일러 언어에 비해 다소 느리지만, 코드가 완전히 작성되지 않아도 작성된 부분까지만을 테스트할 수 있다. 또한, 대화형 기능을 통해 사용자가 곧바로 코드를 수정할 수 있다.

[출처] 꾸준함의 힘을 믿는 지오니의 일상 -인터프리터 예시

 

인터프리터(스크립트) 언어와 컴파일러 언어 비교

---

Reference

JavaScript, 인터프리터 언어일까?

자바스크립트는 어떻게 작동하는가: 엔진, 런타임, 콜스택 개관

진짜! 쉽게 알아보는 자바스크립트 동작 원리

[Python] 파이썬 동작 방식