Module의 이해

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와는 다르게 정적으로 모듈을 가져오며 비동기적 모듈 로딩과 순환 종속을 처리합니다.

아직 무슨 말인지 완전히 이해되지 않아도 괜찮습니다.

 

Module 사용방법

• export 명령어를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다.
• import, require 명령어를 사용하면 외부 모듈의 기능을 가져올 수 있습니다.

import, rquire의 구분

• 자바스크립트는 대표적으로 CommonJS, ES6(ES2015) 방식으로 모듈 시스템을 관리할 수 있습니다.
• require는 현재 학습하고 있는 CommonJS로 모듈 시스템을 관리할 때 사용합니다.
• import는 ES6(ES2015)로 모듈 시스템을 관리할 때 사용합니다.

→ ES6로 사용해보고 싶다면 여기를 클릭해서 확인해보세요

 

Module 사용해보기

• modules 폴더를 생성해 math.js, run.js 라는 파일을 생성합니다.
• 2가지의 인자를 입력받았을 때 값을 더해주는 함수를 생성합니다.

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

• 그리고 작성한 함수를 다른 모듈로 내보내주기 위해 하단에 코드를 추가합니다.

// modules/math.js
module.exports = add;

• run.js에서 불러들인 add함수를 사용하도록 작성합니다.

// modules/run.js
const add = require("./math");
console.log(add(3, 4));
// Print: 7

 

Module을 export하는 다양한 방법

• 화살표 함수 exports

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

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

• 익명 함수 exports

/** 익명 함수 exports **/

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

• Module.exports = Object

/** Module.exports = Object **/

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

• module.exports = Function

/** module.exports = Function **/

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