모듈

모듈이란

프로그램을 구성하는 구성요소의 일부를 말합니다.

  *큰 애플리케이션을 구성하는 코드로 이루어진 작은 파일들 각각이라고 보면 됩니다.

모듈의 장점은 다음과 같습니다.

• 유지보수성 : 모듈화가 잘 된 기능들은 의존성이 낮아, 기능 개선 및 수정이 용이합니다.
• 네임스페이스화 : 네임 스페이스가 모듈 단위로 나뉘어져 변수나 함수명이 겹쳐서 발생하는 문제를 해결할 수 있습니다.
  *네임스페이스: 이름공간으로, 여기서 같은 변수명을 가지면 같은 개체를 가리킵니다.
• 재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다.

CommonJS(CJS)

서버사이드 및 데스크탑 어플리케이션에서 JS를 지원하기 위해서 탄생했습니다.

  *즉, Node.js 환경을 위해 만들어졌습니다.

모듈을 가져올 때 require, 모듈을 내보낼 때는 module.exports를 사용합니다.

// a.js
const printHelloWorld = () => {
  console.log('Hello Wolrd');
};

// 내보내기
module.exports = {
  printHelloWorld
};

// b.js
// 가져오기
const func = require('./a.js'); 
func.printHelloWorld();

• 여기서 module.exports의 module은 현재 모듈에 대한 정보를 갖고 있는 객체입니다.
• 그 안에 id, path, parent 등의 속성이 있고 exports 객체를 가지고 있다.

exports vs module.exports

• 둘의 관계를 간략하게 코드로 나타내면 다음과 같습니다.
  결국 module.exports나, exports나 module.exports를 반환합니다.

// module.exports
var module = {
	exports: {}
};

// exports
var exports = module.exports;

return module.exports;

exports.a = function(num) { return num };
exports.b = function(num) { return -num};

// -- 둘은 동일하게 module.exports 멤버에 키값 a, b를 가지고 추가됩니다.

module.exports = { 
	a: function(num) { return num },
	b: function(num) { return -num},
}

 

ES6 module(ESM)

ES6에 도입된 모듈 시스템입니다.

• import, export를 사용해 분리된 자바스크립트 파일끼리 서로 접근할 수 있습니다.
• 스크립트 내 다음과 같은 속성을 추가해야 모듈로 사용할 수 있습니다.
• <script type="module"></ script>
  *이렇게 하면 각각의 모듈별로 스코프를 갖게 됩니다.

export 방식은 다음과 같습니다.

• default export
  : 모듈 내에서 단 한번만 쓸 수 있습니다.

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

import A from 'moduleA';
// 꼭 'A'가 아니어도 모듈 이름을 임의로 정해도 됩니다.
// import 어쩌구저쩌구 from 'moduleA';

• named export
  : 모듈 내에서 여러번 쓸 수 있습니다.

export const B = () => {};

// export한 변수명과 일치해야 하며, 중괄호 속에 들어가 있어야 합니다.
import {B} from 'moduleB';

 

 

CJS 모듈 시스템을 채택했던 NodeJS 환경에서 ESM을 사용할 수 있습니다(v13.2 부터 정식 지원).

// package.json
...
{
	"type": "module",
	...
}
...

 

 

 

 

 

 

 

 

 

 

[참고자료]

[JS] 모듈에 대한 이해와 사용법

자바스크립트 모듈 시스템 | ES 모듈 | CommonJS 모듈 | 프론트엔드 날개달기