우아한형제들 웹프론트엔드개발그룹, 『우아한 타입스크립트 with 리액트』, 한빛미디어(2023) p.184 ~ 198
해당 책을 읽고 공부하며 관련 내용을 정리한 글입니다.
6.1 자바스크립트의 런타임과 타임스크립트의 컴파일
1. 런타임과 컴파일타임
컴파일 타임: 소스코드가 컴파일 과정을 거쳐 컴퓨터가 인식할 수 있는 기계어 코드(바이트 코드)로 변환되어 실행할 수 있는 프로그램이 되는 과정
런타임: 소스코드의 컴파일이 완료되면 프로그램이 메모리에 적재되어 실행되는데 이 시간을 말함.
2. 자바스크립트 런타임
= 자바스크립트가 실행되는 환경
ex_크롬, 사파리 등의 인터넷 브라우저, Node.js
주요 구성 요소: 자바스크립트 엔진, 웹 API, 콜백 큐, 이벤트 루프, 렌더 큐
3. 타입스크립트의 컴파일
tsc라는 컴파일러를 통해 자바스크립트 코드로 변환. 고수준(ts) -> 고수준(js) 언어로 변환되는 것이기 때문에 트랜스파일(Transpile)이라고 부르기도 한다.
타입스크립트 컴파일러가 소스코드를 컴파일하여 프로그램이 실행되기까지의 과정
- 타입스크립트 소스코드를 타입스크립트 AST로 만든다. (tsc)
- 타입 검사기가 AST를 확인하여 타입을 확인한다. (tsc)
- 타입스크립트 AST를 자바스크립트 소스로 변환한다. (tsc)
- 자바스크립트 소스코드를 자바스크립트 AST로 만든다. (런타임)
- AST가 바이트 코드로 변환된다. (런타임)
- 런타임에서 바이트 코드가 평가(evaluate)되어 프로그램이 실행된다. (런타임)
=> 💡 개발자가 작성한 타입 정보는 1, 2단계에서만 사용된다. 즉, 개발자가 작성한 타입 정보는 단지 타입을 확인하는 데만 쓰이며, 최종적으로 만들어지는 프로그램에는 아무 영향을 주지 않는다.
컴파일 타임에 타입을 검사하기 때문에 에러가 발생하면 프로그램이 실행되지 않고, 이러한 특징으로 정적 타임 검사기라고 부른다.
📍 용어 정리
AST(Abstract Syntax Tree)
: 컴파일러가 소스코드를 해석하는 과정에서 생성된 데이터 구조. 컴파일러는 어휘적 분석과 구문 분석을 통해 소스코드를 노드 단위의 트리 구조로 구성한다.
어휘적 분석 (Lexical Analysis)
: 소스 코드를 토큰으로 분리하는 과정.구문적 분석 (Syntactic Analysis)
: 어휘적 분석에서 생성된 토큰을 구문 트리(Syntax Tree)나 추상 구문 트리(Abstract Syntax Tree, AST)로 변환하는 과정.
"구문적"이라는 단어는 언어의 구조(문법)를 다루는 것을 의미. 토큰들이 언어의 문법 규칙에 맞게 적절히 배치되어 있는지 확인하고, 그 구조를 분석.토큰 (Token)
: 소스 코드에서 의미 있는 가장 작은 단위.
컴파일러의 어휘 분석 단계에서 소스 코드의 연속된 문자들을 그룹화하여 생성.
종류: 키워드, 식별자, 리터럴, 연산자, 구두점 등
6.2 타입스크립트 컴파일러의 동작
타입스크립트 컴파일러의 역할
1. 코드 검사기: 코드에 타입 오류 확인
- 컴파일타임에 문법 에러와 타입 관련 에러를 모두 검출
2. 코드 변환기: 구버전의 자바스크립트로 트랜스파일
- target 옵션을 사용하여 특정 버전의 JS로 컴파일 가능
6.3 타입스크립트 컴파일러의 구조
