모듈 번들러와 트랜스파일러
📂 모듈 번들러(Module Bundler)
모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS, Image 등)을 모두 각각의 모듈로 보고, 이를 조합해서 병합된 하나의 결과물을 만드는 도구.
Module
여러 기능들에 관한 코드가 모여있는 하나의 파일.
사칙연산을 하는 계산기를 예로 들면 사칙연산 4가지 기능을 계산기라는 파일로 관리하는 하나의 모듈이라고 볼 수 있다.
모듈 번들러를 쓰는 이유
현대의 프론트엔드 개발은 모듈 단위로 파일을 엮어서 개발하는 방식이기 때문에 모듈이 서로 의존성을 띄고 있어 다음과 같은 문제가 생긴다.
- 수많은 모듈들의 순서를 어떻게 처리할 것인가? (의존성 처리)
- 모듈이 많아질수록 HTTP 요청이 많아질텐데 이로 인한 오버헤드는 어떻게 해결할 것인가?
- ES6+ 스펙의 코드를 어떻게 처리할 것인가?
위 문제들을 해결하기 위해 등장한 것이 모듈 번들러로 유명한 번들러로는 Webpack, Parcel, Rollup 등이 있다.
🔧 트랜스파일러(Transpiler)
트랜스파일링(Transpiling)
트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위를 말하며, 이를 위한 도구가 트랜스파일러이다.
트랜스파일러를 쓰는 이유
모든 브라우저가 ES6+의 기능을 제공하지는 않기 때문에 이를 ES5 코드로 변환시키는 과정이 필요하고, 트랜스파일러가 이 작업을 수행해준다. 사실 ES6+의 기능 뿐만 아니라 리액트의 JSX를 자바스크립트 코드로 변환시킨다거나 타입스크립트를 자바스크립트로 변환시키는 등의 역할도 트랜스파일러의 기능 중에 하나이다.
ES6+나 JSX를 변환시키는 바벨(Babel), 타입스크립트를 변환시키는 타입스크립트 트랜스파일러(Typescript Transpiler) 등의 트랜스파일러가 있다. 보통 프론트엔드 프레임워크 및 라이브러리를 사용해서 개발할 때 모듈 번들러에 트랜스파일러를 추가해서 사용하는 방식을 사용한다.
transpile vs compile
compile
한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것을 의미
Java->bytecodec=>assembly
transpile
한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 의미
es6코드 ->es5코드c++->ctypescript->javascript
참고 사이트
https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/bundler-transpiler.md
