파면 팔수록 넘 헷갈려서 다시 정리함
commonJS는 2009년에 만들어짐
가져올 때
const {name} = require("../name.js");
내보낼 때
exports.name = "something";
es5표준을 기반으로
node의 모듈 시스템을 위해 만들어짐
(require문 자체는 commonJS에서 만듦)
아무튼 commonjs는 node"서버"를 위한 모듈 시스템임
동기적으로 동작함
모든 모듈이 순서대로 로드, 실행됨
// counter.js
let count = 0; // 모듈의 비공개 변수
module.exports = {
increment: function() {
count += 1;
return count;
},
decrement: function() {
count -= 1;
return count;
},
getCount: function() {
return count;
}
};const counter = require('./counter');
console.log(counter.getCount()); // 0
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount()); // 1
이렇게 생김
counter.js 모듈은 클로저를 사용해서 count 변수를 비공개 상태로 유지하면서
increment() 등 여러 메서드들을 외부에 제공함
count 변수는 모듈 내부에서만 접근 가능함
프론트도 es6 나오기 전까지 이걸 썼음
근데 브라우저는 애석하게도 require문을 못 읽음
node에서 사용하는 commonJS 모듈 시스템 일부이지 애초에 브라우저를 위한 게 아니었기 때문임
그래서 require문을 쓰는게 아니라
script에서 불러서 사용했음
var MathModule = (function() {
var privateVariable = 0;
function add(x, y) {
return x + y;
}
function subtract(x, y) {
return x - y;
}
return {
add: add,
subtract: subtract
};
})();
module.exports 로 내보내는 게 아니라 그냥 저렇게 전역으로 선언된 걸 가져오는 거임
만약 모듈이 module.exports로 선언되어 있는 경우에는 브라우저에서 쓸 수 없기 때문에
- Browserify: Node.js의 require와 module.exports를 브라우저에서 사용할 수 있게 번들링해주는 도구입니다.
- Webpack: 모듈 번들러로, 다양한 모듈 시스템(CommonJS, AMD, ES6 모듈 등)을 지원합니다.
이런걸 사용했음...
번들로 만들어서
npx browserify app.js -o bundle.js
html에 끼워넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math Module Example</title>
</head>
<body>
<h1>Math Module Example</h1>
<script src="bundle.js"></script> <= 이렇게 부름
</body>
</html>
웹팩도 번들링하면서 바꾸어주니 비슷한 과정으로 바꿔줬을 듯
그럼 라이브러리는 어떻게 만들었을까
모두 commonJS로?
js 생태계에서 모듈 시스템이 다양해지기 시작했음
commonJS
AMD
ESM
그러다보니까 앞서 말한 라이브러리 만들 때
어떤 형식으로 만들어야하는지 호환성 문제가 있었음
commonJS 환경 맞추랴 브라우저 환경 맞추랴 힘듦
그래서 이를 위해 UMD가 나옴 (2011)
commonjs / amd / 전역변수 방식 모두 사용 가능하게끔 설계됨
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD 환경
define([], factory);
} else if (typeof module === 'object' && module.exports) {
// CommonJS 환경 (Node.js)
module.exports = factory();
} else {
// 브라우저 글로벌 변수
root.MyModule = factory();
}
}(typeof self !== 'undefined' ? self : this, function () {
// 모듈 본문
return {
// 모듈의 공개 메서드와 속성들
};
}));
이렇게 생김
'TIL' 카테고리의 다른 글
| 싱글톤 (0) | 2024.08.04 |
|---|---|
| 클로저 - hof - 리액트 - hoc - class (0) | 2024.08.04 |
| tanstack Query v5 (0) | 2024.07.28 |
| 타입스크립트 never, 컨디셔널 타입 (0) | 2024.07.27 |
| jest 2 테스트 종류 (1) | 2024.07.21 |
댓글