분리된 하나의 파일을 모듈이라고 한다.
이러한 모듈을 언제든지 불러오는 방법을 모듈 시스템이라고 한다.
js에서 모듈 시스템이 있기 전에는 브라우저에서 script파일을 선언해서 불러 올 수 있다.
하지만 이러한 방법은 하나의 파일에 있는 것처럼 전역 스코프를 공유하게 된다.
즉 전역 스코프를 공유한다는 문제점이 생긴다.
//a.js
let number = 10//b.js
let number = 20//index.html
<script src="./a.js"></script>
<script src="./b.js"></script>
<script>
console.log('number: ', number);
</script>
//number: 20number를 콘솔에 출력했을 때 20이 출력됨을 확인할 수 있다.
b.js파일을 가장 마지막에 불러왔기때문에 덮어씌여졌다.
이처럼 실제로 파일은 나누어져있지만 브라우저에서 동작할때는 마치 하나의 파일에 있는것처럼 동작하게 된다.
이렇게 이름이 같은 변수명이 있는 경우 의도하지 않은 값이 출력될 수 있다.
애플리케이션의 규모가 커지면 커질 수록 파일을 각각 호율적으로 분리하는것이 중요하다.
모듈은 독립적으로 자신만의 스코프를 갖기때문에 문제를 해소할 수 있다.
코드의 양이 많아질 수 록 전역스코프에 존재하는 변수명이 겹칠 수 있다.
이때 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제를 해결할 수 있다.
재사용성 : 같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 재활용할 수 있다.
[모듈 시스템 종류]
| 제정 시기 | ES6에 제정됨 | ESM 이전의 대표적인 비표준 |
| 문법(Node 기준) | import / export | require / module.export |
| Node.js 지원 여부 | Yes | Yes |
| Browser 지원 여부 | 최신 브라우저에서 지원 | CommonJs.js 로딩 필요 |
- AMD: 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해 처음 개발되었다.
- CommonJS : NodeJS 환경을 위해 만들어진 모듈 시스템이다.
- UMD: AMD와 CommonJS와 같은 모듈 시스템을 함께 사용하기 위해 만들어졌다.
- ES Module: ES6(ES2015)에 도입된 자바스크립트 모듈 시스템이다.
[ES6 모듈 시스템]
type="module"
모듈 시스템을 활용해서 해결하기 전에 script파일에 type="module"을 지정한다면 해당파일은 모듈로 간주하게 된다.
이 경우 number의 값은 출력이 되지 않는다. 이유는 각각의 모듈별로 스코프를 갖게 된다.
해당 파일안에서 선언한 것은 파일 안에서만 사용할 수 있다.
//index.html
<script type="module" src="./a.js"></script>
<script type="module" src="./b.js"></script>
<script type="module">
console.log('number: ', number);
</script>
//Uncaught ReferenceError: number is not defined
ES6 모듈 시스템 불러오기
각각 모듈의 자원을 가져올 수 있다.
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="./index.js"></script>
</head>
<body>
</body>
</html>
//index.js
// import * as math from './math.js'
// console.log('perfectScore: ', math.perfectScore);
// console.log('sum: ', math.sum(80, 10));
// console.log('avg: ', math.avg(40, 40));
import { perfectScore, sum, avg } from './math.js'
console.log('perfectScore: ', perfectScore);
console.log('sum: ', sum(80, 10));
console.log('avg: ', avg(40, 40));
ES6 모듈 시스템 내보내기
모듈에서는 변수나 함수 또는 클래스 자원을 내보낼 수 있다.
//math.js
export const perfectScore = 100
export const sum = (num1, num2) => {
return num1 + num2
}
export const avg = (num1, num2) => {
return (num1 + num2) / 2
}
내보내기 1
하나의 기본 함수 내보내기. 단, 모듈 당 하나만 가능
export default 함수명
//index.js
const subtract = (num1, num2) => {
return num1 - num2
}
export default subtract;
default를 함수로 선언한 경우에는 default 함수를 import받을 수 있다.
default함수는 이름을 마음대로 지정할 수 있다.
//math.js
//import subtract from './math.js'
import subtract2 from './math.js' //함수 명 무관
console.log('subtract: ', subtract(100, 20));
내보내기 2
ES모듈로 내보낼 때 각각의 함수나 변수를 따로 내보낼 수 도 있지만 하나의 기본값으로도 전달 할 수 있다.
//index.js
import math from './math.js'
console.log('perfectScore: ', math.perfectScore);
console.log('sum: ', math.sum(80, 10));
console.log('avg: ', math.avg(40, 40));
console.log('subtract: ', math.subtract(100, 20));
//perfectScore: 100
//sum: 90
//avg: 40
//subtract: 80
//math.js
const perfectScore = 100
const sum = (num1, num2) => {
return num1 + num2
}
const avg = (num1, num2) => {
return (num1 + num2) / 2
}
const subtract = (num1, num2) => {
return num1 - num2
}
export default {
perfectScore,
sum,
avg,
subtract,
};
[CommonJS 방식]
NodeJS 환경에서 자바스크립트 모듈을 사용하기 위해 만들어진 모듈 시스템이다.
모듈을 외부에서 사용할 수 있도록 내보낼 때: exports, module.exports
외부에서 모듈을 불러올 때: require
내보내기1
//math.js
exports.perfectScore = 100
exports.sum = (num1, num2) => {
return num1 + num2
}
exports.avg = (num1, num2) => {
return (num1 + num2) / 2
}
exports.subtract = (num1, num2) => {
return num1 - num2
}
내보내기2
하나의 객체처럼 내보내기
//math.js
const perfectScore = 100
const sum = (num1, num2) => {
return num1 + num2
}
const avg = (num1, num2) => {
return (num1 + num2) / 2
}
const subtract = (num1, num2) => {
return num1 - num2
}
module.exports = {
perfectScore,
sum,
avg,
subtract,
};
불러오기1
전개구문으로 받아올 때는 객체명 제거 후 사용
//index.js
const { perfectScore, sum, avg, subtract } = require('./math')
console.log('perfectScore: ', perfectScore);
console.log('sum: ', sum(80, 10));
console.log('avg: ', avg(40, 40));
console.log('subtract: ', subtract(100, 20));
불러오기2
하나의 객체로도 받아올 수 있다.
//index.js
const math = require('./math')
console.log('perfectScore: ', math.perfectScore);
console.log('sum: ', math.sum(80, 10));
console.log('avg: ', math.avg(40, 40));
console.log('subtract: ', math.subtract(100, 20));
실행결과
node index.js
perfectScore: 100
sum: 90
avg: 40
subtract: 80
[ES Module for Node JS]
Node JS환경에서 ES모듈 시스템을 활용해보기
ES모듈을 사용하려면 트렌스컴파일러를 사용했었어야 했는데, 버전이 올라가면서 정식 지원이 시작됐다.
사용법1.
package.json -> type="module"선언
//package.json
{
"type": "module"
}
'programming language > Node.js' 카테고리의 다른 글
| AWS_S3 client 배포하기 (1) | 2022.12.01 |
|---|---|
| React 로그인 API _ 2 (서버만) (0) | 2022.11.06 |
| express 사용해 보자! (0) | 2022.10.24 |
| Webpack (0) | 2022.09.20 |
| Node.js (0) | 2022.09.20 |
댓글