모듈

모듈이란 분리되어진 자바스크립트 파일을 말합니다.

모듈 시스템

분리된 자바스크립트 파일을 효과적으로 불러올 수 있게 하는 방법입니다.

모듈 시스템 사용하지 않고 분리된 자바스크립트 불러오기

모듈이 있기전 자바스크립트는 <script></script> 태그로 불러왔습니다.

<!-- index.html -->
<script src='test1.js'></script>
<script src='test2.js'></script>
<script>
  console.log(number)
  // 1
</script>

// './test1.js'
let number = 0;

// './test2.js'
let number = 1;

하지만 <script></script>를 사용하여 불러온 자바스크립트 파일들은 하나의 파일에 있는 것처럼 전역 스코프를 공유한다는 단점이 있습니다.

모듈 시스템 사용하기

<script></script> 태그 안에 type="module" 태그를 넣고 태그 사이에 import를 사용해 가져올 수 있습니다.

<!-- index.html -->
<script type="module">
  import number1 from './test1.js'
  import number2 from './test2.js'
  
  console.log(number1)
  // 0
  console.log(number2)
  // 1
</script>

분리된 자바스크립트에서는 export를 사용해 자원을 내보낼 수 있습니다.

// './test1.js'
let number = 0;

export default number;

// './test2.js'
let number = 1;

export default number;

ES Module

ES6에 도입된 자바스크립트 모듈 시스템입니다.
내보낼 때 Default Export와 Named Export 방식이 있습니다.

선언

<!-- index.html -->
<script type="module" src='./test1.js'></script>

사용법

Default Export

default를 사용하여 한번에 내보낼수 있습니다.

// ./test1.js
let number = 0;

let sum = (number1, number2) => {
	return number1 + number2;
};


export default {number, sum};

원하는 이름으로 불러올 수 있습니다.

// ./test2.js
import test from './test1.js';


console.log('number', test.number)
// 0
console.log('sum', test.sum(10, 20))
// 30

Named Export

각각의 변수와 함수를 내보낼 수 있습니다.

// ./test1.js
export let number = 0;

export let sum = (number1, number2) => {
	return number1 + number2;
};

불러올 때는 내보낼 때 변수 등의 이름과 같아야 합니다.

// ./test2.js
import {number, sum} from './test1.js';


console.log('number', number)
// 0
console.log('sum', sum(10, 20))
// 30

Named Export & Default Export

Named Export와 Default Export를 혼합해서 사용할 수 있습니다.
하지만 Default Export는 단 하나만 사용할 수 있습니다.

// ./test1.js
export let number = 0;

let sum = (number1, number2) => {
	return number1 + number2;
};


export default sum;

// ./test2.js
import test, {number} from './test1.js';


console.log('number', number)
// 0
console.log('sum', test.sum(10, 20))
// 30

별칭을 지정하여 Named Export를 Default Export처럼 불러올 수도 있습니다.
각각의 변수와 함수를 내보낼 수 있습니다.

// ./test1.js
export let number = 0;

export let sum = (number1, number2) => {
	return number1 + number2;
};

// ./test2.js
import * as test from './test1.js';


console.log('number', test.number)
// 0
console.log('sum', test.sum(10, 20))
// 30

CommonJS

NodeJS환경에서 JS모듈을 사용하기 위해 만들어진 모듈 시스템입니다.
내보낼 때 exports, module.exports와 같은 키워드를 사용합니다.
불러올 때 require를 사용합니다.

exports

각각의 변수와 함수를 내보낼 수 있습니다.

// ./test1.js
exports.number = 0;

exports.sum = (number1, number2) => {
	return number1 + number2;
};

// ./test2.js
const test = require('./test1.js');


console.log('number', test.number)
// 0
console.log('sum', test.sum(10, 20))
// 30

하나의 객체로 한번에 불러올 수 있습니다.

// ./test1.js
exports.number = 0;

exports.sum = (number1, number2) => {
	return number1 + number2;
};

// ./test2.js
const {number, sum} = require('./test1.js');


console.log('number', number)
// 0
console.log('sum', sum(10, 20))
// 30

module.exports

각각의 변수와 함수를 하나의 객체로 묶어서 내보낼 수 있습니다.

// ./test1.js
const number = 0;

const sum = (number1, number2) => {
	return number1 + number2;
};


module.exports = {
	number,
  	sum,
}

// ./test2.js
const {number, sum} = require('./test1.js');


console.log('number', number)
// 0
console.log('sum', sum(10, 20))
// 30

NodeJS에서 ES Module 사용하기

NodeJS 13.2버전 부터 사용가능합니다.

• package.json에서 {type: "module"} 선언

cjs vs. mjs vs. js

NodeJS에서 CommonJS 모듈 시스템은 cjs파일로 사용하여 사용할 수 있고,
ES Module 시스템은 mjs파일을 통해 사용할 수 있습니다.
CommonJS 모듈 시스템과 ES Module 시스템 모두 사용하려면 js파일을 사용하시면 됩니다.