타입스크립트의 동작 원리

대다수의 프로그래밍 언어의 동작 원리

타입스크립트의 동작 방식을 이해하기 이전에 대다수의 프로그래밍 언어들의 동작원리에 대해서 살펴볼 필요가 있다.

먼저 대부분의 프포그래밍 언어는 사실 컴퓨터보다는 인간에게 더 친화적이다.
컴퓨터는 인간과는 달리 바이트코드나 기계어, 이진수 같은 아주 단순한 형태의 언어를 기반으로 동작하기때문에 영어의 문법과 비슷한 프로그래밍 언어를 컴퓨터가 바로 이해하고 실행할 수는 없다.

그래서 컴퓨터는 우리가 작성한 코드를 실행하기 위해서 코드를 컴퓨터가 해석하기 쉬운 형태로 변환하는데 이 과정을 '변환한다'라고 해서 '컴파일(Compile)'이라고 한다.

그래서 우리가 프로그래밍 언어로 작성한 코드를 컴파일하면 코드가 컴퓨터가이해할 수 있는 기계어 같은 형태로 변환이 되고, 컴퓨터가 이걸 읽어서 실행하고 결과적으로 코드가 실행하게 되는것이다.

이렇게 코드를 컴파일하는 친구를 특별히 컴파일러 라고 부른다.
자바나 자바스크립트같은 언어를 컴파일하면 바이트 코드라는 형식으로 변환된다.
그래서 설명 편의상 앞으로 컴파일 결과로 생성되는 컴퓨터가 이해할 수 있는 형태의 코드를 그냥 바이트코드라고 부르겠다.

그런데 컴파일러는 어떤 과정을 거쳐 코드를 컴파일 하는걸까?
이 과정에 대해 간단하게만 살펴보자

컴파일러의 컴파일 과정

우선 컴파일러는 우리가 작성한 코드를 바로 바이트코드로 변환하는 것이 아니라 그 전에 AST(추상 구문 트리)라는 특별한 형태로 먼저 변환한다.

왼쪽의 자바스크립트 코드를  AST 추상 구문 트리로 변환하면 오른쪽처럼 바뀐다.

즉, 코드의 공백이나 주석 탭 등의 코드 실행에 관계없는 그런 요소들은 전부제거하고 트리 형태의 자료구조에 코드를 쪼개서 저장해놓은 형태로 변한다.
물론 정확하게 이렇게 생기진않고 대충 이런 느낌이라고만 생각해주면 된다.

이렇게 코드를 AST로 변환하고 나면 이제 마지막으로 컴파일러가 AST를 바이트코드로 변환하고 컴파일이 종료된다.

코드가 실행되는 과정을 정리하면

1. 먼저 코드를 컴파일러가 AST로 변환하고
2. AST를 다시 바이트 코드로 변환되어
3. 변환된 바이트코드를 컴퓨터가 실행한다.

타입스크립트의 동작 과정

이번에는 타입스크립트는 어떤 과정을 거쳐서 실행되는지에 대해서 살펴보자
우선 타입스크립트도 다른 언어와 마찬가지로 실행을 하기 위해서는 컴파일을 해야한다.

우선 다른언어들과 동일하게 먼저 타입스크립트 코드를 AST로 변환한다. 여기까지는 다른 프로그래밍 언어와 같다.
그런데 그 다음 AST를 바이트코드로 변환하는게 아니라 이 AST를 보고 코드 상에 타입 오류가 없는지 검사하는 '타입검사'가 수행된다.
만약 이때 우리가 코드를 잘못 작성해서 코드에 타입 오류가 있었다면 타입 검사가 실패하고 컴파일이 중단된다.
만약 타입 오류가 없는 정상적인 코드라면 타입 검사를 성공적으로 통과하고 그 다음에는 AST를 바이트코드가 아니라 '자바스크립트 코드'로 변환한다.
그리고 컴파일이 종료된다.

대부분의 언어는 컴파일을 하면 바이트 코드가 만들어지지만 타입스크립트는 컴파일하면 자바스크립트 코드가 만들어진다.

이렇게 타입스크립트의 컴파일 결과로 만들어진 자바스크립트 코드를 Node.js나 웹브라우저로 실행하면 앞서 살펴본 대다수의 언어들과 동일한 과정을 거쳐 컴파일 되어 실행된다.

여기서 중요한 부분은 타입스크립트 코드의 컴파일 과정에 타입검사가 포함되어 있기때문에
타입 스크립트 코드를 컴파일해서 생성한 자바스크립트 코드는 타입 검사를 통과한 자바스크립트 코드라는것이다.
즉, 타입 오류가 발생할 가능성이 낮은 안전한 자바스크립트 코드라는 것이다.

이 과정을 한번 더 이미지로 정리해보자

1. 타입스크립트 코드를 AST로 변환하고
2. 검사에 성공하면 '타입검사를 통과한 안전한 자바스크립트 코드'가 생성/ 검사에 실패하면 컴파일 종료
3. 검사에 성공한 자바스크립트 코드는 다시 AST로 변환되고
4. 바이트코드로 변환되어
5. 실행된다.

타입검사를 통과한 타입스크립트 코드는 어떻게 될까?

첫번째 이미지는 타입스크립트 코드이고, 두번째이미지는 컴파일시 타입검사를 통과하여 생성된 자바스크립트 코드이다.
위 두 이미지를 비교하면 알 수 있듯이 컴파일 시 타입 검사를 통과하여 생성된 자바스크립트 코드는 이렇게 타입과 관련된 문법들은 삭제된 안전한 자바스크립트 코드로 변경되어있다.

여기서 알 수 있는 또 다른점은 타입스크립트에 작성한 타입 관련 코드들은 결국 자바스크립트로 변환될 때 사라지게 되어
프로그램 실행에 영향을 미치지 않는다는 점이다.

정리하면 결국 타입스크립트 컴파일 시 타입 검사를 거쳐 자바스크립트 코드로 변환되는데 이때 만약 코드에 오류가 있다면 컴파일 도중 실패하게 되므로 자바스크립트를 보다 더 안전하게 사용할 수 있다고 볼 수 있다.

정리

대부분의 프로그래밍 언어들은 컴파일 시 코드 > AST > 바이트코드 로 변환되어 컴퓨터가 코드를 실행하고,
타입스크립트의 경우 코드 > AST > 타입검사 과정으로 진행되는데

1. 타입검사에 실패할 경우 : 컴파일 종료
2. 타입검사에 성공할 경우 : 자바스크립트 코드 > AST > 바이트코드 > 실행

즉, 타입스크립트의 동작원리란 컴파일 시 타입검사를 통해 자바스크립트 코드를 보다 더 안전하게 사용할 수 있게 만들어준다.

 

관련 강의 - 한입크기로 잘라먹는 타입스크립트