[Javascript] 자바스크립트 모듈에 대해

 

 

 

1. 모듈이란?

프로그래밍에서 모듈은 코드를 논리적으로 구분하고 구조화하는 독립적인 단위이다. 보통 특정 기능, 객체, 변수 또는 클래스와 같은 코드의 묶음을 말하는데 이렇게 모듈로 코드를 쪼개서 정리하면 다른 코드와의 결합성을 낮추고 재사용성을 높인다. 

 

2. ES6에서 모듈시스템

Javascript는 ES6에서 모듈시스템에 대한 표준이 도입되었다고 한다. export와 import라는 키워드를 통해 모듈화한 코드를 내보내고, 가져올 수 있게 되었다. 이 이전에는 AMD, CommonJS 등의 모듈시스템을 사용해왔지만 점점 사라지고 있는 추세이다.

• Export: 모듈 안에 선언한 변수, 함수 등을 다른 모듈에서 사용하고 싶을 때 export라는 키워드를 붙여서 내보낸다. 
• import: 다른 모듈에 선언한 변수, 함수 등을 import 키워드로 불러와서 사용한다. 

// log.js
const log = (str) => console.log(str);
export default log; // 하나의 기본항목만 export

// log2.js
export const log2 = (str) => console.log(str);
export const alertStr = (str) => alert(str);

// export만 사용은 여러개의 항목을 내보내기 한다.


// index.js
import log from './log.js' // 기본항목으로 export된 모듈 import
import {log2, alertStr} from './log2.js' // 모듈 내의 여러 함수 import

 

일반 스크립트와 모듈은 몇가지 차이점이 있는데, 그 특징으로는 아래와 같은 것들이 있다.

• 엄격 모드로 실행된다.
• 독립적인 모듈 레벨 스코프가 존재한다. 그렇기 때문에 export, import 없이 내부에 정의된 요소들에 접근할 수 없다.
• 단 한번만 평가된다.
• 모듈의 최상위 레벨의 this는 undefined이다

 

3. 모듈이 로딩되는 방식과 동적 모듈 로딩

모듈이 로딩될 때 정적, 동적 두가지 방식이 있는데 정적 모률로딩은 모듈을 프로그램 실행전에 모두 미리 로드해 놓는 방식이다. 

동적모듈로딩은 프로그램 실행 된 후에 해당 모듈이 필요한 순간에 모듈을 로드하는 방식이다. 모든 모듈을 모조리 로드해놓는 것이 아니라 그 때에 필요한 모듈만 로딩하기 때문에 초기 로딩 시간을 단축시키고, 성능을 향상 시킬 수 있다. 

 

4. 모듈 번들러

이렇게 여러 개로 쪼개서 작성된 모듈들을 번들링을 해줘야한다. 모듈 번들링을 하는 이유는 여러개의 모듈을 하나의 번들 파일로 만들어서 네트워크 요청 횟수를 줄이고 페이지 로딩 시간을 단축시킬 수 있기 때문이다. 모듈번들러는 번들링을 하면서 다양한 모듈 형식을 지원하여 브라우저 호환성에 맞춰 변환하고, 트리쉐이킹을 통해 사용되지 않는 코드들을 제거하여 번들 파일의 크기를 줄인다. 

여러가지 모듈 번들러들이 있는데 그중 유명하고 널리 사용되는 모듈 번들러로 Webpack, Parcel, Rollup 등이 있다.

 

5. CommonJS와 AMD

1) CommonJS

CommonJS는 Node.js 환경에서 사용되는 모듈 시스템인데, 동기적으로 모듈을 불러오고 내보내는 방식을 사용한다. 사용방법은 아래와 같다. 

// 모듈에서 변수나 함수를 내보내기
module.exports = {
  key: 'value',
  functionName: function() {
    // function body
  }
};

// 다른 모듈에서 모듈 사용하기
const myModule = require('./myModule');
console.log(myModule.key);
myModule.functionName();

CommonJS에서는 require() 함수를 통해 모듈을 import하고 module.exports = {} 객체를 통해서 모듈을 내보낸다. CommonJS는 주로 Node.js 런타임환경에서 사용되고, 브라우저에서 지원되지 않는다. 그렇기 때문에 CommonJS로 작성된 모듈은 번들러나 라이브러리를 통해서 브라우저에서 사용가능한 형태로 변환되어야 사용할 수 있다.

 

2) AMD

AMD 또한 모듈시스템의 한 종류로 주로 브라우저 환경에서 비동기적으로 모듈을 로드할 때 사용해왔다. 비동기적으로 모듈을 로드하기 때문에 초기 페이지 로드 시간을 단축시킨다. 

아래와 같은 문법으로 사용된다.

// 모듈 정의 및 의존성 명시
define(['dependency1', 'dependency2'], function(dep1, dep2) {
  // 모듈에서 사용할 코드 작성
  return {
    key: 'value',
    functionName: function() {
      // function body
    }
  };
});

// 다른 모듈에서 모듈 사용하기
require(['myModule'], function(myModule) {
  console.log(myModule.key);
  myModule.functionName();
});