CommonJS (CJS)
- ์ญ์ฌ์ ๋ฐฐ๊ฒฝ: CommonJS๋ Node.js ํ๊ฒฝ์์ ๋ชจ๋์ ๊ด๋ฆฌํ๊ธฐ ์ํด ๋์ ๋ ๋ชจ๋ ์์คํ ์ ๋๋ค.
- ๋ชจ๋ ์ฌ์ฉ ๋ฐฉ๋ฒ:
- ๋ชจ๋ ๊ฐ์ ธ์ค๊ธฐ:
require()
ํจ์๋ฅผ ์ฌ์ฉํด ๋ค๋ฅธ ๋ชจ๋์ ๊ฐ์ ธ์ต๋๋ค.const math = require('./math');
- ๋ชจ๋ ๋ด๋ณด๋ด๊ธฐ:
module.exports
๋ฅผ ์ฌ์ฉํด ๋ชจ๋์ ๊ธฐ๋ฅ์ ๋ด๋ณด๋ ๋๋ค.module.exports = { add: (a, b) => a + b, subtract: (a, b) => a - b, };
- ๋ชจ๋ ๊ฐ์ ธ์ค๊ธฐ:
- ๋๊ธฐ์ ๋ก๋ฉ: CommonJS๋ ๋๊ธฐ์ ์ผ๋ก ๋ชจ๋์ ๋ก๋ฉํฉ๋๋ค. ์ฆ, ๋ชจ๋์ ๊ฐ์ ธ์ค๋ ์ฝ๋๊ฐ ์คํ๋๋ฉด ํด๋น ๋ชจ๋์ ์ฆ์ ๋ถ๋ฌ์ค๊ณ ์คํํฉ๋๋ค.
- Node.js ํ๊ฒฝ์์ ๋๋ฆฌ ์ฌ์ฉ๋จ: Node.js๋ ๊ธฐ๋ณธ์ ์ผ๋ก CommonJS๋ฅผ ์ง์ํฉ๋๋ค.
ECMAScript Modules (ESM)
- ์ญ์ฌ์ ๋ฐฐ๊ฒฝ: ESM์ JavaScript์ ํ์ค ๋ชจ๋ ์์คํ ์ผ๋ก, ES6(ECMAScript 2015)์์ ๋์ ๋์์ต๋๋ค. ์ด ํ์ค์ ๋ธ๋ผ์ฐ์ ์ Node.js ํ๊ฒฝ ๋ชจ๋์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ๋ชจ๋ ์ฌ์ฉ ๋ฐฉ๋ฒ:
- ๋ชจ๋ ๊ฐ์ ธ์ค๊ธฐ:
import
๋ฌธ์ ์ฌ์ฉํด ๋ชจ๋์ ๊ฐ์ ธ์ต๋๋ค.import { add, subtract } from './math.js';
- ๋ชจ๋ ๋ด๋ณด๋ด๊ธฐ:
export
๋ฌธ์ ์ฌ์ฉํด ๋ชจ๋์ ๊ธฐ๋ฅ์ ๋ด๋ณด๋ ๋๋ค.export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
- ๋ชจ๋ ๊ฐ์ ธ์ค๊ธฐ:
- ๋น๋๊ธฐ์ ๋ก๋ฉ: ESM์ ๋น๋๊ธฐ์ ์ผ๋ก ๋ชจ๋์ ๋ก๋ฉํฉ๋๋ค. ์ฆ, ๋ชจ๋์ ๊ฐ์ ธ์ค๋ ๊ณผ์ ์ด ๋น๋๊ธฐ์ ์ผ๋ก ์ฒ๋ฆฌ๋ ์ ์์ต๋๋ค.
- ๋ธ๋ผ์ฐ์ ์ Node.js ํ๊ฒฝ ๋ชจ๋์์ ์ฌ์ฉ ๊ฐ๋ฅ: ESM์ ๋ธ๋ผ์ฐ์ ์ Node.js ๋ชจ๋์์ ๊ณต์์ ์ผ๋ก ์ง์๋ฉ๋๋ค. Node.js์์๋
*.mjs
ํ์ผ ํ์ฅ์๋package.json
์์"type": "module"
์ ์ค์ ํ์ฌ ESM์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
ESM์ ์๋์๋ฆฌ
ESM์ ๋์์๋ฆฌ๋ ๊ฐ๋ตํ ๋งํ๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค
- ๊ตฌ์ฑ: ๋ชจ๋ ๋ฆฌ์์ค๋ฅผ ๋ค์ด๋ก๋ํ๊ณ ๋ชจ๋ ๋ ์ฝ๋๋ก ๋ถ์ ํฉ๋๋ค.
- ์ธ์คํด์คํ: ๋ชจ๋์์ export๋ ๊ฐ์ import ํด์ ์ฌ์ฉํ๋ ๋ ๋ค๋ฅธ ๋ชจ๋๊ณผ ์ฐ๊ฒฐํฉ๋๋ค. ์ด๋ ๊ฐ์ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ๋ง ์ฐ๊ฒฐ์์ผ์ฃผ๊ณ ๊ฐ์ ํ ๋น์ ํ์ง๋ ์์ต๋๋ค
- ํ๊ฐ: ์ฝ๋๋ฅผ ์คํํด ์๋ก ์ฐ๊ฒฐ๋ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ๊ฐ์ ํ ๋นํฉ๋๋ค.
cjs๋ชจ๋์ ๋ชจ๋์ ์ํํ๋ฉด์ ์์ 3๋จ๊ณ์ ๊ณผ์ ์ด ๋๊ธฐ์ ์ผ๋ก ํ๋ฒ์ ์ผ์ด๋ฉ๋๋ค.๋ชจ๋์ ๋ถ์ํ ๋ require ๊ตฌ๋ฌธ์ ์ฐพ์๋ ๊น์ง code๋ฅผ ์คํ์ํค๊ณ require๋ฅผ ์ฐพ์ผ๋ฉด ํ์ฌ ๋ถ์ํ๊ณ ์๋ ๋ชจ๋์ ์ ๊น ์ค๋จํ๊ณ require๋ฌธ์ ์๋ ๋ชจ๋์ ๋จผ์ ๋ถ์, ์ธ์คํด์คํ, ํ๊ฐ๋ฅผ ์งํํฉ๋๋ค. ๊ทธ๋ฌ๋ฏ๋ก path์ ๊ฐ์ ๋์ ์ผ๋ก ํ ๋นํ ์ ์์ต๋๋ค.
// module-en.js
export.format = function (content){
// code
}
//
let path = "module" + lang;
let formatter = require(path)
formatter.format(content)
Construction(๊ตฌ์ฑ)
๊ตฌ์ฑ ๋จ๊ณ์์๋ 3๊ฐ์ง ์ํฉ์ด ์ผ์ด๋ฉ๋๋ค.
- ์ด๋์์ ๋ชจ๋์ ๋ฆฌ์์ค ๋ค์ด๋ก๋ ํ ์ง ์ ํฉ๋๋ค.
- ๋ชจ๋ ํ์ผ ๋ถ๋ฌ์ค๊ธฐ
- ๋ชจ๋ ๋ ์ฝ๋๋ก ํ์ผ ๋ถ์ํ๊ธฐ
๋ชจ๋์ ์ง์
์ ์ ์ฐพ๊ฑฐ๋ ๋ชจ๋์ ๋ถ๋ฌ์ค๊ธฐ์ํด import ๊ตฌ๋ฌธ์ ๋ชจ๋ ํ์ฅ์ ํ์ํด๋๋๋ฐ host(ex. brower, node)์ ์ํด ์ด๋ฐ ํ์ฅ์๋ฅผ ํด์ํ๋ ๋ฐฉ๋ฒ๋ค์ด ๋ค๋ฆ
๋๋ค.(module resolution)
์ด๋ฌํ host๋ณ๋ก ์ฌ์ฉํ๋ module resolution์ ํตํด ์์กดํ๊ณ ์๋ ์ฌ๋ฌ ๋ชจ๋๋ค์ ์ฐจ๋ก๋ก ๋ชจ๋ ๋ ์ฝ๋๋ก ๋ถ์ํ์ฌ ํธ๋ฆฌํ์์ ๋ชจ๋ ๊ทธ๋ํ๋ฅผ ๋ง๋ญ๋๋ค.
์๊น ์์์ ์ ๊น ์ค๋ช ํ CJS๋ path์ ๋์ ์ผ๋ก ๊ฐ์ ํ ๋นํ ์ ์๋ค๊ณ ํ๋๋ฐ ESM์ ๋ชปํ ๊น์? ์๋๋๋ค. ESM๋ dynamic import๋ฅผ ํ์ฉํด์ ๋ชจ๋๊ฐ์ ๋์ ์ผ๋ก ํ ๋นํ ์ ์์ต๋๋ค. ์ด๋๋ ๋ชจ๋๊ทธ๋ํ์์ ๋ ๋ค๋ฅธ ๋ชจ๋ ๊ทธ๋ํ๋ฅผ ํ์ฑํฉ๋๋ค. ์๋ ๊ทธ๋ฆผ์ ์ฐธ๊ณ ํ๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ง์ฝ ๊ธฐ์กด์ ๋ชจ๋ ๊ทธ๋ํ๋ฅผ ๊ทธ๋ฆฌ๋ ์ค dynamic import๋ฅผ ๋ง๋ ๋ ๋ค๋ฅธ ๋ชจ๋ ๊ทธ๋ํ๋ฅผ ํ์ฑํ์๋ ๋ ๋ชจ๋ ๊ทธ๋ํ ๊ฐ์ ๊ณตํต์ผ๋ก ์ฌ์ฉํ๋ ๋ชจ๋ ์ธ์คํด์ค๊ฐ ์๋ค๋ฉด ๋ค์ ์์ฑํ๋ ๊ฒ์ด ์๋ ๊ณตํต๋ ๋ชจ๋ ์ธ์คํด์ค๋ฅผ ์๋ก ๊ณต์ ํฉ๋๋ค. ์๋ํ๋ฉด Loader ๋ชจ๋๋งต์ ๋ชจ๋์ ์บ์ฑํ๊ธฐ ๋๋ฌธ์
๋๋ค. ๋ชจ๋์ ๊ณต์ ํ๋ค๋ ๊ฒ์ ๋ชจ๋ ์ธ์คํด์ค๋ ํ๋ฒ ๋ฐ์ ์์ฑ์ด ์๋๋ค๋๊ฑธ๋ก ์ดํดํ ์ ์์ต๋๋ค.
Instantiation(์ธ์คํด์คํ)
์ธ์คํด์คํ์์๋ ์ฒ์์ผ๋ก JS Engine์ด ๋ชจ๋ ๋ ์ฝ๋์ ๋ณ์๋ค์ ๊ด๋ฆฌํ๋ module ํ๊ฒฝ ๋ ์ฝ๋๋ฅผ ์์ฑํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๋ชจ๋ ๊ทธ๋ํ์ ์์์ ์๋ ๋ชจ๋๋ถํฐ ์ฐจ๋ก๋๋ก export ๊ฐ๋ค์ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ์ฐ๊ฒฐ ์์ผ์ค๋๋ค. (๊ฐ์ ํ ๋นํ์ง ์์ต๋๋ค.) ๊ทธ๋ฐ ๋ค์ ๋ค์ ํ์ ๋ชจ๋๋ถํฐ ์์ ๋ชจ๋๊น์ง export ๊ฐ๋ค์ ์ฌ์ฉํ๋ import ๊ฐ๋ค์ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ์ฐ๊ฒฐ ์์ผ์ค๋๋ค. ๊ทธ๋ฌ๋ฉด ๋ค์๊ณผ ๊ฐ์ ๊ทธ๋ฆผ์ด ๋์ต๋๋ค.
๋ชจ๋์์ export๋ ๊ฐ์ ์ธ์ ๋ ์ง ๋ฐ๊ฟ์ ์์ง๋ง importํ ๊ฐ์ ๋ฐ๊พธ์ง ๋ชปํฉ๋๋ค.
CJS์์๋ export ํ ๊ฐ๊ณผ importํ ๊ฐ์ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ด ์ผ์นํ์ง ์์ต๋๋ค. exportํ ๊ฐ์ด ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ํ ๋น์ด ๋๋ฉด import๋ฅผ ํ ๊ฐ์ export๊ฐ์ ๋ณต์ฌํด์์ ๋ค๋ฅธ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ์ ์ฅํฉ๋๋ค.
Evaluation (ํ๊ฐ)
ํ๊ฐ ๊ณผ์ ์์ JS ์์ง์ top-level-code(ํจ์ ๋ฐ์ ์๋ ์ฝ๋)๋ค์ ์คํํ๋ฉด์ import์ export๊ฐ ์ฐ๊ฒฐ๋ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์๋ค๊ฐ ๊ฐ์ ์ฑ์์ค๋๋ค. ๊ฐ์ ์ฑ์์ฃผ๋๊ฒ ์ธ์๋ top-level-code๋ฅผ ์คํํ๋ค๋ ๊ฒ์ ์ฌ์ด๋ ์ดํํธ๋ฅผ ๋ฐ์ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ๋ชจ๋์ด ์๋ฒ๋ฅผ ํธ์ถํ ์ ์์ต๋๋ค.
// top-level-code
let count = 5
updateCountOnServer()
export {count, updateCount}
// top-level-code ์๋
function updateCountOnServer() {}
function updateCount() {}
์ด๋ฌํ ์ฌ์ด๋ ์ดํํธ ๋๋ฌธ์ ๋ชจ๋์ ๋ฑ ํ๋ฒ๋ง ํ๊ฐํฉ๋๋ค. ํ๊ฐ ๋จ๊ณ์์๋ ์ฌ๋ฌ๋ฒ ์คํํ๋๋์ ๋ฐ๋ผ์ ๊ทธ ๊ฒฐ๊ณผ๊ฐ ๋ฌ๋ผ์ง๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ด๊ฒ์ ๋ํ ๋ชจ๋์ ํ๋์ ๋ชจ๋ ๋ ์ฝ๋๋ง ๊ฐ์ง๊ณ ํ๋์ ์ธ์คํด์ค๋ง ์์ฑํ๋ ์ด์ ์ด๊ธฐ๋ ํฉ๋๋ค.
CJS, ESM์ ๋์ํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ง๋ค๊ธฐ
Rollup ์ค์
์์๊ฐ์ด CJS, ESM ์ฐจ์ด์ ๋ํด์ ์์๋ดค๋๋ฐ ๋๋ฌด๋๋ ๋ค๋ฅด๊ฒ ๋์ํ๊ธฐ ๋๋ฌธ์ ๋๊ฐ์ง ๋ชจ๋์์ ์ฌ์ฉํ ์ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค์ด์ผ ํฉ๋๋ค. ์ ๋ Rollup์ด๋ผ๋ ๋ฒ๋ค๋ฌ๋ฅผ ์ฌ์ฉํ๋๋ฐ์ ์นํฉ์ ์ฌ์ฉํ์ง ์์ ์ด์ ๋ ์นํฉ์ ๊ธฐ๋ณธ์ ์ผ๋ก HMR, dev server๋ฅผ ์ง์ํ๋๋ฐ ์ด๋ฌํ ๊ฒ๋ค์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค๋ ค๊ณ ํ ๋๋ ํ์์๋ค๊ณ ์๊ฐํด์์ ๋๋ค. ๋ํ ๋ฒ๋ค์ฌ์ด์ฆ๋ ๋กค์ ์ด ๋ ์๊ณ ๋น๋ ์๋๋ ๋นจ๋ผ์ ๋กค์ ์ ์ ํํ๊ฒ ๋์์ต๋๋ค.
๋จผ์ esm, cjs ๋ชจ๋์ ๋๋ค ์ง์ํ๊ธฐ ์ํด์ ํด๋น cjs ๋๋ mjs ํ์ผ๋ก ๋ฒ๋ค๋ง์ ํด์ผํฉ๋๋ค.
typescript ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ๋ ์ด์ ๋ ์๋ฌด๋ฐ ์ค์ ์์ด ๋ฒ๋ค๋ง์ํ๋ฉด ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ฝ์ง ๋ชปํด ๋ค์๊ณผ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
๊ทธ๋ฐ ๋ค์ ๋ฒ๋ค๋ง์ ํด๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ์ ๊ฒฐ๊ณผ๊ฐ ๋์ต๋๋ค.
declaration์ true๋ก ์ค์ ํ๋๊น ๊ฐ ํ์ผ๋ง๋ค dtsํ์ผ์ ์ค์ ํด์ ๋ฒ๋ค๋ง ๊ฒฐ๊ณผ๋ฌผ์ด ํ์ฑ๋์์ต๋๋ค. ํ์ง๋ง ์ ๊ฐ ์ํ๋๊ฑด index.d.tsํ์ผ ํ๋์๋ค๊ฐ ์ ์ฒด ๊ฒฐ๊ณผ๋ฌผ์ ์์ฑํ๋๊ฒ์
๋๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ์ํด dts ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์์ต๋๋ค.
์์๊ฐ์ด dtsํ์ผ์ ์์ฑํด์ค๋ค์์ ์ด์ ์ ์์ฑ๋ typesํด๋๋ ๋์ด์ ํ์๊ฐ ์๊ธฐ ๋๋ฌธ์ rollup-plugin-delete ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์ฌ ๋น๋๊ฐ ๋๋ ๋ ์ญ์ ๋ฅผ ํด์ค๋๋ค. ๊ทธ๋ฌ๋ฉด ๋ค์๊ณผ ๊ฐ์ด ๊น๋ํ ๋น๋ ๊ฒฐ๊ณผ๋ฌผ์ ์ป์ ์ ์์ต๋๋ค.
subpath export, conditional export
exports field๋ฅผ ์ฌ์ฉํด subpath exports๋ฅผ ์ฌ์ฉํ๋ฉด ์์ฑํ subpath๋ง ์ฌ์ฉํ๊ณ filesystem ์์ ์์น์ import path๋ฅผ ๋ค๋ฅด๊ฒ ์ง์ ํ ์ ์์ต๋๋ค.
import easyFetch from '@woogie0303/easyfetch'
//package.json
{
"name": "@woogie0303/easyfetch",
"exports": {
".": "./dist/index.js",
},
}
conditional export๋ฅผ ์ ์ฉํด import ์ผ๋ require์ผ๋ ํ์ผ์ ๊ฒฝ๋ก๋ฅผ ๋ค๋ฅด๊ฒ ์ค์ ํจ์ผ๋ก์จ cjs, esmํ๊ฒฝ์ ๋๋ค ์ง์ํ ์ ์์ต๋๋ค.
"exports": {
".": {
"require": {
"types": "./dist/cjs/index.d.ts",
"default": "./dist/cjs/index.js"
},
"import": {
"types": "./dist/esm/index.d.mts",
"default": "./dist/esm/index.mjs"
}
}
}
์ฐธ๊ณ ๋ก package.json type์ด ์ค์ ์ด ์๋์ด์๋๊ฒฝ์ฐ ๊ธฐ๋ณธ๊ฐ์ด commonjs์ ๋๋ค. ๊ทธ๋ฌ๋ฏ๋ก .js ํ์ฅ์๋ .cjs๋ก ์ธ์๋๋ฏ๋ก import์ผ๋๋ .js๋ฅผ ์ฌ์ฉํ๋ฉด์๋๊ณ .mjs๋ก ํ์ฅ์๋ฅผ ๋ช ์ํด ์ค์ผ์ง ์ฌ๋ฐ๋ฅธ ๋ชจ๋ ํ์ ์ ์ง์ํ ์ ์์ต๋๋ค. dts ํ์ผ๋ ์์ ๊ฐ์ ์ค๋ช ์ด ๋์ผํ๊ฒ ์ ์ฉ๋ฉ๋๋ค.
์ถ์ฒ
https://toss.tech/article/commonjs-esm-exports-field
https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
'๊ฐ๋ฐ > FRONTEND' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Easyfetch ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ตฌํ๊ธฐ (0) | 2024.08.23 |
---|---|
Render Props๋ฅผ ํตํ UX ๊ฐ์ (1) | 2024.08.13 |
Next.js์์ S3 ์ ๋ก๋ (0) | 2024.08.09 |
์๋น์ค๋ฅผ ์ํ ๋ก์ง ์์ฑํ๊ธฐ (0) | 2024.08.06 |
Next, MSW ๊ทธ๋ฆฌ๊ณ ESlint (0) | 2024.08.06 |