๐ CJS, AMD, UMD, ESM์ ๋ชฉ์
์ฒ์ JS๋ ๋ชจ๋๋ก ๊ฐ์ ธ์ค๊ฑฐ๋ ๋ด๋ณด๋ด๋ ๋ฐฉ๋ฒ์ด ์์ด, ํ๋์ ํ์ผ์ ๋ชจ๋ ๊ธฐ๋ฅ์ ๋ด์์ผ ํ๋ค.
JS ํ๋ก๊ทธ๋จ์ ๋ชจ๋๋ก ๊ฐ๋ฐํ๊ณ , ๋ฐฐํฌํ ์ ์๊ฒ ํ๊ธฐ ์ํ์ฌ,
CJS, AMD, UMD, ESM์ ๊ฐ๋ฐํ๋ค.
๐ CJS (CommonJS)
javascript๋ฅผ ๋ธ๋ผ์ฐ์ ์์๋ง ์๋๋ผ, ๋ค๋ฅธ ๊ณณ์์๋ ์ฌ์ฉํ ์ ์๊ฒ ํด์ฃผ๋ API
API๋?
[ํ๋ก๊ทธ๋๋ฐ] API๋?
API๋? ์๋ก ๋ค๋ฅธ ํ๋ก๊ทธ๋จ๋ผ๋ฆฌ ์ฐ๊ฒฐํด์ฃผ๋ ๋๊ตฌ Application Programming Interface ์ฑ ํ๋ก๊ทธ๋๋ฐ ์ธํฐํ์ด์ค API ์์ REST API : ์๋ฒ์ ํด๋ผ์ด์ธํธ๋ฅผ ์ฐ๊ฒฐ GraphQL API : ์๋ฒ์ ํด๋ผ์ด์ธํธ๋ฅผ ์ฐ๊ฒฐ
defineall.tistory.com
CJS ๊ตฌ๋ฌธ ( ์ฌ์ฉ๋ฒ )
// require๋ฅผ ํตํด ๋ชจ๋์ ๋ณ์์ ๋ด์ ์ ์๊ฒ ๋์๋ค
var lib = require('package/lib');
// ๊ฐ์ ธ์จ ๋ชจ๋์ ์ฌ์ฉํ ์ ์๊ฒ ๋์๋ค.
function foo() {
lib.log('hello world!');
}
// foo ํจ์๋ฅผ ๋ค๋ฅธ ํ์ผ์์ ์ฌ์ฉํ ์ ์๋๋ก, ๋ค๋ฅธ ๋ชจ๋๋ก ์ถ์ถํ ์ ์๊ฒ ๋์๋ค
exports.foobar = foo;
CJS ํน์ง - ๋๊ธฐ์ ๋ฐฉ์์ ์ฌ์ฉํ๋ค.
๋๊ธฐ์ ๋ฐฉ์์ด๋?
[ํ๋ก๊ทธ๋๋ฐ] ๋๊ธฐ์ฒ๋ฆฌ, ๋น๋๊ธฐ์ฒ๋ฆฌ ๋?
๋๊ธฐ(synchronous) ์ฒ๋ฆฌ ์ด์ ์์ ์ด ๋๋์ผ, ๋ค์ ์์ ์ ์ฒ๋ฆฌํ๋ ๋ฐฉ์ ๋น๋๊ธฐ(asynchronous) ์ฒ๋ฆฌ ์ฌ๋ฌ ์์ ์ ๋์์ ์ฒ๋ฆฌํ๋ ๋ฐฉ์ // ์คํธ๋ฆฌ๋ฐ๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ ๋ฐฉ์์ค์ ํ๋๋ค.
defineall.tistory.com
๋๊ธฐ์ ๋ฐฉ์ ์์
var foo = require('foo');
var bar = require('bar');
foo.log('It is foo');
bar.log('It is bar');
// ์ถ๋ ฅ ๊ฒฐ๊ณผ
It is foo
It is bar
CJS๋ฅผ ์ฌ์ฉํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- Node.js
- PINF
๐ AMD (Asynchronous Module Definition)
CommonJS๋ ๋ชจ๋ ํ์ผ์ด ๋ก์ปฌ ๋์คํฌ์ ์์ด, ํ์ํ ๋ ๋ฐ๋ก ๋ถ๋ฌ์ฌ ์ ์๋ ์ํฉ์์๋ง ์ฌ์ฉํ๋ค.
๋ธ๋ผ์ฐ์ ์์ ์ด๋ฐ ๋ฐฉ์์ ์ฌ์ฉํ๋ฉด, ํ์ํ ๋ชจ๋์ด ๋ชจ๋ ๋ค์ด๋ก๋๋ ๋๊น์ง ์๋ฌด๊ฒ๋ ํ ์ ์๋ค.
๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋์ ์ฌ์ฉํ๋ API์ธ, AMD๋ฅผ ๋ง๋ค์๋ค.
AMD ๊ตฌ๋ฌธ ( ์ฌ์ฉ๋ฒ )
// myModule.js
// define์ ์ด์ฉํด ์๋ก์ด ๋ชจ๋์ ๋ถ๋ฌ์ค๊ณ , ์ฝ๋ฐฑํจ์๋ก ์ ํด์ค
define(['package/lib'], function (lib) {
// ์ฝ๋ฐฑํจ์ ์ด์ฉํด์, ๋ถ๋ฌ์จ ๋ชจ๋ ์ฌ์ฉ๊ฐ๋ฅ
function foo () {
lib.log('hello world!');
}
// ๋ค๋ฅธํ์ผ์์ fooํจ์๋ฅผ, foobar์ด๋ ์ด๋ฆ์ ๋ชจ๋๋ก ๋ถ๋ฌ์ฌ ์ ์๊ฒ ๋ง๋ฌ
return {
foobar: foo
};
});// ์์์ ์ ์ธํ ๋ชจ๋ ๋ถ๋ฌ์ค๊ธฐ
require(['package/myModule'], function (myModule) {
myModule.foobar();
});AMD๋ฅผ ์ฌ์ฉํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- RequireJS
- PINF
๐ UMD (Univarsal Module Definition)
AMD์ CommonJS๊ฐ ์๋ก ํธํ๋์ง ์๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ API
UMD ๊ตฌ๋ฌธ ( ์ฌ์ฉ๋ฒ )
(function (root, factory) {
if(typeof define === 'function' && define.amd) {
// define์ด ํจ์์ด๊ณ , define.amd๊ฐ ์กด์ฌํ ๋ AMD์ฌ์ฉ
define(['exports', 'b'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// export๊ฐ ๊ฐ์ฒด์ด๊ณ , export.nodeName์ด ๋ฌธ์์ด์ด ์๋๋, CommonJS์ฌ์ฉ
factory(exports, require('b'));
} else {
//Browser globals
factory((root.commonJsStrict = {}), root.b);
}
}(this, function (exports, b) {
// use b in some fashion.
// attach properties to the exports object to define
// the
exports.action = function () {};
}));UMD ํน์ง - ์ฌ๋ฌ ๋ชจ๋ ๋ก๋์์ ์ฌ์ฉ ๊ฐ๋ฅ
AMD์ CommonJS์์ ๋ชจ๋ ์ฌ์ฉ๊ฐ๋ฅํ๋ค.
AMD - ํด๋ผ์ด์ธํธ ์ฌ์ด๋
CommonJS - ์๋ฒ ์ฌ์ด๋
๐ ESM (ECMAScript Module)
ES6๋ถํฐ ์ถ๊ฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ๊ธฐ๋ฅ
ESM ๊ตฌ๋ฌธ ( ์ฌ์ฉ๋ฒ )
// import, from ๊ตฌ๋ฌธ์ ์ฌ์ฉํ ์ ์๋ค!
import lib from 'package/lib';
function foo () {
lib.log('hello world!');
}
export {
foobar: foo
};ESM ํน์ง - javascript ์์ฒด ๋ชจ๋ ์์คํ
ECMAScript์์ ์ง์ํ๋ ์๋ฐ ์คํฌ๋ฆฝํธ ๊ณต์ ๋ชจ๋
import์ export๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ง์ผ๋ฏ๋ก, ๋ฒ๋ค๋ฌ๋ฅผ ํจ๊ป ์ฌ์ฉํด์ผํ๋ค.
<script> ํ๊ทธ์ type="module"์ ์ ์ธํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ชจ๋๋ก ์ฌ์ฉํ ์ ์๋ค.
์ด๋, ๋ชจ๋์ด๋ผ๋ ๊ฒ์ ์ ํํ ํํํ๊ธฐ ์ํด mjs ํ์ฅ์๋ฅผ ์ฌ์ฉํ๋๋ก ๊ถ์ฅํ๋ค.
ESM ์ฌ์ฉ๋ฒ
<html>
<body>
<script type="module" src="foo.mjs"></script>
<script type="module" src="foo.mjs"></script>
</body>
</html>// foo.mjs
var x = 'foo';
console.log(x); // foo
console.log(window.x);// bar.mjs
// import๋ฅผ ์ฌ์ฉํด, ๋ชจ๋์ ๋ถ๋ฌ์จ๋ค
import test from "./module.mjs";
console.log(test);
var x = 'bar';
console.log(x);
console.log(window.x);// module.mjs
const test = 'hello world';
// export๋ฅผ ์ฌ์ฉํด, ๋ชจ๋๋ก ๋ด๋ณด๋ผ ์ ์๋ค.
export default test;
๋ฐ์ํ
