타입스크립트는 어떻게 실행되는 것일까?

·2022년 7월 13일
8

JavaScript

목록 보기
12/13
post-thumbnail

면접질문에서 유일하게 답변을 하지 못했던 것이 2가지가 있었다.

그게 바로 이 질문이였다.(한개는 쿠버네티스)

어떻게 실행이 되는가? 라는 궁금증은 있었는데, 생각해보니 해결을 못했던 것 같기도 하고
이게 질문으로 나올까 라는 생각 조차도 못했던 것 같다.

프레임워크는 그렇게 뒤집어놨으면서

그래서 찾아보다가 왜 대답을 못했을까? 라는 생각이 들었다.

동적언어와 정적언어

이거 저번에 이야기를 했던 것 같은데 간단하게만 정리하면

  • 동적언어
    인터프리터 언어에서 사용되고 런타임(코드를 한줄한줄 읽을 때) 타입을 즉시 지정해서 실행한다.
  • 정적언어
    컴파일 언어에서 사용되며 컴파일 타임에 모조리 기계어로 변환한다.
    그렇기 때문에 타입을 미리 지정을 해놔야하며, 그렇지 않을 경우 에러가 발생한다.

그럼 TS와 JS의 차이를 명확하게 알 수 있다.

TS는 타입을 지정하지 않으면 실행이 되지 않기 때문에 정적 언어 이며

JS는 얼렁뚱땅 타입을 지정하지 않아도 1+"1"이 11라고 이야기하는 동적언어다.(JS혐오...조금합니다..^^)

이정도면 사실 전부 나온게 아닌가 싶다(...)

바로 정적언어를 동적언어로 바꾸는 과정이 추가된다는 것.이다

타입스크립트가 실행되는 과정

일반적으로 타입스크립트를 실행하기 위해서 사용하는 ts.node 라이브러리를 사용한다.

이것이 TS파일을 JS로 변환을 한다는 것은 모두 알고 있을 것이다.

그럼 결국은 JS파일로 바뀐다는 것만 기억하면 된다.

근데 여기서 AST 자료구조라는 것을 알아야한다(.....)

추상구문트리라는 트리 자료구조인데... 아직 자료구조에 대한 공부가 모자르기도 하고
처음들어봐서 링크로 설명을 대신하려고 한다

자바스크립트 개발자를 위한 AST 이해하기

타입스크립트가 실행되는 과정

  1. 타입스크립트 코드를 실행함
  2. 타입스크립트 컴파일러를 통하여 TS AST 코드로 파싱 (엘라스틱서치마냥 토큰처럼 짤리는듯한 느낌)
  3. 타입체커를 통하여 파싱된 TS AST코드의 타입을 체크함 (정적언어리사 타입체크한다.)
  4. 타입체크가 완료된 TS AST 코드를 JS 코드로 변환
    ------------ 여기 위는 타입스크립트 컴파일러가 작업을 하고
  5. JS코드를 JS AST 코드로 파싱
  6. JS AST 코드를 바이트 코드로 변환
  7. 런타임에서 한줄 한줄씩 바이트코드를 실행
    ------------ 여기 위는 자바스크립트 런타임이 작업을 한다.

이렇게 생각해보면 정말 비효율적이라는 생각이 드는 것은 나뿐이 아닐 것이라 생각한다.
효율에 정신줄을 놓은 사람들이 개발자 아니겠는가(아닌가?)

굳이 컴파일을 하기 위해서 라이브러리를 깔아야할까?
그래서 나온 것이 디노라는 런타임이다.

(아마두)

그런데 여기서 짜잔, 디노의 등장!

사실 회사소개를 볼 때 마다 저 공룡은 뭘까 라는 생각을 하면서 검색해보지는 못했는데
(지금도 포화상태라 새로운 스택을 꾸겨넣기에는 시간이 모자랐다 ㅋㅋ)

방금 검색하면서, 새로운 런타임 그리고 타입스크립트를 바로 실행을 할 수 있다는 것을 알게 되었다.

이런 설명이 있어서, 원래 사실은 컴파일급으로 작업을 진행하는 줄 알았다.

적었다가 사라진 설명(...)

그래서 문서를 찾아보니 이러한 설명을 볼 수 있었다.

여기서 보실 수 있습니다. => https://deno.land/manual/typescript/overview

추가적인 라이브러리가 없이 실행이 되는 것이고, 결국은 JS로 변환되는 것은 동일하다. 라고 설명이 달려있다.

그래도 얘는 컴파일 언어처럼 작업이 되는지 한번 실행을 시킬 경우 파일이 하나 뿅하고 나온다고 하는 것보면
확실히 런타임 자체는 디노를 사용하는 쪽이 더 좋을 것이라 생각을 해보고 있다.

왜 자바스크립트가 아닌 타입스크립트를 사용할까?

이건 오늘(14일) 면접 질문을 받아서 추가로 적어놓는다.


정말 단순하다. (더 있긴 한데 정말 중요한 것 하나만)

동적 언어의 단점때문에 타입스크립트를 사용하는데.
정말 아래에 있는 코드만 보면 바로 알 수 있다...

숫자는 돈에 밀접한 관련이 있다.
숫자를 표현하는 일은 대부분 상당히 중요하고, 정렬이 되어있어야만 한다.

그런데 자바스크립트는 문자열숫자가 들어가면 숫자가 문자열로 바꿔버린다(.....)

개발을 하는 속도는 빠르겠지만, 예기치못한 사고가 발생할 수 있기 때문에 동적언어를 혐오하는 사람들이 많다.
엉망이면 돌아가질 말아야하는데 일단 돌아가서 문제를 일으킨다며(ㅋㅋ)
그래서 타입 선언을 해야만 하는 정적 언어인 타입스크립트를 사용하는 것을 권장하는 편이다.


profile
물류 서비스 Backend Software Developer

0개의 댓글