ECMAScript ๋ชจ๋(ESM)๊ณผ ๊ทธ ์ค์, ์ด์ , ๊ธ๋ก๋ฒ ์ํํธ์จ์ด ๊ฐ๋ฐ ํ์ ์ํ ์ค์ ๊ตฌํ์ ์ด์ ์ ๋ง์ถ JavaScript ๋ชจ๋ ํ์ค์ ๋ํ ํฌ๊ด์ ์ธ ๊ฐ์ด๋์ ๋๋ค.
JavaScript ๋ชจ๋ ํ์ค: ๊ธ๋ก๋ฒ ๊ฐ๋ฐ์๋ฅผ ์ํ ECMAScript ์ค์
๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ์ธ๊ณ์์ JavaScript ๋ชจ๋์ ์ฝ๋๋ฅผ ๊ตฌ์ฑํ๊ณ ๊ตฌ์กฐํํ๋ ๋ฐ ํ์ ๋ถ๊ฐ๊ฒฐํ ์์๊ฐ ๋์์ต๋๋ค. ๋ชจ๋์ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ์ค์ํ ์ฌ์ฌ์ฉ์ฑ, ์ ์ง ๊ด๋ฆฌ์ฑ ๋ฐ ํ์ฅ์ฑ์ ํฅ์์ํต๋๋ค. ์ด ํฌ๊ด์ ์ธ ๊ฐ์ด๋๋ JavaScript ๋ชจ๋ ํ์ค, ํนํ ECMAScript ๋ชจ๋(ESM), ๊ทธ ์ค์, ์ด์ ๋ฐ ์ค์ ๊ตฌํ์ ๋ํด ์์ธํ ์ค๋ช ํฉ๋๋ค. ๋ค์ํ ๊ธ๋ก๋ฒ ๊ฐ๋ฐ ํ๊ฒฝ์์ ์ต์ ๊ฐ๋ฐ ์ํฌํ๋ก์์ ESM์ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ๋ ๋ฐฉ๋ฒ๊ณผ ์ญ์ฌ, ๋ค์ํ ๋ชจ๋ ํ์์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
JavaScript ๋ชจ๋์ ๊ฐ๋ตํ ์ญ์ฌ
์ด๊ธฐ JavaScript์๋ ๊ธฐ๋ณธ ์ ๊ณต ๋ชจ๋ ์์คํ ์ด ์์์ต๋๋ค. ๊ฐ๋ฐ์๋ ๋ชจ๋์ฑ์ ์๋ฎฌ๋ ์ด์ ํ๊ธฐ ์ํด ๋ค์ํ ํจํด์ ์์กดํ์ฌ ์ ์ญ ๋ค์์คํ์ด์ค ์ค์ผ ๋ฐ ๊ด๋ฆฌํ๊ธฐ ์ด๋ ค์ด ์ฝ๋๋ฅผ ์ด๋ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์์ต๋๋ค. ๋ค์์ ๊ฐ๋จํ ํ์๋ผ์ธ์ ๋๋ค.
- ์ด๊ธฐ (๋ชจ๋ ์ด์ ): ๊ฐ๋ฐ์๋ ์ฆ์ ํธ์ถ๋๋ ํจ์ ํํ์(IIFE)๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ๊ฒฉ๋ฆฌ๋ ๋ฒ์๋ฅผ ๋ง๋ค์์ง๋ง ์ด ์ ๊ทผ ๋ฐฉ์์๋ ๊ณต์ ๋ชจ๋ ์ ์๊ฐ ๋ถ์กฑํ์ต๋๋ค.
- CommonJS:
require๋ฐmodule.exports๋ฅผ ์ฌ์ฉํ์ฌ Node.js์ฉ ๋ชจ๋ ํ์ค์ผ๋ก ๋ฑ์ฅํ์ต๋๋ค. - ๋น๋๊ธฐ ๋ชจ๋ ์ ์(AMD): ๋ธ๋ผ์ฐ์ ์์ ๋น๋๊ธฐ ๋ก๋ฉ์ ์ํด ์ค๊ณ๋์์ผ๋ฉฐ RequireJS์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํจ๊ป ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค.
- ์ ๋๋ฒ์ค ๋ชจ๋ ์ ์(UMD): CommonJS ๋ฐ AMD์ ๋ชจ๋ ํธํ๋๋ ๊ฒ์ ๋ชฉํ๋ก ๋ค์ํ ํ๊ฒฝ์์ ์๋ํ ์ ์๋ ๋จ์ผ ๋ชจ๋ ํ์์ ์ ๊ณตํฉ๋๋ค.
- ECMAScript ๋ชจ๋(ESM): ECMAScript 2015(ES6)์ ๋์ ๋์ด JavaScript์ ๋ํ ํ์คํ๋ ๊ธฐ๋ณธ ์ ๊ณต ๋ชจ๋ ์์คํ ์ ์ ๊ณตํฉ๋๋ค.
๋ค์ํ JavaScript ๋ชจ๋ ํ์ ์ดํด
ESM์ ์์ธํ ์ดํด๋ณด๊ธฐ ์ ์ ๋ค๋ฅธ ์ฃผ์ ๋ชจ๋ ํ์์ ๊ฐ๋ตํ๊ฒ ๊ฒํ ํด ๋ณด๊ฒ ์ต๋๋ค.
CommonJS
CommonJS(CJS)๋ ์ฃผ๋ก Node.js์์ ์ฌ์ฉ๋ฉ๋๋ค. ๋๊ธฐ์ ๋ก๋ฉ์ ์ฌ์ฉํ๋ฏ๋ก ํ์ผ ์ก์ธ์ค๊ฐ ์ผ๋ฐ์ ์ผ๋ก ๋น ๋ฅธ ์๋ฒ ์ธก ํ๊ฒฝ์ ์ ํฉํฉ๋๋ค. ์ฃผ์ ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
require: ๋ชจ๋์ ๊ฐ์ ธ์ค๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.module.exports: ๋ชจ๋์์ ๊ฐ์ ๋ด๋ณด๋ด๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
์์ :
// moduleA.js
module.exports = {
greet: function(name) {
return 'Hello, ' + name;
}
};
// main.js
const moduleA = require('./moduleA');
console.log(moduleA.greet('World')); // ์ถ๋ ฅ: Hello, World
๋น๋๊ธฐ ๋ชจ๋ ์ ์(AMD)
AMD๋ ๋น๋๊ธฐ ๋ก๋ฉ์ ์ํด ์ค๊ณ๋์์ผ๋ฉฐ ๋คํธ์ํฌ๋ฅผ ํตํด ๋ชจ๋์ ๋ก๋ฉํ๋ ๋ฐ ์๊ฐ์ด ๊ฑธ๋ฆด ์ ์๋ ๋ธ๋ผ์ฐ์ ์ ์ ํฉํฉ๋๋ค. ์ฃผ์ ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
define: ๋ชจ๋๊ณผ ํด๋น ์ข ์์ฑ์ ์ ์ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.- ๋น๋๊ธฐ ๋ก๋ฉ: ๋ชจ๋์ด ๋ณ๋ ฌ๋ก ๋ก๋ฉ๋์ด ํ์ด์ง ๋ก๋ ์๊ฐ์ด ํฅ์๋ฉ๋๋ค.
์์ (RequireJS ์ฌ์ฉ):
// moduleA.js
define(function() {
return {
greet: function(name) {
return 'Hello, ' + name;
}
};
});
// main.js
require(['./moduleA'], function(moduleA) {
console.log(moduleA.greet('World')); // ์ถ๋ ฅ: Hello, World
});
์ ๋๋ฒ์ค ๋ชจ๋ ์ ์(UMD)
UMD๋ CommonJS ๋ฐ AMD ํ๊ฒฝ ๋ชจ๋์์ ์๋ํ๋ ๋จ์ผ ๋ชจ๋ ํ์์ ์ ๊ณตํ๋ ค๊ณ ์๋ํฉ๋๋ค. ํ๊ฒฝ์ ๊ฐ์งํ๊ณ ์ ์ ํ ๋ชจ๋ ๋ก๋ฉ ๋ฉ์ปค๋์ฆ์ ์ฌ์ฉํฉ๋๋ค.
์์ :
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define([], factory);
} else if (typeof module === 'object' && module.exports) {
// CommonJS
module.exports = factory();
} else {
// ๋ธ๋ผ์ฐ์ ์ ์ญ (root๋ window)
root.myModule = factory();
}
}(typeof self !== 'undefined' ? self : this, function () {
return {
greet: function(name) {
return 'Hello, ' + name;
}
};
}));
ECMAScript ๋ชจ๋(ESM): ์ต์ ํ์ค
ECMAScript 2015(ES6)์ ๋์ ๋ ESM์ JavaScript์ ๋ํ ํ์คํ๋ ๊ธฐ๋ณธ ์ ๊ณต ๋ชจ๋ ์์คํ ์ ์ ๊ณตํฉ๋๋ค. ์ด์ ๋ชจ๋ ํ์์ ๋นํด ๋ช ๊ฐ์ง ์ฅ์ ์ด ์์ต๋๋ค.
- ํ์คํ: JavaScript ์ธ์ด ์ฌ์์ ์ ์๋ ๊ณต์ ๋ชจ๋ ์์คํ ์ ๋๋ค.
- ์ ์ ๋ถ์: ESM์ ์ ์ ๊ตฌ์กฐ๋ฅผ ํตํด ๋๊ตฌ๋ ์ปดํ์ผ ์๊ฐ์ ๋ชจ๋ ์ข ์์ฑ์ ๋ถ์ํ์ฌ ํธ๋ฆฌ ์์ดํน ๋ฐ ๋ฐ๋ ์ฝ๋ ์ ๊ฑฐ์ ๊ฐ์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ๋น๋๊ธฐ ๋ก๋ฉ: ESM์ ๋ธ๋ผ์ฐ์ ์์ ๋น๋๊ธฐ ๋ก๋ฉ์ ์ง์ํ์ฌ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
- ์ํ ์ข ์์ฑ: ESM์ CommonJS๋ณด๋ค ์ํ ์ข ์์ฑ์ ๋ ํจ์จ์ ์ผ๋ก ์ฒ๋ฆฌํฉ๋๋ค.
- ๋ ๋์ ๋๊ตฌ: ESM์ ์ ์ ํน์ฑ์ผ๋ก ์ธํด ๋ฒ๋ค๋ฌ, ๋ฆฐํฐ ๋ฐ ๊ธฐํ ๋๊ตฌ๊ฐ ์ฝ๋๋ฅผ ์ดํดํ๊ณ ์ต์ ํํ๊ธฐ๊ฐ ๋ ์ฝ์ต๋๋ค.
ESM์ ์ฃผ์ ๊ธฐ๋ฅ
import ๋ฐ export
ESM์ import ๋ฐ export ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ ์ข
์์ฑ์ ๊ด๋ฆฌํฉ๋๋ค. ์ฃผ์ ๋ด๋ณด๋ด๊ธฐ ์ ํ์ ๋ ๊ฐ์ง์
๋๋ค.
- ๋ช ๋ช ๋ ๋ด๋ณด๋ด๊ธฐ: ๋ชจ๋์์ ์ฌ๋ฌ ๊ฐ์ ๋ด๋ณด๋ผ ์ ์์ผ๋ฉฐ ๊ฐ ๊ฐ์๋ ํน์ ์ด๋ฆ์ด ์์ต๋๋ค.
- ๊ธฐ๋ณธ ๋ด๋ณด๋ด๊ธฐ: ๋จ์ผ ๊ฐ์ ๋ชจ๋์ ๊ธฐ๋ณธ ๋ด๋ณด๋ด๊ธฐ๋ก ๋ด๋ณด๋ผ ์ ์์ต๋๋ค.
๋ช ๋ช ๋ ๋ด๋ณด๋ด๊ธฐ
์์ :
// moduleA.js
export const greet = (name) => {
return `Hello, ${name}`;
};
export const farewell = (name) => {
return `Goodbye, ${name}`;
};
// main.js
import { greet, farewell } from './moduleA.js';
console.log(greet('World')); // ์ถ๋ ฅ: Hello, World
console.log(farewell('World')); // ์ถ๋ ฅ: Goodbye, World
as๋ฅผ ์ฌ์ฉํ์ฌ ๋ด๋ณด๋ด๊ธฐ ๋ฐ ๊ฐ์ ธ์ค๊ธฐ์ ์ด๋ฆ์ ๋ฐ๊ฟ ์๋ ์์ต๋๋ค.
// moduleA.js
const internalGreeting = (name) => {
return `Hello, ${name}`;
};
export { internalGreeting as greet };
// main.js
import { greet } from './moduleA.js';
console.log(greet('World')); // ์ถ๋ ฅ: Hello, World
๊ธฐ๋ณธ ๋ด๋ณด๋ด๊ธฐ
์์ :
// moduleA.js
const greet = (name) => {
return `Hello, ${name}`;
};
export default greet;
// main.js
import greet from './moduleA.js';
console.log(greet('World')); // ์ถ๋ ฅ: Hello, World
๋ชจ๋์๋ ๊ธฐ๋ณธ ๋ด๋ณด๋ด๊ธฐ๊ฐ ํ๋๋ง ์์ ์ ์์ต๋๋ค.
๋ช ๋ช ๋ ๋ด๋ณด๋ด๊ธฐ์ ๊ธฐ๋ณธ ๋ด๋ณด๋ด๊ธฐ ๊ฒฐํฉ
๋์ผํ ๋ชจ๋์์ ๋ช ๋ช ๋ ๋ด๋ณด๋ด๊ธฐ์ ๊ธฐ๋ณธ ๋ด๋ณด๋ด๊ธฐ๋ฅผ ๊ฒฐํฉํ ์ ์์ง๋ง ์ผ๊ด์ฑ์ ์ํด ํ๋์ ์ ๊ทผ ๋ฐฉ์์ ์ ํํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์์ :
// moduleA.js
const greet = (name) => {
return `Hello, ${name}`;
};
export const farewell = (name) => {
return `Goodbye, ${name}`;
};
export default greet;
// main.js
import greet, { farewell } from './moduleA.js';
console.log(greet('World')); // ์ถ๋ ฅ: Hello, World
console.log(farewell('World')); // ์ถ๋ ฅ: Goodbye, World
๋์ ๊ฐ์ ธ์ค๊ธฐ
ESM์ import() ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ๋์ ๊ฐ์ ธ์ค๊ธฐ๋ ์ง์ํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ฐํ์์ ๋ชจ๋์ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ํ ์ ์์ผ๋ฉฐ, ์ด๋ ์ฝ๋ ๋ถํ ๋ฐ ์ฃผ๋ฌธํ ๋ก๋ฉ์ ์ ์ฉํ ์ ์์ต๋๋ค.
์์ :
async function loadModule() {
const moduleA = await import('./moduleA.js');
console.log(moduleA.default('World')); // moduleA.js์ ๊ธฐ๋ณธ ๋ด๋ณด๋ด๊ธฐ๊ฐ ์๋ค๊ณ ๊ฐ์
}
loadModule();
ESM ์ค์: ๋ธ๋ผ์ฐ์ ๋ฐ Node.js
ESM์ ์ต์ ๋ธ๋ผ์ฐ์ ๋ฐ Node.js์์ ๋๋ฆฌ ์ง์๋์ง๋ง ๊ตฌํ ๋ฐฉ์์๋ ๋ช ๊ฐ์ง ์ฃผ์ ์ฐจ์ด์ ์ด ์์ต๋๋ค.
๋ธ๋ผ์ฐ์
๋ธ๋ผ์ฐ์ ์์ ESM์ ์ฌ์ฉํ๋ ค๋ฉด <script> ํ๊ทธ์ type="module" ์์ฑ์ ์ง์ ํด์ผ ํฉ๋๋ค.
<script type="module" src="./main.js"></script>
๋ธ๋ผ์ฐ์ ์์ ESM์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ์ผ๋ฐ์ ์ผ๋ก Webpack, Rollup ๋๋ Parcel๊ณผ ๊ฐ์ ๋ชจ๋ ๋ฒ๋ค๋ฌ๊ฐ ์ข ์์ฑ์ ์ฒ๋ฆฌํ๊ณ ํ๋ก๋์ ์ ๋ง๊ฒ ์ฝ๋๋ฅผ ์ต์ ํํด์ผ ํฉ๋๋ค. ์ด๋ฌํ ๋ฒ๋ค๋ฌ๋ ๋ค์๊ณผ ๊ฐ์ ์์ ์ ์ํํ ์ ์์ต๋๋ค.
- ํธ๋ฆฌ ์์ดํน: ์ฌ์ฉํ์ง ์๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํ์ฌ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค.
- ์ถ์: ์ฑ๋ฅ์ ํฅ์์ํค๊ธฐ ์ํด ์ฝ๋๋ฅผ ์์ถํฉ๋๋ค.
- ํธ๋์คํ์ผ๋ง: ์ด์ ๋ธ๋ผ์ฐ์ ์์ ํธํ์ฑ์ ์ํด ์ต์ JavaScript ๊ตฌ๋ฌธ์ ์ด์ ๋ฒ์ ์ผ๋ก ๋ณํํฉ๋๋ค.
Node.js
Node.js๋ ๋ฒ์ 13.2.0๋ถํฐ ESM์ ์ง์ํฉ๋๋ค. Node.js์์ ESM์ ์ฌ์ฉํ๋ ค๋ฉด ๋ค์ ์ค ํ๋๋ฅผ ์ํํ ์ ์์ต๋๋ค.
- JavaScript ํ์ผ์
.mjsํ์ผ ํ์ฅ์๋ฅผ ์ฌ์ฉํฉ๋๋ค. package.jsonํ์ผ์"type": "module"์ ์ถ๊ฐํฉ๋๋ค.
์์ (.mjs ์ฌ์ฉ):
// moduleA.mjs
export const greet = (name) => {
return `Hello, ${name}`;
};
// main.mjs
import { greet } from './moduleA.mjs';
console.log(greet('World')); // ์ถ๋ ฅ: Hello, World
์์ (package.json ์ฌ์ฉ):
// package.json
{
"name": "my-project",
"version": "1.0.0",
"type": "module",
"dependencies": {
...
}
}
// moduleA.js
export const greet = (name) => {
return `Hello, ${name}`;
};
// main.js
import { greet } from './moduleA.js';
console.log(greet('World')); // ์ถ๋ ฅ: Hello, World
ESM๊ณผ CommonJS ๊ฐ์ ์ํธ ์ด์ฉ์ฑ
ESM์ด ์ต์ ํ์ค์ด์ง๋ง ๊ธฐ์กด Node.js ํ๋ก์ ํธ ์ค ์๋น์๋ ์ฌ์ ํ CommonJS๋ฅผ ์ฌ์ฉํฉ๋๋ค. Node.js๋ ESM๊ณผ CommonJS ๊ฐ์ ์ด๋ ์ ๋์ ์ํธ ์ด์ฉ์ฑ์ ์ ๊ณตํ์ง๋ง ์ค์ํ ๊ณ ๋ ค ์ฌํญ์ด ์์ต๋๋ค.
- ESM์ CommonJS ๋ชจ๋์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
import๋ฌธ์ ์ฌ์ฉํ์ฌ CommonJS ๋ชจ๋์ ESM ๋ชจ๋๋ก ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค. Node.js๋ CommonJS ๋ชจ๋์ ๋ด๋ณด๋ด๊ธฐ๋ฅผ ๊ธฐ๋ณธ ๋ด๋ณด๋ด๊ธฐ๋ก ์๋ ๋ํํฉ๋๋ค. - CommonJS๋ ESM ๋ชจ๋์ ์ง์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
require๋ฅผ ์ฌ์ฉํ์ฌ ESM ๋ชจ๋์ ์ง์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.import()ํจ์๋ฅผ ์ฌ์ฉํ์ฌ CommonJS์์ ESM ๋ชจ๋์ ๋์ ์ผ๋ก ๋ก๋ํ ์ ์์ต๋๋ค.
์์ (ESM์ด CommonJS๋ฅผ ๊ฐ์ ธ์ด):
// moduleA.js (CommonJS)
module.exports = {
greet: function(name) {
return 'Hello, ' + name;
}
};
// main.mjs (ESM)
import moduleA from './moduleA.js';
console.log(moduleA.greet('World')); // ์ถ๋ ฅ: Hello, World
์์ (CommonJS๊ฐ ESM์ ๋์ ์ผ๋ก ๊ฐ์ ธ์ด):
// moduleA.mjs (ESM)
export const greet = (name) => {
return `Hello, ${name}`;
};
// main.js (CommonJS)
async function loadModule() {
const moduleA = await import('./moduleA.mjs');
console.log(moduleA.greet('World'));
}
loadModule();
์ค์ ๊ตฌํ: ๋จ๊ณ๋ณ ๊ฐ์ด๋
์น ํ๋ก์ ํธ์์ ESM์ ์ฌ์ฉํ๋ ์ค์ ์์ ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
ํ๋ก์ ํธ ์ค์
- ํ๋ก์ ํธ ๋๋ ํฐ๋ฆฌ ๋ง๋ค๊ธฐ:
mkdir my-esm-project - ๋๋ ํฐ๋ฆฌ๋ก ์ด๋:
cd my-esm-project package.jsonํ์ผ ์ด๊ธฐํ:npm init -ypackage.json์"type": "module"์ถ๊ฐ:
{
"name": "my-esm-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
๋ชจ๋ ๋ง๋ค๊ธฐ
moduleA.js๋ง๋ค๊ธฐ:
// moduleA.js
export const greet = (name) => {
return `Hello, ${name}`;
};
export const farewell = (name) => {
return `Goodbye, ${name}`;
};
main.js๋ง๋ค๊ธฐ:
// main.js
import { greet, farewell } from './moduleA.js';
console.log(greet('World'));
console.log(farewell('World'));
์ฝ๋ ์คํ
Node.js์์ ์ด ์ฝ๋๋ฅผ ์ง์ ์คํํ ์ ์์ต๋๋ค.
node main.js
์ถ๋ ฅ:
Hello, World
Goodbye, World
HTML(๋ธ๋ผ์ฐ์ )๊ณผ ํจ๊ป ์ฌ์ฉ
index.html๋ง๋ค๊ธฐ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESM Example</title>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
๋ธ๋ผ์ฐ์ ์์ index.html์ ์ฝ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ์ผ๋ฐ์ ์ผ๋ก ESM์ ์ฌ์ฉํ์ฌ ๋ก์ปฌ ํ์ผ ๋ก๋ฉ์ ์ ํํ๋ฏ๋ก HTTP๋ฅผ ํตํด ํ์ผ(์: npx serve์ ๊ฐ์ ๊ฐ๋จํ HTTP ์๋ฒ ์ฌ์ฉ)์ ์ ๊ณตํด์ผ ํฉ๋๋ค.
๋ชจ๋ ๋ฒ๋ค๋ฌ: Webpack, Rollup ๋ฐ Parcel
๋ชจ๋ ๋ฒ๋ค๋ฌ๋ ํนํ ๋ธ๋ผ์ฐ์ ์์ ESM์ ์ฌ์ฉํ ๋ ์ต์ ์น ๊ฐ๋ฐ์ ํ์์ ์ธ ๋๊ตฌ์ ๋๋ค. ๋ชจ๋ JavaScript ๋ชจ๋๊ณผ ํด๋น ์ข ์์ฑ์ ๋ธ๋ผ์ฐ์ ์์ ํจ์จ์ ์ผ๋ก ๋ก๋ํ ์ ์๋ ํ๋ ์ด์์ ์ต์ ํ๋ ํ์ผ๋ก ๋ฌถ์ต๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ธ๊ธฐ ์๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ๋ํ ๊ฐ๋ตํ ๊ฐ์์ ๋๋ค.
Webpack
Webpack์ ๊ตฌ์ฑ ๊ฐ๋ฅ์ฑ์ด ๋๊ณ ๋ค์ฌ๋ค๋ฅํ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ๋๋ค. ๋ค์๊ณผ ๊ฐ์ ๊ด๋ฒ์ํ ๊ธฐ๋ฅ์ ์ง์ํฉ๋๋ค.
- ์ฝ๋ ๋ถํ : ์ฝ๋๋ฅผ ์ฃผ๋ฌธํ์ผ๋ก ๋ก๋ํ ์ ์๋ ๋ ์์ ์ฒญํฌ๋ก ๋๋๋๋ค.
- ๋ก๋: ๋ค์ํ ์ ํ์ ํ์ผ(์: CSS, ์ด๋ฏธ์ง)์ JavaScript ๋ชจ๋๋ก ๋ณํํฉ๋๋ค.
- ํ๋ฌ๊ทธ์ธ: ์ฌ์ฉ์ ์ง์ ์์ ์ผ๋ก Webpack์ ๊ธฐ๋ฅ์ ํ์ฅํฉ๋๋ค.
Rollup
Rollup์ ํนํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ํ๋ ์์ํฌ์ ๋ํด ๊ณ ๋๋ก ์ต์ ํ๋ ๋ฒ๋ค์ ๋ง๋๋ ๋ฐ ์ค์ ์ ๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ๋๋ค. ์ฌ์ฉํ์ง ์๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํ์ฌ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ์ค์ผ ์ ์๋ ํธ๋ฆฌ ์์ดํน ๊ธฐ๋ฅ์ผ๋ก ์ ๋ช ํฉ๋๋ค.
Parcel
Parcel์ ์ฌ์ฉํ๊ธฐ ์ฝ๊ณ ์์ํ๊ธฐ ์ฝ๋๋ก ์ค๊ณ๋ ์ ๋ก ๊ตฌ์ฑ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ๋๋ค. ํ๋ก์ ํธ์ ์ข ์์ฑ์ ์๋์ผ๋ก ๊ฐ์งํ๊ณ ๊ทธ์ ๋ฐ๋ผ ์์ฒด์ ์ผ๋ก ๊ตฌ์ฑํฉ๋๋ค.
๊ธ๋ก๋ฒ ๊ฐ๋ฐ ํ์ ESM: ๋ชจ๋ฒ ์ฌ๋ก
๊ธ๋ก๋ฒ ๊ฐ๋ฐ ํ์์ ์์ ํ ๋ ESM์ ์ฑํํ๊ณ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ ๊ฒ์ ์ฝ๋ ์ผ๊ด์ฑ, ์ ์ง ๊ด๋ฆฌ์ฑ ๋ฐ ํ์ ์ ๋ณด์ฅํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ๊ถ์ฅ ์ฌํญ์ ๋๋ค.
- ESM ์ ์ฉ: ํ์คํ๋ฅผ ์ด์งํ๊ณ ๋ชจ๋ ํ์ ํผํฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ฝ๋๋ฒ ์ด์ค ์ ์ฒด์์ ESM ์ฌ์ฉ์ ๊ถ์ฅํฉ๋๋ค. ๋ฆฐํฐ๋ฅผ ๊ตฌ์ฑํ์ฌ ์ด ๊ท์น์ ์ ์ฉํ ์ ์์ต๋๋ค.
- ๋ชจ๋ ๋ฒ๋ค๋ฌ ์ฌ์ฉ: Webpack, Rollup ๋๋ Parcel๊ณผ ๊ฐ์ ๋ชจ๋ ๋ฒ๋ค๋ฌ๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ก๋์ ์ ๋ง๊ฒ ์ฝ๋๋ฅผ ์ต์ ํํ๊ณ ์ข ์์ฑ์ ํจ๊ณผ์ ์ผ๋ก ์ฒ๋ฆฌํฉ๋๋ค.
- ์ฝ๋ฉ ํ์ค ์ค์ : ๋ชจ๋ ๊ตฌ์กฐ, ๋ช ๋ช ๊ท์น ๋ฐ ๋ด๋ณด๋ด๊ธฐ/๊ฐ์ ธ์ค๊ธฐ ํจํด์ ๋ํ ๋ช ํํ ์ฝ๋ฉ ํ์ค์ ์ ์ํฉ๋๋ค. ์ด๋ ๋ค์ํ ํ ๊ตฌ์ฑ์๊ณผ ํ๋ก์ ํธ ๊ฐ์ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ํ ์คํธ ์๋ํ: ๋ชจ๋์ ์ ํ์ฑ๊ณผ ํธํ์ฑ์ ํ์ธํ๊ธฐ ์ํด ์๋ํ๋ ํ ์คํธ๋ฅผ ๊ตฌํํฉ๋๋ค. ์ด๋ ๋๊ท๋ชจ ์ฝ๋๋ฒ ์ด์ค ๋ฐ ๋ถ์ฐ๋ ํ์์ ์์ ํ ๋ ํนํ ์ค์ํฉ๋๋ค.
- ๋ชจ๋ ๋ฌธ์ํ: ๋ชจ๋์ ๋ชฉ์ , ์ข ์์ฑ ๋ฐ ์ฌ์ฉ ์ง์นจ์ ํฌํจํ์ฌ ๋ชจ๋์ ์ฒ ์ ํ ๋ฌธ์ํํฉ๋๋ค. ์ด๋ ๋ค๋ฅธ ๊ฐ๋ฐ์๊ฐ ๋ชจ๋์ ํจ๊ณผ์ ์ผ๋ก ์ดํดํ๊ณ ์ฌ์ฉํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. JSDoc๊ณผ ๊ฐ์ ๋๊ตฌ๋ฅผ ๊ฐ๋ฐ ํ๋ก์ธ์ค์ ํตํฉํ ์ ์์ต๋๋ค.
- ํ์งํ ๊ณ ๋ ค: ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฌ๋ฌ ์ธ์ด๋ฅผ ์ง์ํ๋ ๊ฒฝ์ฐ ๋ชจ๋์ ์ฝ๊ฒ ํ์งํํ ์ ์๋๋ก ์ค๊ณํฉ๋๋ค. ๊ตญ์ ํ(i18n) ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ๋ฒ์ญ ๊ฐ๋ฅํ ์ฝํ ์ธ ๋ฅผ ์ฝ๋์ ๋ถ๋ฆฌํฉ๋๋ค.
- ์๊ฐ๋ ์ธ์: ๋ ์ง์ ์๊ฐ์ ์ฒ๋ฆฌํ ๋๋ ์๊ฐ๋๋ฅผ ์ผ๋์ ๋์ญ์์ค. Moment.js ๋๋ Luxon๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์๊ฐ๋ ๋ณํ ๋ฐ ์์์ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํฉ๋๋ค.
- ๋ฌธํ์ ๊ฐ์์ฑ: ๋ชจ๋์ ์ค๊ณํ๊ณ ๊ฐ๋ฐํ ๋ ๋ฌธํ์ ์ฐจ์ด๋ฅผ ์ธ์ํ์ญ์์ค. ํน์ ๋ฌธํ๊ถ์์ ๋ถ์พ๊ฐ์ ์ฃผ๊ฑฐ๋ ๋ถ์ ์ ํ ์ ์๋ ์ธ์ด, ์ด๋ฏธ์ง ๋๋ ์์ ๋ฅผ ์ฌ์ฉํ์ง ๋ง์ญ์์ค.
- ์ ๊ทผ์ฑ: ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ๋ชจ๋์ ์ก์ธ์คํ ์ ์๋์ง ํ์ธํฉ๋๋ค. ์ ๊ทผ์ฑ ์ง์นจ(์: WCAG)์ ๋ฐ๋ฅด๊ณ ์ง์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์ฝ๋๋ฅผ ํ ์คํธํฉ๋๋ค.
์ผ๋ฐ์ ์ธ ๊ณผ์ ๋ฐ ํด๊ฒฐ์ฑ
ESM์ ์๋ง์ ์ด์ ์ ์ ๊ณตํ์ง๋ง ๊ฐ๋ฐ์๋ ๊ตฌํ ์ค์ ์ด๋ ค์์ ์ง๋ฉดํ ์ ์์ต๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ๋ฌธ์ ์ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋๋ค.
- ๋ ๊ฑฐ์ ์ฝ๋: ๋๊ท๋ชจ ์ฝ๋๋ฒ ์ด์ค๋ฅผ CommonJS์์ ESM์ผ๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ๋ ๋ฐ ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆฌ๊ณ ๋ณต์กํ ์ ์์ต๋๋ค. ์ ๋ชจ๋๋ถํฐ ์์ํ์ฌ ๊ธฐ์กด ๋ชจ๋์ ์ฒ์ฒํ ๋ณํํ๋ ์ ์ง์ ์ธ ๋ง์ด๊ทธ๋ ์ด์ ์ ๋ต์ ๊ณ ๋ คํ์ญ์์ค.
- ์ข ์์ฑ ์ถฉ๋: ๋ชจ๋ ๋ฒ๋ค๋ฌ๋ ํนํ ๋์ผํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ฌ๋ฌ ๋ฒ์ ์ ์ฒ๋ฆฌํ ๋ ์ข ์์ฑ ์ถฉ๋์ด ๋ฐ์ํ๋ ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค. npm ๋๋ yarn๊ณผ ๊ฐ์ ์ข ์์ฑ ๊ด๋ฆฌ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ถฉ๋์ ํด๊ฒฐํ๊ณ ์ผ๊ด๋ ๋ฒ์ ์ ๋ณด์ฅํฉ๋๋ค.
- ๋น๋ ์ฑ๋ฅ: ๋ชจ๋์ด ๋ง์ ๋๊ท๋ชจ ํ๋ก์ ํธ๋ ๋น๋ ์๊ฐ์ด ๋๋ ค์ง ์ ์์ต๋๋ค. ์บ์ฑ, ๋ณ๋ ฌ ์ฒ๋ฆฌ ๋ฐ ์ฝ๋ ๋ถํ ๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ๋น๋ ํ๋ก์ธ์ค๋ฅผ ์ต์ ํํฉ๋๋ค.
- ๋๋ฒ๊น : ํนํ ๋ชจ๋ ๋ฒ๋ค๋ฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ESM ์ฝ๋๋ฅผ ๋๋ฒ๊น ํ๋ ๊ฒ์ด ์ด๋ ค์ธ ์ ์์ต๋๋ค. ์์ค ๋งต์ ์ฌ์ฉํ์ฌ ๋ฒ๋ค๋ ์ฝ๋๋ฅผ ์๋ ์์ค ํ์ผ์ ๋ค์ ๋งคํํ์ฌ ๋๋ฒ๊น ์ ๋ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
- ๋ธ๋ผ์ฐ์ ํธํ์ฑ: ์ต์ ๋ธ๋ผ์ฐ์ ๋ ESM์ ์ ์ง์ํ์ง๋ง ์ด์ ๋ธ๋ผ์ฐ์ ์๋ ํธ๋์คํ์ผ๋ง ๋๋ ํด๋ฆฌํ์ด ํ์ํ ์ ์์ต๋๋ค. Babel๊ณผ ๊ฐ์ ๋ชจ๋ ๋ฒ๋ค๋ฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋๋ฅผ ์ด์ ๋ฒ์ ์ JavaScript๋ก ํธ๋์คํ์ผํ๊ณ ํ์ํ ํด๋ฆฌํ์ ํฌํจํฉ๋๋ค.
JavaScript ๋ชจ๋์ ๋ฏธ๋
JavaScript ๋ชจ๋์ ๋ฏธ๋๋ ๋ฐ์ ๋ณด์ด๋ฉฐ ESM๊ณผ ๋ค๋ฅธ ์น ๊ธฐ์ ๊ณผ์ ํตํฉ์ ๊ฐ์ ํ๊ธฐ ์ํ ๋ ธ๋ ฅ์ด ๊ณ์๋๊ณ ์์ต๋๋ค. ๋ช ๊ฐ์ง ์ ์ฌ์ ์ธ ๊ฐ๋ฐ ์ฌํญ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ๊ฐ์ ๋ ๋๊ตฌ: ๋ชจ๋ ๋ฒ๋ค๋ฌ, ๋ฆฐํฐ ๋ฐ ๊ธฐํ ๋๊ตฌ์ ์ง์์ ์ธ ๊ฐ์ ์ผ๋ก ESM์ ์ฌ์ฉํ ์์ ์ด ํจ์ฌ ์ฝ๊ณ ํจ์จ์ ์ผ๋ก ์ด๋ฃจ์ด์ง๋๋ค.
- ๊ธฐ๋ณธ ๋ชจ๋ ์ง์: ๋ธ๋ผ์ฐ์ ๋ฐ Node.js์์ ๊ธฐ๋ณธ ESM ์ง์์ ๊ฐ์ ํ๋ ค๋ ๋ ธ๋ ฅ์ผ๋ก ์ธํด ์ผ๋ถ ๊ฒฝ์ฐ์๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ํ์์ฑ์ด ์ค์ด๋ญ๋๋ค.
- ํ์คํ๋ ๋ชจ๋ ํด๊ฒฐ: ๋ชจ๋ ํด๊ฒฐ ์๊ณ ๋ฆฌ์ฆ์ ํ์คํํ๋ฉด ๋ค์ํ ํ๊ฒฝ๊ณผ ๋๊ตฌ ๊ฐ์ ์ํธ ์ด์ฉ์ฑ์ด ํฅ์๋ฉ๋๋ค.
- ๋์ ๊ฐ์ ธ์ค๊ธฐ ๊ฐ์ : ๋์ ๊ฐ์ ธ์ค๊ธฐ ๊ฐ์ ์ผ๋ก ๋ชจ๋ ๋ก๋ฉ์ ๋ํ ๋ ๋ง์ ์ ์ฐ์ฑ๊ณผ ์ ์ด ๊ธฐ๋ฅ์ด ์ ๊ณต๋ฉ๋๋ค.
๊ฒฐ๋ก
ECMAScript ๋ชจ๋(ESM)์ ์ฝ๋ ๊ตฌ์ฑ, ์ ์ง ๊ด๋ฆฌ์ฑ ๋ฐ ์ฑ๋ฅ ์ธก๋ฉด์์ ์ค์ํ ์ด์ ์ ์ ๊ณตํ๋ JavaScript ๋ชจ๋์ฑ์ ์ต์ ํ์ค์ ๋ํ๋ ๋๋ค. ESM์ ์๋ฆฌ, ์ค์ ์๊ตฌ ์ฌํญ ๋ฐ ์ค์ ๊ตฌํ ๊ธฐ์ ์ ์ดํดํจ์ผ๋ก์จ ๊ธ๋ก๋ฒ ๊ฐ๋ฐ์๋ ์ต์ ์น ๊ฐ๋ฐ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ๋ ๊ฐ๋ ฅํ๊ณ ํ์ฅ ๊ฐ๋ฅํ๋ฉฐ ์ ์ง ๊ด๋ฆฌ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ESM์ ์์ฉํ๊ณ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ ๊ฒ์ ํ์ ์ ์ด์งํ๊ณ ์ฝ๋ ํ์ง์ ๋ณด์ฅํ๋ฉฐ ๋์์์ด ์งํํ๋ JavaScript ํ๊ฒฝ์ ์ต์ ์ ์ ๋จธ๋ฌด๋ ๋ฐ ํ์์ ์ ๋๋ค. ์ด ๊ธฐ์ฌ๋ JavaScript ๋ชจ๋์ ๋ง์คํฐํ๊ธฐ ์ํ ์ฌ์ ์ ๋ํ ๊ฒฌ๊ณ ํ ๊ธฐ๋ฐ์ ์ ๊ณตํ์ฌ ์ ์ธ๊ณ ๊ณ ๊ฐ์ ์ํ ์ธ๊ณ์ ์์ค์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๋๋ก ์ง์ํฉ๋๋ค.