모듈 번들러와 트랜스파일러

모듈 번들러

모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일로써
유지보수성, 네임스페이스화, 재사용성 문제를 해결하기 위해 사용한다.

프론트엔드 개발은 모듈단위로 파일을 엮어 개발하는 방식을 사용한다.

즉, 모듈 끼리 의존성을 띄고있는데 아래와 같은 문제들이 생긴다.

1. 많은 모듈들의 순서 처리(의존성 처리)
2. 모듈이 많아질수록 HTTP 요청이 많아저 발생하는 오버헤드 해결방법
3. ES6+ 스펙의 코드를 처리하는 방식

이러한 문제들을 해결하기 위해 나타난 것이

 모듈 번들러(Module Bundler)로 각각의 모듈 의존성을 해결해 하나의 JS 파일로 만드는 도구이다.

이미지 압축, 최소화 등의 여러가지 기능들도 제공하며 유명한 번들러는 Webpack, Parcel, Rollup 등이 있다.

 

 

트랜스파일러

트렌스파일링(Transpiling)이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위 를 의미하며,

이를 해주는 것이 트랜스파일러(Transpiler)이다.

트랜스파일러가 필요한 이유는 ES6+을 제공하지 않는 브라우저에서는 ES5 코드로 변환해 줄때 사용한다.

ES6+ 뿐만 아니라 React의 JSX를 JS코드로 변환할 때와

TS를 JS로 변환시키는 등의 역활도 트랜스파일러의 기능중 하나이다.

ES6+나 JSX를 변환시키는 트랜파일러로는 바벨(Babel)이 있으며,

TS를 변환시키는 도구로는 TS 트랜스파일러가 있다.

보통 프론트엔드 프레임워크 및 라이브러리를 사용해 개발할 때 모듈 번들러에 트랜스파일러를 추가해 사용한다.