๋ชจ๋์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ฑํ๋ ๊ฐ๋ณ์ ์์๋ก์ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ฝ๋ ์กฐ๊ฐ์ ๋งํ๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ชจ๋์ ๊ธฐ๋ฅ์ ๊ธฐ์ค์ผ๋ก ํ์ผ ๋จ์๋ก ๋ถ๋ฆฌํ๋ค. ์ด๋ ๋ชจ๋์ด ์ฑ๋ฆฝํ๋ ค๋ฉด ์์ ๋ง์ ํ์ผ ์ค์ฝํ(๋ชจ๋ ์ค์ฝํ)๋ฅผ ๊ฐ์ง ์ ์์ด์ผ ํ๋ค.
์์ ๋ง์ ํ์ผ ์ค์ฝํ๋ฅผ ๊ฐ๋ ๋ชจ๋์ ๋ชจ๋ ์์ฐ์ ์บก์ํ๋์ด ๋ค๋ฅธ ๋ชจ๋์์ ์ ๊ทผํ ์ ์๋ค. ์ฆ, ๋ชจ๋์ ๊ฐ๋ณ์ ์กด์ฌ๋ก์ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ๋ถ๋ฆฌ๋์ด ์กด์ฌํ๋ค.
๋ชจ๋์ ์ ํ๋ฆฌ์ผ์ด์ ์ด๋ ๋ค๋ฅธ ๋ชจ๋์ ์ํด ์ฌ์ฌ์ฉ๋์ด์ผ ์๋ฏธ๊ฐ ์๋ค. ๋ฐ๋ผ์ ๋ชจ๋์ ๊ณต๊ฐ๊ฐ ํ์ํ ์์ฐ์ ํ์ ํ์ฌ ๋ช ์์ ์ผ๋ก ์ ํ์ ๊ณต๊ฐ๊ฐ ๊ฐ๋ฅํ๋ค. ์ด๋ฅผ export๋ผ ํ๋ค.
๊ณต๊ฐ๋ ๋ชจ๋์ ์์ฐ์ ์ฌ์ฉํ๋ ๋ชจ๋์ ๋ชจ๋ ์ฌ์ฉ์๋ผ ํ๋ค. ๋ชจ๋ ์ฌ์ฉ์๋ ๋ชจ๋์ด ๊ณต๊ฐํ ์์ฐ ์ค ์ผ๋ถ ๋๋ ์ ์ฒด๋ฅผ ์ ํํด ์์ ์ ์ค์ฝํ ๋ด๋ก ๋ถ๋ฌ๋ค์ฌ ์ฌ์ฌ์ฉํ ์ ์๋ค. ์ด๋ฅผ import๋ผ ํ๋ค.
๋ชจ๋์ ์ฝ๋์ ๋จ์๋ฅผ ๋ช ํํ ๋ถ๋ฆฌํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ฑํ ์ ์๊ณ , ์ฌ์ฌ์ฉ์ฑ์ด ์ข์์ ๊ฐ๋ฐ ํจ์จ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ๋์ผ ์ ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ์นํ์ด์ง์ ๋จ์ํ ๋ณด์กฐ ๊ธฐ๋ฅ์ ์ฒ๋ฆฌํ๊ธฐ ์ํ ์ ํ์ ์ธ ์ฉ๋๋ฅผ ๋ชฉ์ ์ผ๋ก ํ์ด๋ฌ๋ค. ์ด๋ฌํ ํ์์ ํ๊ณ๋ก ์ธํด ๋ค๋ฅธ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋น๊ตํ ๋ ๋ถ์กฑํ ๋ถ๋ถ์ด ์๋ค. ๋ํ์ ์ธ ๊ฒ์ธ ๋ชจ๋ ์์คํ ์ ์ง์ํ์ง ์๋๋ค๋ ๊ฒ์ด๋ค. ๋ค์ ๋งํด, ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ชจ๋์ด ์ฑ๋ฆฝํ๊ธฐ ์ํด ํ์ํ ํ์ผ ์ค์ฝํ์ import, export๋ฅผ ์ง์ํ์ง ์์๋ค.
ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ script ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ธ๋ถ์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ก๋ํ ์๋ ์์ง๋ง ํ์ผ๋ง๋ค ๋ ๋ฆฝ์ ์ธ ํ์ผ ์ค์ฝํ๋ฅผ ๊ฐ์ง ์๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํด๋ผ์ด์ธํธ ์ฌ์ด๋, ์ฆ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์ ๊ตญํํ์ง ์๊ณ ๋ฒ์ฉ์ ์ผ๋ก ์ฌ์ฉํ๋ ค๋ ์์ง์์ด ์๊ธฐ๋ฉด์ ๋ชจ๋ ์์คํ ์ ๋ฐ๋์ ํด๊ฒฐํด์ผ ํ๋ ํต์ฌ ๊ณผ์ ๊ฐ ๋์๋ค. ์ด๋ฐ ์ํฉ์์ ์ ์๋ ๊ฒ์ด CommonJS์ AMD๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์ ํ๊ฒฝ์ธ Node.js๋ ๋ชจ๋ ์์คํ ์ ์ฌ์ค์ ํ์ค์ธ CommonJS๋ฅผ ์ฑํํ๊ณ ๋ ์์ ์ธ ์งํ๋ฅผ ๊ฑฐ์ณ, ํ์ฌ๋ CommonJS ์ฌ์๊ณผ 100% ๋์ผํ์ง๋ ์์ง๋ง ๊ธฐ๋ณธ์ ์ผ๋ก CommonJS ์ฌ์์ ๋ฐ๋ฅด๊ณ ์๋ค. ์ฆ. Node.js๋ ECMAScript ํ์ค ์ฌ์์ ์๋์ง๋ง ๋ชจ๋ ์์คํ ์ ์ง์ํ๋ค. ๋ฐ๋ผ์ Node.js ํ๊ฒฝ์์๋ ํ์ผ๋ณ๋ก ๋ ๋ฆฝ์ ์ธ ํ์ผ ์ค์ฝํ๋ฅผ ๊ฐ๋๋ค.
์ด๋ฌํ ์ํฉ์์ ES6์์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ ๋์ํ๋ ๋ชจ๋ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ค. IE๋ฅผ ์ ์ธํ ๋๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ์์ ES6 ๋ชจ๋์ ์ฌ์ฉํ ์ ์๋ค.
script ํ๊ทธ์ type="module" ์ดํธ๋ฆฌ๋ทฐํธ๋ฅผ ์ถ๊ฐํ๋ฉด ๋ก๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ชจ๋๋ก์ ๋์ํ๋ค. ์ผ๋ฐ์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ด ์๋ ESM์์ ๋ช
ํํ ํ๊ธฐ ์ํด ESM์ ํ์ผ ํ์ฅ์๋ mjs๋ฅผ ์ฌ์ฉํ ๊ฒ์ ๊ถ์ฅํ๋ค.
<script type="module" src="app.mjs"></script>
ESM์๋ ํด๋์ค์ ๋ง์ฐฌ๊ฐ์ง๋ก ๊ธฐ๋ณธ์ ์ผ๋ก strict mode๊ฐ ์ ์ฉ๋๋ค
ESM์ ๋ ์์ ์ธ ๋ชจ๋ ์ค์ฝํ๋ฅผ ๊ฐ๋๋ค. ESM์ด ์๋ ์ผ๋ฐ์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ script ํ๊ทธ๋ก ๋ถ๋ฆฌํด์ ๋ก๋ํด๋ ๋ ์์ ์ธ ๋ชจ๋ ์ค์ฝํ๋ฅผ ๊ฐ์ง ์๋๋ค.
// foo.js
// x ๋ณ์๋ ์ ์ญ ๋ณ์๋ค.
var x = 'foo';
console.log(window.x); // foo
// bar.js
// x ๋ณ์๋ ์ ์ญ ๋ณ์๋ค. foo.js์์ ์ ์ธํ ์ ์ญ ๋ณ์ x์ ์ค๋ณต๋ ์ ์ธ์ด๋ค.
var x = 'bar';
// foo.js์์ ์ ์ธํ ์ ์ญ ๋ณ์ x์ ๊ฐ์ด ์ฌํ ๋น๋์๋ค.
console.log(window.x); //bar
<!DOCTYPE html>
<html>
<body>
<script src="foo.js"></script>
<script src="bar.js"></script>
</body>
</html>
์ ์์ ์ HTML์์ script ํ๊ทธ๋ก ๋ถ๋ฆฌํด์ ๋ก๋๋ 2๊ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ํ๋์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ ๋ด์ ์๋ ๊ฒ์ฒ๋ผ ๋์ํ๋ค. ์ฆ, ํ๋์ ์ ์ญ์ ๊ณต์ ํ๋ค.
ESM์ ํ์ผ ์์ฒด์ ๋ ์์ ์ธ ๋ชจ๋ ์ค์ฝํ๋ฅผ ์ ๊ณตํ๋ค. ๋ฐ๋ผ์ ๋ชจ๋ ๋ด์์ var ํค์๋๋ก ์ ์ธํ ๋ณ์๋ ๋๋ ์ ์ญ ๋ณ์๊ฐ ์๋๋ฉฐ window ๊ฐ์ฒด์ ํ๋กํผํฐ๋ ์๋๋ค.
๋ชจ๋ ๋ด์์ ์ ์ธํ ์๋ณ์๋ ๋ชจ๋ ์ธ๋ถ์์ ์ฐธ์กฐํ ์ ์๋ค. ๋ชจ๋ ์ค์ฝํ๊ฐ ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ด๋ค.
๋ชจ๋์ ๋ ์์ ์ธ ๋ชจ๋ ์ค์ฝํ๋ฅผ ๊ฐ๋๋ค. ๋ฐ๋ผ์ ๋ชจ๋ ๋ด๋ถ์์ ์ ์ธํ ๋ชจ๋ ์๋ณ์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ใ ๋ใ ใ ๋ชจ๋ ๋ด๋ถ์์๋ง ์ฐธ์กฐํ ์ ์๋ค. ๋ชจ๋ ๋ด๋ถ์์ ์ ์ธํ ์๋ณ์๋ฅผ ์ธ๋ถ์ ๊ณต๊ฐํ์ฌ ๋ค๋ฅด๋ชจ๋๋ค์ด ์ฌ์ฌ์ฉํ ์ ์๊ฒ ํ๋ ค๋ฉด export ํค์๋๋ฅผ ์ฌ์ฉํ๋ค.
export ํค์๋๋ ์ ์ธ๋ฌธ ์์ ์ฌ์ฉํ๋ค. ์ด๋ก์จ ๋ฒผ๋, ํจ์, ํด๋์ค ๋ฑ ๋ชจ๋ ์๋ณ์๋ฅผ exportํ ์ ์๋ค.
// lib.mjs
// ๋ณ์์ ๊ณต๊ฐ
export const pi = Math.PI;
// ํจ์์ ๊ณต๊ฐ
export function square(x) {
return x * x;
}
// ํด๋์ค์ ๊ณต๊ฐ
export class Person {
constructor(name) {
this.name = name;
}
}
์ ์ธ๋ฌธ ์์ ๋งค๋ฒ export ํค์๋๋ฅผ ๋ถ์ด๋ ๊ฒ์ด ๋ฒ๊ฑฐ๋กญ๋ค๋ฉด exportํ ๋์์ ํ๋์ ๊ฐ์ฒด๋ก ๊ตฌ์ฑํ์ฌ ํ๋ฒ์ exportํ ์๋ ์๋ค.
๋ค๋ฅด ๋ชจ๋์์ ๊ณต๊ฐํ ์๋ณ์๋ฅผ ์์ ์ ๋ชจ๋ ์ค์ฝํ ๋ด๋ถ๋ก ๋ก๋ํ๋ ค๋ฉด import ํค์๋๋ฅผ ์ฌ์ฉํ๋ค. ๋ค๋ฅธ ๋ชจ๋์ด exportํ ์๋ณ์ ์ด๋ฆ์ผ๋ก importํด์ผ ํ๋ฉฐ ESM์ ๊ฒฝ์ฐ ํ์ผ ํ์ฅ์๋ฅผ ์๋ตํ ์ ์๋ค.
// app.mjs
// ๊ฐ์ ํด๋ ๋ด์ lib.mjs ๋ชจ๋์ด exportํ ์๋ณ์ ์ด๋ฆ์ผ๋ก importํ๋ค.
// ESM์ ๊ฒฝ์ฐ ํ์ผ ํ์ฅ์๋ฅผ ์๋ตํ ์ ์๋ค.
import { pi, square, Person } from './lib.mjs';
console.log(pi);
console.log(square(10)); // 100
console.log(new Person('Lee')); // Person {name : 'Lee'}
<!DOCTYPE html>
<html>
<body>
<script type="module" src="app.mjs"></script>
</html>
</body>
์ ์์ ์ app.mjs๋ ์ ํ๋ฆฌ์ผ์ด์
์ ์ง์
์ ์ด๋ฏ๋ก ๋ฐ๋์ script ํ๊ทธ๋ก ๋ก๋ํด์ผ ํ๋ค. ํ์ง๋ง lib.mjs๋ app.mjs์ import ๋ฌธ์ ์ํด ๋ก๋๋๋ ์์กด์ฑ์ด๋ค. ๋ฐ๋ผ์ lib.mjs๋ script ํ๊ทธ๋ก ๋ก๋ํ์ง ์์๋ ๋๋ค.
๋ชจ๋์ด exportํ ์๋ณ์ ์ด๋ฆ์ ์ผ์ผ์ด ์ง์ ํ์ง ์๊ณ ํ๋์ ์ด๋ฆ์ผ๋ก ํ ๋ฒ์ importํ ์๋ ์๋ค. ์ด๋ import๋๋ ์๋ณ์๋ as ๋ค์ ์ง์ ํ ์ด๋ฆ์ ๊ฐ์ฒด์ ํ๋กํผํฐ๋ก ํ ๋น๋๋ค.
๋ชจ๋์ด exportํ ์๋ณ์ ์ด๋ฆ์ ๋ณ๊ฒฝํ์ฌ importํ ์๋ ์๋ค.
๋ชจ๋์์ ํ๋์ ๊ฐ๋ง exportํ๋ค๋ฉด default ํค์๋๋ฅผ ์ฌ์ฉํ ์ ์๋ค. default ํค์๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์ด๋ฆ ์์ด ํ๋์ ๊ฐ์ epxortํ๋ค.
default ํค์๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ var, let, const ํค์๋๋ ์ฌ์ฉํ ์ ์ ์ณ.
default ํค์๋์ ํจ๊ป exportํ ๋ชจ๋์ {} ์์ด ์์์ ์ด๋ฆ์ผ๋ก importํ๋ค.