💭 컴퓨터는 내가 쓴 자바스크립트 코드를 어떻게 읽을까?

퇴근 후 '이펙티브 타입스크립트'를 읽기로 한지 하루 만에 저를 막아선 문장이 있었습니다.

컴파일은 타입 체크와 독립적으로 동작하기 때문에, 타입 오류가 있는 코드도 컴파일이 가능합니다.

면접 준비하면서 대충은 알았던 컴파일, 이제는 더이상 모른채 넘어갈 수 없어 정리해보려 합니다.

---

# 컴파일러가 뭐에요?

컴파일러

위키백과는 아래와 같이 그 의미를 정의하고 있습니다.

특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 언어 번역 프로그램

프로그래밍 언어는 다음과 같이 두 가지로 나뉩니다.

• 고수준 언어(High-Level Language) : 사람이 이해하기 쉬운 언어

• 저수준 언어(Low-Level Language) : 기계가 이해하기 쉬운 언어

사람이 기계어로 명령을 내리기란 너무 어려운 일이라서, 고수준 언어로 명령을 내린 뒤 그 명령을 저수준 언어로 변환해주는 일종의 번역기를 사용하는 것이죠.

처음에는 기계어와 가까운 어셈블리어(Assembly Language)를 사용했습니다.
하지만 어셈블리어는 컴퓨터 구조에 따라 사용하는 기계어가 달라지기 때문에, 비용이 계속해서 증가한다는 큰 단점을 가지고 있었습니다.
왜냐하면 어셈블리어는 기계어와 1대1로 매칭되었기 때문이죠!

따라서 고수준 언어의 필요성이 대두했고, 이에 발맞춰 여러 고수준 언어가 등장하기 시작했습니다.
지금 우리가 사용하는 Python, Java, Javascript 등의 여러 언어가 바로 고수준 언어에 해당합니다.

인터프리터는 또 뭐에요?

Javascript는 인터프리터 언어이다.

그렇다면 여기서 말하는 인터프리터란 뭘까요? 그리고 컴파일러와 어떤 차이가 있는걸까요?

우선, 컴파일러가 일종의 번역기인 것처럼, 인터프리터도 번역기의 한 종류입니다.

컴파일러는 전체의 코드를 한 번에 기계어로 번역하는 데 반해, 인터프리터는 한 줄씩 번역하며 동시에 실행하는 프로그램입니다. 프론트엔드 주로 개발자가 사용하는 Javascript와 Python이 인터프리터를 사용하는 대표적인 언어입니다.

인터프리터는 번역했던 코드도 다시 번역해야 하기 때문에, 번역했던 코드는 다시 번역하지 않는 컴파일러보다 실행속도가 느릴 수 밖에 없습니다. 하지만 한 줄씩 번역하고 실행하기 때문에, 에러의 위치를 찾기 쉽고 프로그램의 수정이 용이하다는 장점이 있습니다.

그렇다면 Javascript는 오직 인터프리터만 사용하는 언어일까요? 아닙니다!

Javascript가 점점 발전하고 광범위하게 사용되기 시작하면서, 인터프리터의 성능 문제가 대두되었습니다. 이를 해결하기 위해 구글에서는 Javascript V8 엔진을 개발했고, 이 엔진에 의해 Javascript도 컴파일러를 사용하게 되었습니다.

그렇다면 어떻게 서로 다른 번역기를 함께 사용한다는 걸까요?
이 부분은 아래 컴파일 단계 설명 후 살펴보겠습니다.

---

# 컴파일 단계

컴파일러가 코드를 컴파일할 때는, 크게 다섯 가지의 과정을 거치게 됩니다.

1. Lexical Analysis

이 단계에서는 소스 코드를 읽고 분해해 작은 토큰(Token)을 만듭니다. 여기서 토큰(Token)이란 문법적 의미를 갖는 최소한의 단위를 말합니다.

2. Syntax Analysis

이 단계에서는 앞 단계에서 생성한 토큰(Token)을 받아, 프로그램의 구조를 나타내는 파스 트리(parse tree)를 생성합니다. 그리고 이 파스 트리를 사용해 소스 코드가 프로그래밍 언어의 룰을 잘 따르고 있는지 확인합니다.

여기서 파스 트리는 AST(Abstract Syntax Tree), 즉 추상구문트리의 구조로 이루어져 있다.

3. Semantic Analysis

이 단계에서는 소스 코드의 의미를 분석합니다. 이 때, 변수가 알맞게 사용되었는지 등을 체크하는 타입 체킹(type checking)이 일어납니다. 또한 선언되지 않은 변수의 사용이나 잘못된 함수 사용 등의 Semantic Error를 체크합니다.

4. Code Generation

이 단계에서는 앞 단계에서 생성한 파스 트리를 기계어로 번역합니다.

5. Optimization

이 단계에서는 앞 단계에서 생성된 코드를 분석하고, 최적화하여 성능을 향상합니다.

---

# Javascript는 인터프리터 언어?

그렇다면 앞서 말했던, Javascript는 인터프리터 언어라는 말은 사실일까요?

Javascript는 앞서 잠깐 살펴보았던 인터프리터를 통해 거쳐 기계어로 번역됩니다.
그 과정은 아래 이미지와 같습니다.

이렇게 인터프리터만 사용하다보니, 한 줄 한 줄 번역하고 실행하는 인터프리터의 특성상 성능적인 문제가 발생합니다.
따라서 구글의 Javascript V8 엔진은 일부 컴파일러를 도입해 성능 문제를 개선하게 됩니다.

위 이미지의 과정에, 중간에 컴파일러를 붙여 실행되는 코드를 모니터링 하는 방법을 사용한 것이죠!

Profiler는 인터프리터를 관찰하면서 실행되는 코드를 모니터링하다가, 반복실행하는 코드가 있다면 코드를 컴파일러에게 보내 실시간 컴파일합니다.

이렇게 필요할 때마다 컴파일하는 코드를 JIT(Just-In-Time) 컴파일러라 합니다. 이 때 컴파일러가 판단했을 때 컴파일하지 않는게 좋을 것 같다고 판단한 코드는 Decompile 과정을 거쳐 다시 되돌리기도 합니다.

따라서 Javascript는 (성능을 위해 부분적으로 컴파일러를 사용하는) 인터프리터 언어라고 할 수 있습니다.

이렇게 컴파일러, 그리고 Javascript에서의 컴파일러를 살펴보았습니다.

끝

---

# Reference

• https://www.geeksforgeeks.org/introduction-of-compiler-design/amp/

• https://wormwlrm.github.io/2021/04/18/Formal-Language-and-Compiler.html#%EA%B7%B8%EB%9E%98%EC%84%9C-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC%EA%B0%80-%EB%AD%94%EB%8D%B0

• https://opentutorials.org/course/2471/13906

• https://velog.io/@seungchan__y/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-Compiler-Interpreter-%EC%96%B8%EC%96%B4%EB%8B%A4