ETC - transpile (트랜스파일) 과 compile (컴파일) 의 비교

ETC

:transpile 과 compile의 비교

잘못된 내용이나, 오타 피드백 환영합니다!

| 시작하기에 앞서

transpile과 compile 이라는 두 용어를 헷갈린 적이 한두번이 아니고 잘못 사용하고 있는 케이스들을 봐서, 내용을 다시 한번 되짚어 보려합니다. 

프론트엔드 개발을 하다보면 자주 babel이나 typescript를 자주 언급하게 됩니다. 또한, 이들을 설명할때는 compile 혹은 transplie이라는 용어를 종종 사용 하게 됩니다.  

우선, babel은 javascript transpiler 입니다. 또한 그다음으로, 타입스크립트 역시도 많이 접하실 텐데요, 타입스크립트가 자바스크립트로 컴파일 되는것인가, 트랜스파일 되는것인가는 아래에서 다시 언급하겠습니다.

| transpile vs compile

트랜스 파일과 컴파일을 같은 개념으로 사용하기도 하는데, 약간의 차이가 있습니다.

> compile

컴파일의 경우는, 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것을 의미 합니다.

예를 들어, 컴파일 하는 경우는 아래와 같습니다.

• Java -> bytecode
• c -> assembly

> transpile

트랜스파일 의 경우는 한언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 말합니다.

예를 들어, 트랜스파일하는 경우는 아래와 같습니다.

• es6 코드 -> es5 코드로 변환하는 경우
• c++ -> c 
• coffescript  -> javascript

Q) 그럼 transpile 하는 상황에서 compile 한다고 설명하는 것은 옳지 않은 설명인가?

저는 정답은 NO 라고 말하고 싶습니다.

https://en.wikipedia.org/wiki/Source-to-source_compiler 옆의 링크를 참조해보면, transpiler는 다른 말로 source to source compiler 라고도 설명하기도 하며, 컴파일러의 일종으로 트랜스파일러를 설명하고 있습니다. 따라서 compile이라는 용어가 더 큰 범주에 속하게 되고, 그 안에 transpile이라는 개념이 있게 되는것이죠.

| 더 생각해보기

> typescript (transpiler or compiler?)

그리고 많이 언급되는 typescript 의 경우는 javascript로 변환되는데, 뭉뚱 그려 많은 사이트에서는 컴파일링 된다고는 하지만, 거의 같은 수준의 추상화가 되는것이라 더 정확히 말하면 트랜스파일링 된다고 말할 수 있습니다.

> sass 에 쓰인 transpile (or compile )개념

sass는 웹에서 직접 동작할 수 없습니다. 따라서 전처리기로 작성 후 css로 compile (or transpile )하는 과정을 거쳐야 사용할수 있게 되는 것입니다. 다양한 방법으로 컴파일이 가능하지만 자바스크립트 개발환경에서는 node-sass를 활용하여 주로 컴파일을 하게 됩니다. 따라서 scss 코드를 작성할때 node-sass npm을 설치했던 것입니다.

| 결론

위 글을 읽어보면 알 수 있듯 서로 개념 상 차이가 있긴 하지만, 혼용하여 사용할수도 있는 케이스 들이 존재하여, 사실 컴파일이냐 트랜스파일이냐를 구분 짓는것은 크게 중요하지는 않은 것 같습니다. 하지만, 컴파일과 트랜스파일을 많이 혼용하여 사용하는 만큼, 적절한 상황에 맞춰 용어를 사용하는 것이 좋을 것 같습니다 :)