Table Of Contents
개요
안녕하세요 이정환입니다.
새로운 기술을 배울 때 그 기술이 어떻게 동작 하는지 대략적으로 살펴보는 과정은 중요합니다.
동작 원리를 이해함으로써 기술이 존재하는 이유를 알 수 있으며, 기술이 갖는 독특한 특징과 그로 인한 적절한 사용도 등 기술을 바라보는 더 넓은 시야를 가질 수 있습니다.
따라서 이번에는 타입스크립트는 어떻게 실행 되는지 다른 언어에 비교하며 천천히 살펴보겠습니다.
(틀리거나 잘못된 내용이 있다면 알려주세요 🥲)
어렵지 않으니 건너뛰지 마세요!
많은 학습자들이 동작 원리나 개념은 어렵고 복잡할 것이라고 판단하여 문법으로 바로 건너가 학습을 시작하는 경우가 많습니다.
물론 학습자마다 각자 선호하는 학습 방식이 있겠지만 개인적으로 타입스크립트 만큼은 꼭 동작 원리를 먼저 살피고 학습하시는 걸 추천드립니다.
타입스크립트는 다른 언어에 비해 좀 독특한 동작 방식을 가지고 있기 때문입니다. 결과를 조금만 스포일러 해보자면 타입스크립트 컴파일 결과는 바이트코드(혹은 기계어)가 아닌 자바스크립트 코드입니다. 신기하죠?
이렇게 타입스크립트는 다른 언어들과 비교해 독특한 동작 방식을 갖고 있으므로 타입스크립트의 동작 원리를 모르면 이후의 내용을 접할 때 큰 어려움을 겪을 수 있습니다.
프로그래밍 언어는 어떻게 실행 되는걸까?
우선 타입스크립트의 동작 방식을 살펴보기 전에 프로그래밍 언어가 어떻게 동작 하는지 살펴보겠습니다. 이 내용을 이해하면 타입스크립트의 동작 방식을 이해하는데 큰 도움이 됩니다.
대부분의 프로그래밍 언어는 컴퓨터 보다는 인간에게 더 친화적 입니다. 그러므로 0 아니면 1 밖에 모르는 컴퓨터가 우리가 작성한 코드를 바로 해석하기에는 무리가 있습니다.
이것은 마치 이제 막 유치원에 입학한 어린 아이에게 두꺼운 양자 역학 논문을 읽으라 하는 것과 비슷하다고 볼 수 있습니다.
우리가 작성한 코드는 이진수 보다는 영어에 더 가깝습니다. 그러므로 프로그램 코드를 컴퓨터가 해석하기 쉽게 변환해 주어야 합니다. 그리고 이런 작업을 ‘컴파일(Compile)’ 이라고 부릅니다.
컴파일은 마치 어린아이에게 어려운 내용을 설명 해야 할 때 이해하기 쉽도록 이솝 우화 같은 동화로 바꾸는 일에 비유할 수 있습니다.
그리고 이렇게 코드를 컴파일 하여 컴퓨터가 이해하기 쉬운 형태로 바꿔주는 역할을 하는 프로그램을 ‘컴파일러’ 라고 부릅니다.
컴파일러는 코드를 어떻게 컴파일 하는 걸까요? 물론 우리는 컴파일 과정에 대해 배우려고 하는 것은 아니니 아주 간단하게만 살펴보겠습니다. 그러니 앞으로의 설명이 모두 완벽히 이해되지 않더라도 “아 그냥 요런 느낌이구나?” 정도만 이해하고 넘어 가셔도 괜찮습니다.
우선 컴파일러는 우리가 작성한 코드를 AST(추상 문법 트리)로 변환합니다.
AST는 우선 1차적으로 코드를 컴퓨터가 더 해석하기 쉽게 변경한 것 인데요 다음 그림처럼 공백이나 주석 탭 등 코드의 실행에 관계없는 요소들은 모두 제거하고 트리 형태의 자료구조에 코드를 분석해 저장한 형태를 말합니다.
만약
2 + ( 4 * 10 ) 과 같은 코드를 AST로 변환하면 다음 그림과 같을 것 입니다.
이렇게 만든 AST는 또 바이트코드(Bytecode)로 변환됩니다. 바이트 코드에 대해 구체적으로 알 필요는 없습니다. 대략 바이트 코드란 컴퓨터가 해석하고 실행 가능한 형태의 코드라고 이해하시면 됩니다.
코드가 바이트코드로 변환(컴파일)되면 이제 컴퓨터가 바이트 코드를 실행해 프로그램이 실행됩니다.
정리하자면 우리가 작성한 코드는 다음 과정을 거쳐 실행됩니다.
- 코드 → AST(추상 문법 트리)
- AST → 바이트코드
- 바이트 코드 실행
이 과정을 컴파일(Compile)이라고 부릅니다. 그리고 이 과정을 진행하는 특수한 프로그램을 컴파일러(Compiler)라고 부릅니다.
타입스크립트는 어떻게 실행 될까?
이제 대부분의 프로그래밍 언어가 어떤 과정을 거쳐 실행 되는지 알았습니다. 그렇다면 타입스크립트는 어떻게 실행되는 걸까요?
타입스크립트 또한 당연히 컴파일 과정을 거칩니다. 그런데 컴파일 과정이 다른 주요 언어들과 좀 다릅니다. 다음은 타입스크립트 코드의 컴파일 과정입니다.
- 타입스크립트 코드 → 타입스크립트 AST
- 타입스크립트 AST 검사 (타입 검사)
- 타입스크립트 AST → 자바스크립트 코드
1번 과정은 앞서 살펴본 대부분의 프로그래밍 언어의 컴파일 과정과 동일합니다. 그런데 2번 과정에서 타입스크립트는 AST를 바이트 코드로 변환하는 대신 ‘타입 검사’를 수행합니다.
타입 검사란 우리가 작성한 코드에 타입 관련된 오류가 없는지(ex : 함수가 아닌데 함수처럼 호출 하지는 않았는지) 타입을 올바르게 사용했는지 검사하는 과정입니다. 코드를 실제로 실행해 오류가 있는지 검사하는게 아니므로 이 과정을 ‘정적 검사’ 라고 합니다. (반대로 실행해서 검사하는건 동적 검사 라고 함)
예를 들어 우리가 만약 아래와 같은 타입스크립트 코드를 작성하고 컴파일 한다면 타입 검사에 실패합니다.
let a = 1; a();
변수 a에는 숫자 1이 저장되어 있습니다. 그런데 a를 마치 함수인 것 처럼 호출 했습니다. 타입 오류가 발생해 타입 검사는 실패합니다.
타입 검사가 실패하면 타입스크립트 컴파일러는 컴파일을 중단하고 오류가 발생 했음을 알립니다.
이렇듯 타입스크립트는 컴파일 과정에서 정적으로 코드에 오류가 없는지 검사하는 ‘타입 검사’ 과정을 거치기 때문에 코드를 실행하기 전에 프로그램에 발생한 오류를 확인할 수 있습니다. 이는 더 견고한 프로그램을 만드는데 큰 도움이 됩니다.
만약 코드에 아무런 타입 오류가 없어 타입 검사가 성공하면 타입스크립트 컴파일러는 타입스크립트 AST를 자바스크립트 코드로 변환합니다.
그리고 이렇게 변환된 자바스크립트 코드는 앞서 살펴본 대다수의 언어와 동일한 과정을 거쳐 실행됩니다.
- 자바스크립트 코드 → AST
- AST → 바이트 코드
- 바이트 코드 실행
정리하자면 타입스크립트 코드는 다음 과정을 거쳐 실행됩니다.
- 타입스크립트 컴파일
- 타입스크립트 코드 → 타입스크립트 AST
- 타입 검사
- 타입스크립트 AST → 자바스크립트 코드
- 자바스크립트 컴파일 및 실행
- 자바스크립트 코드 → 자바스크립트 AST
- 자바스크립트 AST → 바이트 코드
- 바이트 코드 실행
타입스크립트 컴파일은 타입스크립트 컴파일러가 직접 수행하며 결과로 자바스크립트 코드가 생성됩니다.
예를 들어 다음과 같은 타입스크립트 코드는
function add(a: number, b: number) { return a + b; } add(1, 2);
컴파일 결과 다음과 같은 자바스크립트 코드로 변환됩니다.
function add(a, b) { return a + b; } add(1, 2);
여기서 알 수 있는 또 다른 사실은 타입스크립트에 작성한 타입 관련 코드들은 결국 자바스크립트로 변환될 때 사라지게 되어 프로그램 실행에 영향을 미치지는 않는다는 점 입니다. 그러므로 결국 타입스크립트는 자바스크립트로 변환 되며 자바스크립트 코드를 실행하기 전에 타입 오류가 없는지 확인하기 위해 존재한다고 볼 수 있습니다.
타입스크립트 컴파일이 완료되어 만들어진 자바스크립트 코드는 우리가 이전에 실행 했던 방식 그대로 동일하게 실행하면 됩니다. 브라우저에서 실행할 수도 Node.js 같은 런타임에서 실행할 수도 있습니다.
이렇게 타입스크립트의 동작 원리를 살펴보았습니다.
다음 내용
다음에는 타입스크립트 코드를 직접 작성하고 타입스크립트 컴파일러를 이용해 자바스크립트 코드로 변환하는 과정에 대해 살펴보겠습니다.
감사합니다.