컴파일러(compiler) 의미, 바벨(Babel) vs 타입스크립트 컴파일러(TypeScript Compiler)

컴파일러가 무엇인지와 역할을 정리했고, 바벨을 사용하여 컴파일을 할 때와 타입스크립트 컴파일러로 컴파일할 때의 특징을 비교해보았다.

1. 컴파일러란

1-1. 컴파일러

특정 프로그래밍 언어를 다른 프로그래밍 언어로 옮기는 프로그램

1-2. 타입스크립트 컴파일러의 역할 2가지

1. 최신 타입스크립트/js 를 브라우저에서 동작할 수 있도록 구버전의 js로 *트랜스파일함.
2. 타입 체킹.

- 타입체킹과 컴파일은 독립적으로 동작하기 때문에, 타입 에러가 있는 코드도 컴파일이 가능함. 타입에러 났을 때 컴파일하지 않으려면 tsconfig.json에서 noEmitOnError를 설정하면 됨.
- 독립적이라 선언된 타입과 런타임 타입이 다를 수도 있음. 이런 상황을 최대한 피해야 함.

* TypeScript 컴파일러(tsc)는 TypeScript 파일(.ts)을 자바스크립트 파일로 트랜스파일링한다.
컴파일은 일반적으로 소스 코드를 바이트 코드로 변환하는 작업을 의미한다. TypeScript 컴파일러는 TypeScript 파일을 자바스크립트 파일로 변환하므로 컴파일보다는 트랜스파일링(Transpiling)이 보다 적절한 표현이다.

2. 바벨 vs 타입스크립트 컴파일러 사용하는 경우의 차이점

2-1. 바벨은 타입스크립트의 타입이 옳은지 확인하지 않고 버림

const birthday: number = "19930000"

바벨을 사용하여 오류나 경고 없이 컴파일되지만, ts에서는 컴파일되지 않음.

- 타입이 정확하지 않더라도 코드를 컴파일할 수 있기 때문에 빠른 프로토타이핑에는 좋은 방법이 됨

2-2. ts는 한 번에 전체 프로젝트 컴파일, 바벨은 한 번에 하나의 파일만 컴파일.

export enum LanguageCode { korean = "ko", english = "en", japanese = "ja", chinese = "zh", spanish = "es", } // 다른 파일에서 LanguageCode import if (something === LanguageCode.korean) { console.log("Korean") }

바벨은 한 번에 하나의 파일에만 액세스하므로 오류가 남.

2-3. 사용자 정의 변환

- 바벨은 확장성이 훨씬 뛰어남. 코드를 최적화하는 많은 플러그인이 있고, 사용되지 않은 import, 인라인 상수 등을 제거할 수 있음. ts에는 사용자 정의 변형을 허용하는 자체 transformer api가 있지만 , 바벨 환경에서 플러그인 선택이 폭이 더 넓고 액세스도 용이함.
- 사용자 정의 변환이 필요한 경우 babel 사용해야 함. 대부분의 ts 도구를 사용하면, ts를 사용하고 나중에 바벨을 통해 코드를 실행하여 두 가지 장점을 모두 확용 가능함. 물론 빌드 체인에 추가 복잡성을 가져옴.