모듈 번들러와 트랜스파일러에 대해서 알아보겠습니다💚
모듈 번들러
현대의 프론트엔드 개발은 모듈단위로 파일 엮어서 개발하는 방식입니다. 즉, 모듈은 서로 의존성을 띄고 있는데 이런 점에서 다음과 같은 문제들이 생깁니다.
- 수많은 모듈들의 순서를 어떻게 처리할 것인가? (의존성 처리)
- 모듈이 많아질수록 HTTP 요청이 많아질텐데 이로 인한 오버헤드는 어떻게 해결할 것인가?
- ES6+ 스펙의 코드를 어떻게 처리할 것인가?
위 문제들을 해결하기 위해 등장한 것이 모듈 번들러(Module Bundler)로 각각의 모듈 의존성에 해결하여 하나의 자바스크립트 파일로 만듦과 동시에 ES6+ 스펙을 ES5로 변환까지 해주는 도구 입니다. 이미지 압축, 최소화(Minification) 등의 여러가지 기능들도 제공하며 유명한 번들러로는 Webpack, Rarcel, Rollup 등이 있습니다.
트랜스파일러
트랜스파일러(Transpiling)이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위를 말하며 이를 해주는 것이 트랜스파일러(Transpiler)입니다. 트랜스파일러가 필요한 이유는 모든 브라우저가 ES6+의 기능을 제공하지 않기 때문에 이를 ES5 코드로 변환시키는 과정이 필요합니다.
트랜스파일러는 이 작업을 수행해 주고 있습니다. 사실 ES6+의 기능 뿐만 아니라 리액트의 JSX를 자바스크립트코드로 변환시킨다거나 타입스크립트를 자바스크립트로 변환시크는 등의 역할도 트랜스파일러의 기능 중에 하나입니다. ES6+나 JSX를 변환시키는 트랜스파일러로는 바벨(Babel)이 있으며 타입스크립트를 변환시키는 도구로는 타입스크립트 트랜스파일러가 있습니다. 보통 프론트엔드 프레임워크 및 라이브러리를 사용해서 개발할 때 모듈 번들러에 트랜스파일러를 추가해서 사용하는 방식을 사용합니다.
참고
