์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ์ธํฐํ๋ฆฌํฐ ํจํด, ์ฝ๋ ์คํ ์ ๋ต, ๋ชจ๋ ๋ก๋ฉ์ ํ์ํฉ๋๋ค. ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์์กด์ฑ ๊ด๋ฆฌ ๋ฐ ์ฑ๋ฅ ์ต์ ํ ๊ธฐ์ ์ ๋ฐฐ์ฐ์ธ์.
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ์ธํฐํ๋ฆฌํฐ ํจํด: ์ฝ๋ ์คํ ์ฌ์ธต ๋ถ์
์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ชจ๋์ฑ์ ๋ํ ์ ๊ทผ ๋ฐฉ์์์ ์๋นํ ๋ฐ์ ์ ์ด๋ฃจ์์ต๋๋ค. ์ด๊ธฐ์ ์๋ฐ์คํฌ๋ฆฝํธ์๋ ๋ค์ดํฐ๋ธ ๋ชจ๋ ์์คํ ์ด ์์๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฐ์๋ค์ ์ฝ๋๋ฅผ ๊ตฌ์ฑํ๊ณ ๊ณต์ ํ๊ธฐ ์ํ ๋ค์ํ ํจํด์ ๋ง๋ค์ด๋์ต๋๋ค. ์ด๋ฌํ ํจํด๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ์ด๋ฅผ ํด์ํ๋ ๋ฐฉ์์ ์ดํดํ๋ ๊ฒ์ ๊ฒฌ๊ณ ํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋์ฑ์ ์งํ
๋ชจ๋ ์ด์ ์๋: ์ ์ญ ์ค์ฝํ์ ๊ทธ ๋ฌธ์ ์
๋ชจ๋ ์์คํ ์ด ๋์ ๋๊ธฐ ์ , ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ ์ผ๋ฐ์ ์ผ๋ก ๋ชจ๋ ๋ณ์์ ํจ์๊ฐ ์ ์ญ ์ค์ฝํ์ ์์ฃผํ๋๋ก ์์ฑ๋์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์ฌ๋ฌ ๋ฌธ์ ๋ฅผ ์ผ๊ธฐํ์ต๋๋ค:
- ๋ค์์คํ์ด์ค ์ถฉ๋: ๋ค๋ฅธ ์คํฌ๋ฆฝํธ๊ฐ ๋์ผํ ์ด๋ฆ์ ๊ณต์ ํ ๊ฒฝ์ฐ ์๋ก์ ๋ณ์๋ ํจ์๋ฅผ ์ฐ์ฐํ ๋ฎ์ด์ธ ์ ์์์ต๋๋ค.
- ์์กด์ฑ ๊ด๋ฆฌ: ์ฝ๋๋ฒ ์ด์ค์ ์ฌ๋ฌ ๋ถ๋ถ ๊ฐ์ ์์กด์ฑ์ ์ถ์ ํ๊ณ ๊ด๋ฆฌํ๊ธฐ ์ด๋ ค์ ์ต๋๋ค.
- ์ฝ๋ ๊ตฌ์ฑ: ์ ์ญ ์ค์ฝํ๋ ์ฝ๋๋ฅผ ๋ ผ๋ฆฌ์ ๋จ์๋ก ๊ตฌ์ฑํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ค์ด ์คํ๊ฒํฐ ์ฝ๋๋ฅผ ์ ๋ฐํ์ต๋๋ค.
์ด๋ฌํ ๋ฌธ์ ๋ฅผ ์ํํ๊ธฐ ์ํด ๊ฐ๋ฐ์๋ค์ ๋ค์๊ณผ ๊ฐ์ ๋ช ๊ฐ์ง ๊ธฐ์ ์ ์ฌ์ฉํ์ต๋๋ค:
- IIFE (์ฆ์ ์คํ ํจ์ ํํ์): IIFE๋ ๋น๊ณต๊ฐ ์ค์ฝํ๋ฅผ ์์ฑํ์ฌ ๊ทธ ์์์ ์ ์๋ ๋ณ์์ ํจ์๊ฐ ์ ์ญ ์ค์ฝํ๋ฅผ ์ค์ผ์ํค๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
- ๊ฐ์ฒด ๋ฆฌํฐ๋ด: ๊ด๋ จ๋ ํจ์์ ๋ณ์๋ฅผ ๊ฐ์ฒด ๋ด์ ๊ทธ๋ฃนํํ์ฌ ๊ฐ๋จํ ํํ์ ๋ค์์คํ์ด์ค๋ฅผ ์ ๊ณตํฉ๋๋ค.
IIFE ์์:
(function() {
var privateVariable = "This is private";
window.myGlobalFunction = function() {
console.log(privateVariable);
};
})();
myGlobalFunction(); // Outputs: This is private
์ด๋ฌํ ๊ธฐ์ ๋ค์ด ์ด๋ ์ ๋ ๊ฐ์ ์ ๊ฐ์ ธ์์ง๋ง, ์ง์ ํ ๋ชจ๋ ์์คํ ์ ์๋์์ผ๋ฉฐ ์์กด์ฑ ๊ด๋ฆฌ์ ์ฝ๋ ์ฌ์ฌ์ฉ์ ์ํ ๊ณต์์ ์ธ ๋ฉ์ปค๋์ฆ์ด ๋ถ์กฑํ์ต๋๋ค.
๋ชจ๋ ์์คํ ์ ๋ถ์: CommonJS, AMD, UMD
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋ ๋๋ฆฌ ์ฌ์ฉ๋จ์ ๋ฐ๋ผ ํ์คํ๋ ๋ชจ๋ ์์คํ ์ ํ์์ฑ์ด ์ ์ ๋ ๋ช ํํด์ก์ต๋๋ค. ์ด๋ฌํ ์๊ตฌ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ฌ๋ฌ ๋ชจ๋ ์์คํ ์ด ๋ฑ์ฅํ์ต๋๋ค:
- CommonJS: ์ฃผ๋ก Node.js์์ ์ฌ์ฉ๋๋ฉฐ,
require()ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋์ ๊ฐ์ ธ์ค๊ณmodule.exports๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ๋ด๋ณด๋ ๋๋ค. - AMD (๋น๋๊ธฐ ๋ชจ๋ ์ ์): ๋ธ๋ผ์ฐ์ ์์ ๋ชจ๋์ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ฉํ๊ธฐ ์ํด ์ค๊ณ๋์์ผ๋ฉฐ,
define()ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋๊ณผ ๊ทธ ์์กด์ฑ์ ์ ์ํฉ๋๋ค. - UMD (๋ฒ์ฉ ๋ชจ๋ ์ ์): CommonJS์ AMD ํ๊ฒฝ ๋ชจ๋์์ ์๋ํ๋ ๋ชจ๋ ํ์์ ์ ๊ณตํ๋ ๊ฒ์ ๋ชฉํ๋ก ํฉ๋๋ค.
CommonJS
CommonJS๋ ์ฃผ๋ก Node.js์ ๊ฐ์ ์๋ฒ ์ธก ์๋ฐ์คํฌ๋ฆฝํธ ํ๊ฒฝ์์ ์ฌ์ฉ๋๋ ๋๊ธฐ์ ๋ชจ๋ ์์คํ
์
๋๋ค. ๋ชจ๋์ ๋ฐํ์์ require() ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ก๋๋ฉ๋๋ค.
CommonJS ๋ชจ๋ ์์ (moduleA.js):
// moduleA.js
const moduleB = require('./moduleB');
function doSomething() {
return moduleB.getValue() * 2;
}
module.exports = {
doSomething: doSomething
};
CommonJS ๋ชจ๋ ์์ (moduleB.js):
// moduleB.js
function getValue() {
return 10;
}
module.exports = {
getValue: getValue
};
CommonJS ๋ชจ๋ ์ฌ์ฉ ์์ (index.js):
// index.js
const moduleA = require('./moduleA');
console.log(moduleA.doSomething()); // Outputs: 20
AMD
AMD๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํด ์ค๊ณ๋ ๋น๋๊ธฐ์ ๋ชจ๋ ์์คํ ์ ๋๋ค. ๋ชจ๋์ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋๋์ด ํ์ด์ง ๋ก๋ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. RequireJS๋ AMD์ ์ธ๊ธฐ ์๋ ๊ตฌํ์ฒด์ ๋๋ค.
AMD ๋ชจ๋ ์์ (moduleA.js):
// moduleA.js
define(['./moduleB'], function(moduleB) {
function doSomething() {
return moduleB.getValue() * 2;
}
return {
doSomething: doSomething
};
});
AMD ๋ชจ๋ ์์ (moduleB.js):
// moduleB.js
define(function() {
function getValue() {
return 10;
}
return {
getValue: getValue
};
});
AMD ๋ชจ๋ ์ฌ์ฉ ์์ (index.html):
<script src="require.js"></script>
<script>
require(['./moduleA'], function(moduleA) {
console.log(moduleA.doSomething()); // Outputs: 20
});
</script>
UMD
UMD๋ CommonJS์ AMD ํ๊ฒฝ ๋ชจ๋์์ ์๋ํ๋ ๋จ์ผ ๋ชจ๋ ํ์์ ์ ๊ณตํ๋ ค๊ณ ์๋ํฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ํ์ฌ ํ๊ฒฝ์ ํ์ธํ๊ณ ๊ทธ์ ๋ฐ๋ผ ์ ์ํ๊ธฐ ์ํด ์ฌ๋ฌ ๊ฒ์ฌ๋ฅผ ์กฐํฉํ์ฌ ์ฌ์ฉํฉ๋๋ค.
UMD ๋ชจ๋ ์์ (moduleA.js):
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['./moduleB'], factory);
} else if (typeof module === 'object' && module.exports) {
// CommonJS
module.exports = factory(require('./moduleB'));
} else {
// Browser globals (root is window)
root.moduleA = factory(root.moduleB);
}
}(typeof self !== 'undefined' ? self : this, function (moduleB) {
function doSomething() {
return moduleB.getValue() * 2;
}
return {
doSomething: doSomething
};
}));
ES ๋ชจ๋: ํ์คํ๋ ์ ๊ทผ ๋ฐฉ์
ECMAScript 2015(ES6)๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์คํ๋ ๋ชจ๋ ์์คํ
์ ๋์
ํ์ฌ ๋ง์นจ๋ด ๋ชจ๋์ ์ ์ํ๊ณ ๊ฐ์ ธ์ค๋ ๋ค์ดํฐ๋ธ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ต๋๋ค. ES ๋ชจ๋์ import์ export ํค์๋๋ฅผ ์ฌ์ฉํฉ๋๋ค.
ES ๋ชจ๋ ์์ (moduleA.js):
// moduleA.js
import { getValue } from './moduleB.js';
export function doSomething() {
return getValue() * 2;
}
ES ๋ชจ๋ ์์ (moduleB.js):
// moduleB.js
export function getValue() {
return 10;
}
ES ๋ชจ๋ ์ฌ์ฉ ์์ (index.html):
<script type="module" src="index.js"></script>
ES ๋ชจ๋ ์ฌ์ฉ ์์ (index.js):
// index.js
import { doSomething } from './moduleA.js';
console.log(doSomething()); // Outputs: 20
๋ชจ๋ ์ธํฐํ๋ฆฌํฐ์ ์ฝ๋ ์คํ
์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์ฌ์ฉ๋ ๋ชจ๋ ์์คํ ๊ณผ ์ฝ๋๊ฐ ์คํ๋๋ ํ๊ฒฝ์ ๋ฐ๋ผ ๋ชจ๋์ ๋ค๋ฅด๊ฒ ํด์ํ๊ณ ์คํํฉ๋๋ค.
CommonJS ํด์
Node.js์์ CommonJS ๋ชจ๋ ์์คํ ์ ๋ค์๊ณผ ๊ฐ์ด ๊ตฌํ๋ฉ๋๋ค:
- ๋ชจ๋ ํด์:
require()๊ฐ ํธ์ถ๋๋ฉด Node.js๋ ์ง์ ๋ ๊ฒฝ๋ก๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ชจ๋ ํ์ผ์ ๊ฒ์ํฉ๋๋ค.node_modules๋๋ ํ ๋ฆฌ๋ฅผ ํฌํจํ ์ฌ๋ฌ ์์น๋ฅผ ํ์ธํฉ๋๋ค. - ๋ชจ๋ ๋ํ: ๋ชจ๋ ์ฝ๋๋ ๋น๊ณต๊ฐ ์ค์ฝํ๋ฅผ ์ ๊ณตํ๋ ํจ์๋ก ๋ํ๋ฉ๋๋ค. ์ด ํจ์๋
exports,require,module,__filename,__dirname์ ์ธ์๋ก ๋ฐ์ต๋๋ค. - ๋ชจ๋ ์คํ: ๋ํ๋ ํจ์๊ฐ ์คํ๋๊ณ
module.exports์ ํ ๋น๋ ๋ชจ๋ ๊ฐ์ด ๋ชจ๋์ ๋ด๋ณด๋ด๊ธฐ(export)๋ก ๋ฐํ๋ฉ๋๋ค. - ์บ์ฑ: ๋ชจ๋์ ์ฒ์ ๋ก๋๋ ํ ์บ์๋ฉ๋๋ค. ์ดํ์
require()ํธ์ถ์ ์บ์๋ ๋ชจ๋์ ๋ฐํํฉ๋๋ค.
AMD ํด์
RequireJS์ ๊ฐ์ AMD ๋ชจ๋ ๋ก๋๋ ๋น๋๊ธฐ์ ์ผ๋ก ์๋ํฉ๋๋ค. ํด์ ๊ณผ์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์์กด์ฑ ๋ถ์: ๋ชจ๋ ๋ก๋๋
define()ํจ์๋ฅผ ํ์ฑํ์ฌ ๋ชจ๋์ ์์กด์ฑ์ ์๋ณํฉ๋๋ค. - ๋น๋๊ธฐ ๋ก๋ฉ: ์์กด์ฑ์ ๋ณ๋ ฌ๋ก ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋๋ฉ๋๋ค.
- ๋ชจ๋ ์ ์: ๋ชจ๋ ์์กด์ฑ์ด ๋ก๋๋๋ฉด ๋ชจ๋์ ํฉํ ๋ฆฌ ํจ์๊ฐ ์คํ๋๊ณ ๋ฐํ๋ ๊ฐ์ด ๋ชจ๋์ ๋ด๋ณด๋ด๊ธฐ(export)๋ก ์ฌ์ฉ๋ฉ๋๋ค.
- ์บ์ฑ: ๋ชจ๋์ ์ฒ์ ๋ก๋๋ ํ ์บ์๋ฉ๋๋ค.
ES ๋ชจ๋ ํด์
ES ๋ชจ๋์ ํ๊ฒฝ์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ํด์๋ฉ๋๋ค:
- ๋ธ๋ผ์ฐ์ : ๋ธ๋ผ์ฐ์ ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ES ๋ชจ๋์ ์ง์ํ์ง๋ง
<script type="module">ํ๊ทธ๊ฐ ํ์ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ES ๋ชจ๋์ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ํ๋ฉฐ, import map ๋ฐ ๋์ import์ ๊ฐ์ ๊ธฐ๋ฅ์ ์ง์ํฉ๋๋ค. - Node.js: Node.js๋ ์ ์ฐจ์ ์ผ๋ก ES ๋ชจ๋์ ๋ํ ์ง์์ ์ถ๊ฐํ์ต๋๋ค.
.mjsํ์ฅ์๋ฅผ ์ฌ์ฉํ๊ฑฐ๋package.jsonํ์ผ์"type": "module"ํ๋๋ฅผ ์ฌ์ฉํ์ฌ ํ์ผ์ด ES ๋ชจ๋์์ ๋ํ๋ผ ์ ์์ต๋๋ค.
ES ๋ชจ๋์ ํด์ ๊ณผ์ ์ ์ผ๋ฐ์ ์ผ๋ก ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋ชจ๋ ํ์ฑ: ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋ชจ๋ ์ฝ๋๋ฅผ ํ์ฑํ์ฌ
import๋ฐexport๋ฌธ์ ์๋ณํฉ๋๋ค. - ์์กด์ฑ ํด๊ฒฐ: ์์ง์ import ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ๋ชจ๋์ ์์กด์ฑ์ ํด๊ฒฐํฉ๋๋ค.
- ๋น๋๊ธฐ ๋ก๋ฉ: ๋ชจ๋์ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋๋ฉ๋๋ค.
- ์ฐ๊ฒฐ(Linking): ์์ง์ ๊ฐ์ ธ์จ(imported) ๋ณ์์ ๋ด๋ณด๋ธ(exported) ๋ณ์๋ฅผ ์ฐ๊ฒฐํ์ฌ ๊ทธ๋ค ์ฌ์ด์ ๋ผ์ด๋ธ ๋ฐ์ธ๋ฉ์ ์์ฑํฉ๋๋ค.
- ์คํ: ๋ชจ๋ ์ฝ๋๊ฐ ์คํ๋ฉ๋๋ค.
๋ชจ๋ ๋ฒ๋ค๋ฌ: ํ๋ก๋์ ์ ์ํ ์ต์ ํ
์นํฉ(Webpack), ๋กค์ (Rollup), ํ์ (Parcel)๊ณผ ๊ฐ์ ๋ชจ๋ ๋ฒ๋ค๋ฌ๋ ๋ฐฐํฌ๋ฅผ ์ํด ์ฌ๋ฌ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋์ ๋จ์ผ ํ์ผ(๋๋ ์์์ ํ์ผ)๋ก ๊ฒฐํฉํ๋ ๋๊ตฌ์ ๋๋ค. ๋ฒ๋ค๋ฌ๋ ์ฌ๋ฌ ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
- HTTP ์์ฒญ ๊ฐ์: ๋ฒ๋ค๋ง์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ก๋ํ๋ ๋ฐ ํ์ํ HTTP ์์ฒญ ์๋ฅผ ์ค์ฌ ํ์ด์ง ๋ก๋ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
- ์ฝ๋ ์ต์ ํ: ๋ฒ๋ค๋ฌ๋ ์ถ์(minification), ํธ๋ฆฌ ์์ดํน(์ฌ์ฉํ์ง ์๋ ์ฝ๋ ์ ๊ฑฐ), ๋ฐ๋ ์ฝ๋ ์ ๊ฑฐ ๋ฑ ๋ค์ํ ์ฝ๋ ์ต์ ํ๋ฅผ ์ํํ ์ ์์ต๋๋ค.
- ํธ๋์คํ์ผ๋ง: ๋ฒ๋ค๋ฌ๋ ์ต์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋(์: ES6+)๋ฅผ ๊ตฌํ ๋ธ๋ผ์ฐ์ ์ ํธํ๋๋ ์ฝ๋๋ก ๋ณํ(transpile)ํ ์ ์์ต๋๋ค.
- ์์ฐ ๊ด๋ฆฌ: ๋ฒ๋ค๋ฌ๋ CSS, ์ด๋ฏธ์ง, ํฐํธ์ ๊ฐ์ ๋ค๋ฅธ ์์ฐ์ ๊ด๋ฆฌํ๊ณ ๋น๋ ํ๋ก์ธ์ค์ ํตํฉํ ์ ์์ต๋๋ค.
Webpack
Webpack์ ๊ฐ๋ ฅํ๊ณ ๊ตฌ์ฑ ๊ฐ๋ฅ์ฑ์ด ๋์ ๋ชจ๋ ๋ฒ๋ค๋ฌ์
๋๋ค. ๊ตฌ์ฑ ํ์ผ(webpack.config.js)์ ์ฌ์ฉํ์ฌ ์ง์
์ , ์ถ๋ ฅ ๊ฒฝ๋ก, ๋ก๋ ๋ฐ ํ๋ฌ๊ทธ์ธ์ ์ ์ํฉ๋๋ค.
๊ฐ๋จํ Webpack ๊ตฌ์ฑ ์์:
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
Rollup
Rollup์ ๋ ์์ ๋ฒ๋ค์ ์์ฑํ๋ ๋ฐ ์ค์ ์ ๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ๋ก, ๊ณ ์ฑ๋ฅ์ด ํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ํฉํฉ๋๋ค. ํธ๋ฆฌ ์์ดํน์ ๋ฐ์ด๋ฉ๋๋ค.
๊ฐ๋จํ Rollup ๊ตฌ์ฑ ์์:
// rollup.config.js
import babel from '@rollup/plugin-babel';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
name: 'MyLibrary'
},
plugins: [
babel({
exclude: 'node_modules/**'
})
]
};
Parcel
Parcel์ ๊ฐ๋จํ๊ณ ๋น ๋ฅธ ๊ฐ๋ฐ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ ์ ๋ก ๊ตฌ์ฑ(zero-configuration) ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ๋๋ค. ๊ตฌ์ฑ ํ์ผ ์์ด ์ง์ ์ ๊ณผ ์์กด์ฑ์ ์๋์ผ๋ก ๊ฐ์งํ๊ณ ์ฝ๋๋ฅผ ๋ฒ๋ค๋งํฉ๋๋ค.
์์กด์ฑ ๊ด๋ฆฌ ์ ๋ต
ํจ๊ณผ์ ์ธ ์์กด์ฑ ๊ด๋ฆฌ๋ ์ ์ง๋ณด์ ๊ฐ๋ฅํ๊ณ ํ์ฅ ๊ฐ๋ฅํ ์๋ฐ์คํฌ๋ฆฝํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ๋ชจ๋ฒ ์ฌ๋ก์ ๋๋ค:
- ํจํค์ง ๊ด๋ฆฌ์ ์ฌ์ฉ: npm์ด๋ yarn์ Node.js ํ๋ก์ ํธ์์ ์์กด์ฑ์ ๊ด๋ฆฌํ๋ ๋ฐ ํ์์ ์ ๋๋ค.
- ๋ฒ์ ๋ฒ์ ์ง์ :
package.json์์ ์์กด์ฑ์ ๋ฒ์ ๋ฒ์๋ฅผ ์ง์ ํ๊ธฐ ์ํด ์ ์์ ๋ฒ์ (semver)์ ์ฌ์ฉํ์ธ์. ์ด๋ฅผ ํตํด ํธํ์ฑ์ ๋ณด์ฅํ๋ฉด์ ์๋ ์ ๋ฐ์ดํธ๊ฐ ๊ฐ๋ฅํฉ๋๋ค. - ์์กด์ฑ์ ์ต์ ์ํ๋ก ์ ์ง: ๋ฒ๊ทธ ์์ , ์ฑ๋ฅ ํฅ์ ๋ฐ ๋ณด์ ํจ์น์ ์ด์ ์ ์ป๊ธฐ ์ํด ์ ๊ธฐ์ ์ผ๋ก ์์กด์ฑ์ ์ ๋ฐ์ดํธํ์ธ์.
- ์์กด์ฑ ์ฃผ์ ์ฌ์ฉ: ์์กด์ฑ ์ฃผ์ ์ ์ปดํฌ๋ํธ๋ฅผ ์์กด์ฑ์์ ๋ถ๋ฆฌํ์ฌ ์ฝ๋๋ฅผ ๋ ํ ์คํธํ๊ธฐ ์ฝ๊ณ ์ ์ฐํ๊ฒ ๋ง๋ญ๋๋ค.
- ์ํ ์์กด์ฑ ํผํ๊ธฐ: ์ํ ์์กด์ฑ์ ์๊ธฐ์น ์์ ๋์๊ณผ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์ต๋๋ค. ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ํ ์์กด์ฑ์ ๊ฐ์งํ๊ณ ํด๊ฒฐํ์ธ์.
์ฑ๋ฅ ์ต์ ํ ๊ธฐ๋ฒ
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ๋ก๋ฉ ๋ฐ ์คํ์ ์ต์ ํํ๋ ๊ฒ์ ์ํํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ๊ธฐ๋ฒ์ ๋๋ค:
- ์ฝ๋ ๋ถํ : ์ ํ๋ฆฌ์ผ์ด์ ์ฝ๋๋ฅผ ํ์ํ ๋ ๋ก๋ํ ์ ์๋ ๋ ์์ ์ฒญํฌ๋ก ๋ถํ ํ์ธ์. ์ด๋ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ์ค์ด๊ณ ์ฒด๊ฐ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
- ํธ๋ฆฌ ์์ดํน: ๋ชจ๋์์ ์ฌ์ฉํ์ง ์๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํ์ฌ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ด์ธ์.
- ์ถ์(Minification): ๊ณต๋ฐฑ์ ์ ๊ฑฐํ๊ณ ๋ณ์ ์ด๋ฆ์ ์ค์ฌ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์ ํฌ๊ธฐ๋ฅผ ์ค์ด์ธ์.
- ์์ถ: gzip ๋๋ Brotli๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์์ถํ์ฌ ๋คํธ์ํฌ๋ฅผ ํตํด ์ ์กํด์ผ ํ๋ ๋ฐ์ดํฐ ์์ ์ค์ด์ธ์.
- ์บ์ฑ: ๋ธ๋ผ์ฐ์ ์บ์ฑ์ ์ฌ์ฉํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ก์ปฌ์ ์ ์ฅํ์ฌ ํ์ ๋ฐฉ๋ฌธ ์ ๋ค์ด๋ก๋ ํ์์ฑ์ ์ค์ด์ธ์.
- ์ง์ฐ ๋ก๋ฉ(Lazy loading): ๋ชจ๋์ด๋ ์ปดํฌ๋ํธ๋ฅผ ํ์ํ ๋๋ง ๋ก๋ํ์ธ์. ์ด๋ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- CDN ์ฌ์ฉ: ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN)๋ฅผ ์ฌ์ฉํ์ฌ ์ง๋ฆฌ์ ์ผ๋ก ๋ถ์ฐ๋ ์๋ฒ์์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์ ๊ณตํ์ฌ ์ง์ฐ ์๊ฐ์ ์ค์ด์ธ์.
๊ฒฐ๋ก
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ์ธํฐํ๋ฆฌํฐ ํจํด๊ณผ ์ฝ๋ ์คํ ์ ๋ต์ ์ดํดํ๋ ๊ฒ์ ํ๋์ ์ด๊ณ ํ์ฅ ๊ฐ๋ฅํ๋ฉฐ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์๋ฐ์คํฌ๋ฆฝํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ํ์์ ์ ๋๋ค. CommonJS, AMD, ES ๋ชจ๋๊ณผ ๊ฐ์ ๋ชจ๋ ์์คํ ์ ํ์ฉํ๊ณ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ์์กด์ฑ ๊ด๋ฆฌ ๊ธฐ์ ์ ์ฌ์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ํจ์จ์ ์ด๊ณ ์ ๊ตฌ์ฑ๋ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ๋ํ, ์ฝ๋ ๋ถํ , ํธ๋ฆฌ ์์ดํน, ์ถ์์ ๊ฐ์ ์ฑ๋ฅ ์ต์ ํ ๊ธฐ์ ์ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๊ณ์ ๋ฐ์ ํจ์ ๋ฐ๋ผ, ์ต์ ๋ชจ๋ ํจํด๊ณผ ๋ชจ๋ฒ ์ฌ๋ก์ ๋ํ ์ ๋ณด๋ฅผ ํ์ ํ๋ ๊ฒ์ ์ค๋๋ ์ฌ์ฉ์์ ์๊ตฌ๋ฅผ ์ถฉ์กฑํ๋ ๊ณ ํ์ง ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ๋งค์ฐ ์ค์ํ ๊ฒ์ ๋๋ค.
์ด ์ฌ์ธต ๋ถ์์ ์ด๋ฌํ ๊ฐ๋ ์ ์ดํดํ๊ธฐ ์ํ ๊ฒฌ๊ณ ํ ๊ธฐ๋ฐ์ ์ ๊ณตํฉ๋๋ค. ๊ณ์ํด์ ํ์ํ๊ณ ์คํํ์ฌ ๊ธฐ์ ์ ์ฐ๋งํ๊ณ ๋ ๋์ ์๋ฐ์คํฌ๋ฆฝํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ์ธ์.