[Frontend] 모듈 번들러와 트랜스파일러

취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다.

 

✅ 모듈 번들러

모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다.

현대의 프론트엔드 개발은 모듈 단위로 파일을 엮어서 개발하는 방식이다.

다르게 말하면 모듈은 서로 의존성을 가지고 있다는 것이다.

이러한 점에서 다음과 같은 문제들이 생긴다.

• 모듈들의 순서를 어떻게 유지하고 처리할 것인지
• 모듈이 많아질 수록 HTTP 요청도 늘어나는데 이로 인한 오버헤드를 어떻게 처리할 것인지
• 같은 이름의 모듈이 존재할 경우 어떻게 처리할 것인지
• ES6+의 코드들을 어떻게 처리할 것인지

위 문제들을 해결하기 위해 등장한 것이 모듈 번들러이다.

 

모듈 번들러(Module Bundler)는 웹 애플리케이션을 동작시키기 위한 서로 연관 관계가 있는 웹 구성 자원(HTML, CSS, JavaScript, Image, Font 등)을 모두 각각의 모듈로 보고 이들의 의존성을 관계에 따라 묶고 조합하여 합쳐진 하나의 결과물을 만들어준다.

또한 ES6+ 스펙의 코드를 ES5로 변환까지 해준다.

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

 

 

✅ 트랜스파일러

트랜스파일(Transpile)이란 어떤 특정 언어로 작성된 소스코드를 다른 소스코드로 변환하는 것을 말한다.

이를 두고 보면 컴파일과 비슷해 보이는데 약간의 차이가 있다.

컴파일은 특정 언어로 작성된 소스코드를 다른 언어로 변환하는 것이지만 트랜스파일은 특정 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것이다.

예를 들자면 SCSS -> CSS, TypeScript -> JavaScript가 트랜스파일에 해당한다.

 

트랜스파일러(Transpiler)는 트랜스파일을 해준다.

트랜스파일러가 필요한 이유는 모든 브라우저가 같은 기능을 제공하고 있지 않기 때문이다.

ES6+의 코드를 ES5로 변경한다거나 리액트의 JSX를 JavaScript 코드로 변경한다던가 하는 것이 트랜스파일러의 역할이다.

ES6+나 JSX를 변환시키는 트랜스파일러로는 바벨(Babel)이 있으며 타입스크립트를 변환시키는 도구로는 타입스크립트 트랜스파일러가 있다.

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

 

 

🔍 참조

What is module bundler and how does it work https://dev.to/tanhauhau/what-is-module-bundler-and-how-does-it-work-3gp2

웹팩이란 https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80

트랜스파일이란 https://ooz.co.kr/416