모듈(Module)

모듈(Module)이란?

Javascript 파일 단위로 분리된 코드를 일컫는다.

여기서 Javascript 파일은 특정한 기능을 가진 여러 개의 함수와 변수들의 집합이다.

 

1. 모듈(Module)은 하나의 모듈에서 다른 모듈을 호출하여 사용할 수 있다.
2. 모듈(Module)은 그 자체로도 하나의 프로그램이면서 다른 프로그램의 부품으로도 사용할 수 있다.
3. 보통 1개의 파일이 1개의 모듈이 된다.

모듈의 필요성

1. 코드 베이스를 분리할 수 있으며, 이를 통해 코드를 구조적으로 관리할 수 있다.
2. 코드를 재사용 가능하게 만들어준다. 즉, 모듈화(modularize)된다.
3. 모듈의 인터페이스(Interface)만 노출 시킬 수 있다.
   즉, 인터페이스 이외에는 모든 정보를 은닉하는 정보은닉(information hiding)을 구현 할 수 있게 된다.
4. 종속성을 관리할 수 있게 된다.

CommonJS(CJS)

브라우저 이외의 환경에서 모듈을 사용할 수 있도록 고안된 명세.

설정을 따로 추가하지 않은 이상, Node.js에서는 CommonJS를 기본으로 사용하게 된다.

CommonJS는 전역 스코프에 정의 되어있는 require 함수로 대표된다. 

require 함수는 경로 혹은 문자열을 가지고 내부 알고리즘을 통해 모듈을 가져오고 종속성을 처리한다.

ECMA Script Module(ESM)

모든 Javascript 환경에서 통합적인 인터페이스를 제공하기 위해 시작된 체계.

CommonJS와는 다르게 정적으로 모듈을 가져오며 비동기적 모듈 로딩과 순환 종속을 처리한다.

 

모듈 사용법

export 명령어를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다.

import, require 명령어를 사용하면 외부 모듈의 기능을 가져올 수 있다.

 

CommonJS or ES6 모듈 관리 설정법

1. CommonJS

package.json에서 아무 설정도 안해주거나(default) type에 대해 commonjs로 설정하면 된다.

 

2. ES6

package.json에서 type에 대해 module로 설정해주면 된다.

 

import, require의 사용 구분법

• require - CommonJS
• import - ES6(ES2015)

 

모듈 사용예

(modules/math.js)
function add(a, b) {
  return a + b;
}

// 위에서 작성한 함수를 다른 모듈로 내보내주기 위해 아래 코드 추가
module.exports = add;

(modules/run.js)
const add = require('./math');  // .js는 생략 가능
console.log(add(3, 4));  // 7

 

모듈을 export하는 다양한 방법

1. 화살표 함수 exprots

/** 화살표 함수 exports **/

// 모듈을 호출했을 때, add 키 값에는 add 변수 함수가 가지고 있는 값이 할당된다.
const add = (a, b) => {
  return a + b;
}
exports.add = add;

2. 익명 함수 exports

/** 익명 함수 exports **/

// 모듈을 호출했을 때, add 키 값에 (a, b){return a + b;} 익명 함수가 할당되는 방법
exports.add = function (a, b) {
  return a + b;
}

위 경우 사용할 때 방법이 약간 달라지는데 

exports.add 이런식으로 밖으로 내보내줄 때는 함수가 아닌 객체로서 내보내주게 되어

(modules/run.js)
const add = require('./math');  // .js는 생략 가능
console.log(add.add(3, 4));  // 7

add.add() 와 같은 방법을 통해 사용해야 한다.

(modules/run.js)
const {add} = require('./math');  // .js는 생략 가능
console.log(add(3, 4));  // 7

하지만 객체 구조 분해 할당을 통해 위와 같이 {  }로 감싸 사용할 수 있다.

3. Module.exports = Object

/** Module.exports = Object **/

// 모듈을 호출했을 때, add 키 값에 add 함수가 들어가는 방법
function add(a, b) {
  return a + b;
}
module.exports = { add: add };

이 경우도 마찬가지로 객체로 내보내주게 되어 받아 쓸 때 

(modules/run.js)
const {add} = require('./math');  // .js는 생략 가능
console.log(add(3, 4));  // 7

{  }로 감싸 사용하면 된다.

4. module.exports = Function

/** module.exports = Function **/

// 모듈 그 자체를 add 함수로 할당
function add(a, b) {
  return a + b;
}
module.exports = add;

 

정리

// 1
exports.add = function(a, b) {
  return a + b;
}
// 2
module.exports = { add : add };
// 3
const add = (a, b) => {
  return a + b;
}
exports.add = add;

위 세가지 방법은 exports 객체의 add 키 값으로 add를 넣는다고 생각하면 되고

module.exports = add;

이 방법은 exports에 add 함수를 할당한다고 보면 된다.

이러면 꺼내 쓸 때 어떤 방법으로 사용할지를 쉽게 알 수 있다.