자바 스크립트를 여러 파일로 쪼갠 것을 모듈이라고 하며, 여러 모듈을 효과적으로 분리하고 불러와 사용하기 위해 모듈 시스템이 만들어졌다. 자주 사용하는 모듈 시스템으로는 CommonJS와 ES Module이 있다.
ES Module
ES6(ES2015)에 도입된 자바스크립트 모듈 시스템이며, <script> 태그에 type="module" 속성을 추가해주면 이 파일은 모듈로서 동작한다.
모듈을 외부에서 사용할 수 있도록 내보낼 때는 export, export default와 같은 키워드를 사용하며, 외부에서 모듈을 불러올 때는 import를 사용한다.
프론트엔드 단에서 주로 사용한다.
/* math.js */
export const perfectScore = 100;
export const sum = (num1, num2) => {
return num1 + num2;
};
const avg = (num1, num2) => {
return (num1 + num2)/2;
};
export default avg;math.js의 함수와 변수를 내보내기 위해 export 키워드를 사용했다.
/* index.js */
import { perfectScore, sum } from './math.js';
console.log(perfectScore, "/", sum(80, 10));index.js에서 math.js의 함수와 변수를 import한 뒤, 그 값을 사용하여 출력했다.
<!-- index.html -->
<html>
<head>
<title>hello</title>
<script type="module" src="./index.js"></script>
</head>
<body>
</body>
</html>index.js를 모듈화하여 불러오고, 이 html을 실행하면 100/90 이라는 로그를 조회할 수 있다.
/* index2.js */
import avgtemp from './math.js';
console.log(avgtemp(80, 10)); //45export default로 선언된 함수 avg는 다른 이름으로 호출하더라도 오류 없이 호출이 가능하다.
/* math2.js */
const perfectScore = 100;
const sum = (num1, num2) => {
return num1 + num2;
};
const avg = (num1, num2) => {
return (num1 + num2)/2;
};
export default {
perfectScore,
sum,
avg
};위의 js같이 export default를 여러개 선언하는 것도 가능하다.
/* index3.js */
import * as math from './math.js';
console.log(math.perfectScore, "/", math.sum(80, 10), "/", math.avg(80, 90));import문 안에 별칭을 지정하여 모든 것을 불러올 수 있고, 이 때는 별칭.함수 혹은 별칭.변수 와 같이 사용해야 한다.
CommonJS
NodeJS 환경에서 자바스크립트 모듈을 사용하기 위해 만들어진 모듈 시스템이다. (NodeJS에서 기본으로 설정) 모듈을 내보낼 때는 exports, module.exports 키워드를 사용하며, 외부에서 모듈을 불러올 때는 require를 사용한다.
NodeJS 13.2부터 ES모듈 시스템에 대한 정식 지원이 시작되었다. 노드는 실행할 때 package.json을 참고하기 때문에 package.json 선언한 뒤 { "type" : "module" } 을 적어주면 NodeJS 환경에서도 ES Module사용할 수 있다.
/* math.js */
exports.perfectScore = 100;
exports.sum = (num1, num2) => {
return num1 + num2;
};
exports.avg = (num1, num2) => {
return (num1 + num2)/2;
};math.js의 함수와 변수를 내보내기 위해 exports 키워드를 사용했다.
/* index.js */
const { perfectScore, sum, avg } = require('./math.js');
console.log(perfectScore, "/", sum(80, 10));/* index2.js */
const math = require('./math.js');
console.log(math.perfectScore, "/", math.sum(80, 10));변수와 함수를 각각 불러오거나, 하나의 변수로 묶어서 불러올 수 있다.
/* math2.js */
const math = {};
math.perfectScore = 100;
math.sum = (num1, num2) => {
return num1 + num2;
};
math.avg = (num1, num2) => {
return (num1 + num2)/2;
};
module.exports = math;/* math2.js */
const perfectScore = 100;
const sum = (num1, num2) => {
return num1 + num2;
};
const avg = (num1, num2) => {
return (num1 + num2)/2;
};
module.exports = {
perfectScore,
sum,
avg
};내보낼 때부터 하나의객체로 묶어서 내보낼 수 있다.
이 포스팅은 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의를 수강하며 작성되었습니다.
[지금 무료] 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의 | 짐코딩 - 인프
짐코딩 | 이 강의를 통해 Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다., 백그라운드 지식을 확실히 알아야,진짜 프론트엔드 개발자가 될 수 있어요
www.inflearn.com
'JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 웹팩 (Webpack) (0) | 2024.06.30 |
|---|---|
| [JavaScript] 자바스크립트 모듈 시스템 (0) | 2024.06.25 |
| [JavaScript] NPM 명령어 (0) | 2024.06.23 |
| [JavaScript] NPM (Node Package Manager) (0) | 2024.06.19 |
| [JavaScript] Array API (배열 API) (0) | 2024.06.16 |
