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

모듈이란?

모듈이란 여러기능들에 관한 코드들이 한데 모여있는 파일로서 다음과 같은 용도로 사용됩니다.

 

• 유지보수성 : 기능들이 모듈화가 잘되어 있다면, 의존성을 그만큼 줄일수 있기 때문에 어떤기능을 개선한다거나 수정할 때에 훨씬 편하게 할 수있다.
• 네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드가 길어지다보면 네임이 겹치는 경우가 발생한다. 이때 모듈화를 하면 중복되는 변수를 줄일수 있다. 각 모듈만의 네임스페이스를 가지기 때문이다.
• 재사용성 : 똑같은 코드를 반복하여 사용하지않고 모듈로 분리 시켜서 재사용 할 수 있다.

이러한 장점들로 자바스크립트에서는 모듈을 만들고자 하는 여러 시도들이 있었다. CommonJS, AMD, UMD 및 ES6 등 다양한 방식중 ES6에 관하여 알아보자.

 

ES6(ES2015) 방식

import 와 export를 사용하는 방식이다. 모든 브라우저를 지원하는 것이 아니기 때문에 Babel의 @babel/plugin-transform-modules-commonjs 를 이용해서 변환해서 사용한다. 

 

• moduleA.js

const A = () => {}; 
export default A;

 

• moduleB.js

export const B = () => {};

 

• index.js

import A from 'moduleA'; 
import { B } from 'moduleB';

moduleA에서는 default export를 사용하였고, moduleB에서는 named export를 사용하였다. 

default export는 모듈내에서 한번만 사용가능하며 이름그대로 import 할 수 있는 반면 

named export는 모듈내에서 여러번 사용가능하며 {} 로 묶어서 사용가능하다.

 

 

---

모듈번들러

 

현대의 프론트앤드 개발은 모듈단위로 파일을 엮어서 개발하는 방식이다. 즉,  모듈은 서로 의존성을 띄고 있어서 다음과 같은 문제들을 발생시킨다.

 

• 수많은 모듈들의 순서를 처리하는 방법 (의존성 처리)
• 모듈이 많아질 수록 HTTP 요청이 많아질 텐데 이로 인한 오버헤드는 어떻게 해결할 것인가?
• ES6+ 스펙의 코드를 어떻게 처리할 것인가?  

위 문제들을 해결하고자 한 것이 모듈 번들러로 각각의 모듈의존성을 해결하여 하나의 자바스크립트 파일로 만듦과 동시에 ES6+ 스펙을 ES5로 변환까지 해주는 도구이며 다른 부가기능도 들어있다. 대표적인 모듈 번들러로는 Webpack, Parcel, Rollup 등이 있다.

 

모듈번들러의 과정

 

모듈의 의존관계를 분석하여 브라우저가 인식할 수 있는 자바스크립트로 변환해준다.

예를 들어 다음과 같은 모듈이 있다고 해보자

 

import { x } from "otherModule";

export const y = x + 10;

 

위 코드를 모듈번들러는 브라우저가 인식할 수 있도록 일반적인 함수로 변환해준다.

 

function (require, module, exports) {
  var { x } = require("otherModule");
  exports.y = x + 10;
}

 

이렇게 코드를 함수의 형태로 변환한다음 변환된 함수들이 직접 서로 참조 할 수 있도록 파일을 하나로 합친다. 이러한 과정이 모듈 번들러의 주된 과정이다. 

 

 

 

---

트랜스파일러

트랜스파일링(Transpiling) 이란 특정언어를 다른언어로 변환하는 작업을 말하며 이를 가능하게 해주는 것이 트랜스 파일러이다. 모든 브라우저가 ES6+의 기능을 제공하지 않기 때문에 이를 ES5코드로 변환시키는 작업이 필요하다. 이외 리액트의 JSX파일을 자바스크립트 파일로 변환하거나 타입스크립트를 자바스크립트로 변환하는 기능도 트랜스파일러의 기능이다. 대표적으로 ES6+를 ES5로, JSX파일을 자바스크립트 파일로 변환하는 기능을 가진 Babel이 있으며 타입스크립트를 자바스크립트로 변환해주는 타입스크립트 트랜스파일러가 있다.

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

 

참고

 

github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/module.md

baeharam/Must-Know-About-Frontend

github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/bundler-transpiler.md

baeharam/Must-Know-About-Frontend