자바스크립트의 런타임과 타입스크립트의 컴파일

최종 수정 : 2024-05-27

런타임과 컴파일타임

프로그래밍 언어는 일반적으로 고수준(High-level)과 저수준(low-level) 언어로 구분할 수 있다. 고수준 언어는 사람이 이해하기 쉬운 형식으로 작성되며, 저수준 언어는 컴퓨터가 이해하기 쉬운 형식으로 작성된다.

 

자바스크립트는 대표적인 고수준 언어에 속하며 컴파일러나 인터프리터에 의해 저수준 언어로 번역되어 실행된다. 이처럼 소스코드가 기계어 코드로 변환되어 실행이 가능한 프로그램이 되는 이 단계를 컴파일타임(compile time)이라고 부른다. 다시 말해, 컴파일타임은 소스코드가 컴파일 과정을 거쳐 컴퓨터가 인식할 수 있는 기계어 코드(바이트 코드)로 변환되어 실행할 수 있는 프로그램이 되는 과정을 의미한다.

 

소스코드의 컴파일이 완료되면 프로그램이 메모리에 적재되어 실행되는데 이 시간을 런타임(Runtime)이라고 한다. 즉, 런타임은 컴파일 과정을 마친 응용 프로그램이 사용자에 의해 실행되는 과정이다.

 

프로그램 실행

컴파일러가 소스 코드를 파싱해 AST로 만들고, 다시 AST를 바이트 코드로 변환한 것을 런타임이 평가하도록 지시하는 것

 

자바스크립트 런타임

자바스크립트 런타임은 자바스크립트가 실행되는 환경을 의미한다. 대표적으로 인터넷 브라우저와 Node.js 등이 있다. 자바스크립트 런타임은 다양한 구성 요소로 이루어져 있는데, 자바스크립트 엔진, 웹 API, 콜백 큐, 이벤트 루프, 렌더 큐가 대표적이다.

 

자바스크립트는 대표적인 인터프리티(interpreter) 언어로 별도의 컴파일 과정이 존재하지 않는다고 알려져 있다. 하지만 엄밀히 말하면, 자바스크립트에도 컴파일 단계가 존재한다. 자바스크립트를 해석하고 실행하는 역할을 하는 V8 엔진은 때때로 코드를 최적화하기 위해 컴파일 단계를 거친다. 이 과정은 실행 속도를 향상하기 위한 목적으로 코드를 캐싱하여 이후 실행 시간을 단축한다.

 

• TypeError: Cannot read properties of undefined
• TypeError: Cannot read properties of null
• ReferenceError: foo is not defined

위와 같은 에러 메시지를 만나게 되는 이유는 런타임에서 자바스크립트 에러가 발생하기 때문이다.

 

타입스크립트의 컴파일

일반적으로 컴파일은 추상화 단계가 다른 고수준 언어에서 저수준 언어로 변환되는 과정을 가리킨다.

 

타입스크립트는 tsc라고 불리는 컴파일러를 통해 자바스크립트 코드로 변환된다. 하지만 타입스크립트는 고수준 언어(TS)가 또 다른 고수준 언어(JS)로 변환되는 것이기 때문에 컴파일이 아닌 트랜스파일(Transpile)이라고 부르기도 한다. 또한 이러한 변환 과정은 소스코드를 다른 소스코드로 변환하는 것이기에 타입스크립트 컴파일러를 소스 대 소스 컴파일러(source-to-source compiler)라고 지칭하기도 한다.

 

트랜스파일의 또 다른 예시로 C / C++를 JS로 변환하는 Emscripten과 ES6 버전 이상의 문법을 ES5 버전 이하의 문법으로 변환하는 바벨(Babel) 등을 들 수 있다. 그러나 좁은 의미의 컴파일과 트랜스파일을 통틀어 컴파일이라고 부르기도 한다.

 

타입스크립트는 .ts 확장자가 붙은 파일을 찾아내서 컴파일한 다음에 .js 확장자가 붙은 자바스크립트 파일을 만들어낸다. 타입스크립트 컴파일러는 소스코드를 해석하여 AST(Abstract Syntax Tree, 최소 구문 트리)를 만들고 이후 타입 확인을 거친 다음에 결과 코드를 생성한다.

 

AST(Abstract Syntax Tree)

컴파일러가 소스코드를 해석하는 과정에서 생성된 데이터 구조다. 컴파일러는 어휘적 분석(lexical analysis)과 구문 분석(syntax analysis)을 통해 소스코드를 노드 단위의 트리 구조로 구성한다.

 

타입스크립트 컴파일러가 소스코드를 컴파일하여 프로그램이 실행되기까지의 과정

한 입 크기로 잘라먹는 타입스크립트

한 입 크기로 잘라먹는 타입스크립트

1. 타입스크립트 소스코드를 타입스크립트 AST로 만든다. (tsc)
2. 타입 검사기가 AST를 확인하여 타입을 확인한다. (tsc)
3. 타입스크립트 AST를 자바스크립트 소스로 변환한다. (tsc)
4. 자바스크립트 소스코드를 자바스크립트 AST로 만든다. (런타임)
5. AST가 바이트 코드로 변환된다. (런타임)
6. 런타임에서 바이트 코드가 평가(evaluate)되어 프로그램이 실행된다. (런타임)

소스코드의 타입은 1~2단계에서만 사용되고 3단계부터는 타입을 확인하지 않는다. 즉, 개발자가 작성한 타입 정보는 단지 타입을 확인하는 데만 쓰이는 것이다. 타입스크립트는 컴파일타임에 타입을 검사하기 때문에 에러가 발생하면 프로그램이 실행되지 않는다. 이러한 특징 때문에 타입스크립트를 정적 타입 검사기(static type checker)라고 부른다.

---

Q. 다른 언어는 어떻게 진행될까?

한 입 크기로 잘라먹는 타입스크립트

---

참고 자료

우아한 타입스크립트 with 리액트 (p.184-187)

https://velog.io/@ggob_2/typescript-2

#2 타입스크립트 동작 원리

한입 크기로 잘라먹는 타입스크립트

https://codeit-onebite-ts.winterlood.com/