[CS Study] Compile, Transpile, Interpreter, Bundler

개요

• Compile
• Transpile
• Interperter
• Bundler

---

컴파일 (Compile)

한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것

• Java => bytecode, C => assembly
• 고수준의 언어를 바이트 단위의 기계어로 변환하는 것 뿐만 아니라 한 언어로 작성된 코드를 다른 언어로 옮기는 일 자체를 통칭한다

컴파일 과정

---

트랜스파일 (Transpile)

한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것

• ES6 => ES5, C++ => C, coffescript => javascript
• Javascript transpiler  : Babel, Typescripte Compiler, ESBuild 

 

VS Compile)

컴파일이 좀 더 큰 범주이고 그 안에 트랜스파일의 개념이 있다.

---

인터프리터 (Interpreter)

사람이 알아보기 쉬운 프로그래밍 언어로 작성한 코드를 한 줄씩 즉시 기계어로 번역하는 번역기

• 프로그램 실행 시 한번에 한 문장씩 번역한다.
• 한 줄씩 번역하고 실행하므로 실행 시간이 느리다.
• 컴파일러보다 메모리 효율이 좋다.
• 실행 중 오류를 만나게 되면 바로 프로그램을 종료한다.
• 대표언어 Python, Ruby, Javascript

VS Compiler)

고수준의 프로그래밍언어를 저수준의 언어로 변환하는 대표적인 2가지 인터프리터, 컴파일러

 

컴파일러)

• 프로그래밍 전체를 스캔하여 모두 기계어로 번역
• 기계어 번역과정에서 많은 메모리를 사용
• 전체 스캔을 통해 초기 스캔이 오래걸리지만 통합적으로 인터프리터보다 빠르다
• 전체 코드를 검사한 후 오류 메시지를 생성하기에 실행 전에 오류를 발견할 수 있다.
• 대표언어 C, C++, JAVA

---

번들러 (Bundler)

여러개의 파일을 하나의 파일로 묶어주는 도구로써 시간이 흐름에 따라서 웹사이트의 규모가 커지고 컨텐츠가 많아짐에 따라서 많은 파일이 구성됨에 따라 생기는 문제점을 해결하기 위해 등장함

 

Webpack)

• 간편하고 직관적인 설정
• 풍부한 plugin과 loader
• 강력한 개발서버
  • HMR을 통해 브라우저를 직접 새로고침하지 않아도 소스코드의 변화를 감지하여 변화를 반영해준다
• Code Splitting
  • 파일들을 여러 번들 파일로 분리하여 병렬로 스크립트를 로드한다.
  •  페이지로딩속도 개선할 수 있다
  • 초기 구동에 필요없는 코드를 분리하여 lazy loading을 통해 초기 로딩속도 개선

Vite)

• native ES modules 기반의 강력한 개발서버
• esbuild로 파일을 통합하고 rollup을 통해 번들링

 

 

 

 

 

 

 

 

 

 

 

 

 

참고자료 : 블로그1 , 블로그2