[JavaScript] ๐Ÿ“ฆModule(CommonJS-Nodejs, RequireJS-AMD, ESM, UMD)๐Ÿ“ฆ

HANJINยท2020๋…„ 1์›” 3์ผ
4

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
2/3

๐Ÿ™Œ์•ˆ๋…•ํ•˜์„ธ์š”๐Ÿ™Œ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ”„๋ก ํŠธ, ๋ฐฑ ๋ชจ๋‘ ์ž‘์„ฑํ•˜๋‹ค๋ณด๋ฉด ๋ชจ๋“ˆ ์‚ฌ์šฉ ๋ฐฉ์‹์ด ์ž์ฃผ ํ—ท๊ฐˆ๋ฆฌ๊ณค ํ•˜๋Š”๋ฐ์š”,
์‚ฌ์šฉ๋ฒ•์„ ์ข€ ๋” ์•Œ๊ธฐ ์‰ฝ๊ฒŒ ๋จธ๋ฆฌ์†์— ๋„ฃ๊ธฐ์œ„ํ•ด ๊ฐ๊ฐ์˜ ํŒŒํŠธ๋ณ„๋กœ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์ด ๊ธ€์„ ๋ณด์‹œ๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์— ๋Œ€ํ•ด ์‰ฝ๊ฒŒ ์ดํ•ด๊ฐ€ ๋˜์—ˆ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค!

CommonJS


CommonJS๋Š” ์›น๋ธŒ๋ผ์šฐ์ € ๋ฐ–์˜ JavaScript๋ฅผ ์œ„ํ•œ ๋ชจ๋“ˆ ์ƒํƒœ๊ณ„์˜ ๊ทœ์น™์„ ์„ค๋ฆฝํ•˜๊ธฐ ์œ„ํ•œ ํ”„๋กœ์ ํŠธ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
์›น๋ธŒ๋ผ์šฐ์ € ๋ฐ–์˜ JavaScript๋ผ ํ•˜๋ฉด ๋Œ€ํ‘œ์ ์œผ๋กœ Nodejs๊ฐ€ ์žˆ๊ฒ ๋„ค์š”.
์˜ˆ์ƒํ•˜์‹œ๋“ฏ์ด, Nodejs๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ CommonJS์˜ ๊ทœ์น™์„ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค.

export


CommonJS์˜ ๋ชจ๋“ˆ ์ œ๊ณต ๋ฐฉ์‹์€ ๋‘๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
module.exports์™€ exports

module.exports


๋จผ์ €, module์ด๋ผ๋Š” ํ‚ค์›Œ๋“œ๋Š” ๊ณต์‹ ๋ฌธ์„œ์— ์•„๋ž˜์™€ ๊ฐ™์ด ์„ค๋ช…๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.
ํ˜„์žฌ ๋ชจ๋“ˆ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ž์œ  ๋ณ€์ˆ˜, ๋นˆ ๊ฐ์ฒด๋กœ ์ดˆ๊ธฐํ™” ๋˜์–ด์žˆ๋Š” ์ƒํƒœ
์ฆ‰, module์€ ํ˜„์žฌ ๋ชจ๋“ˆ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด์€ ์ผ์ข…์˜ ๋นˆ Object({})๋ผ๋Š” ๋œป์ž…๋‹ˆ๋‹ค.

๊ธฐ๋ณธ ๋ฌธ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
module.exports = expression
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์‹์€ ๊ณง ๊ฐ’์ด๊ธฐ ๋•Œ๋ฌธ์—, ๊ฐ’์œผ๋กœ ํ—ˆ์šฉ๋˜๋Š” ์–ด๋–ค ๊ฒƒ๋„ exportํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// utils.js
const PI = 3.14;
module.exports.PI = PI;

// app.js
const utils = require('./utils');
console.log(utils.PI); // 3.14

module์ด ์ผ์ข…์˜ ๊ฐ์ฒด๋ผ๊ณ  ํ–ˆ์—ˆ๋˜ ๊ฒƒ ๊ธฐ์–ตํ•˜์‹œ์ฃ ?
๊ทธ๋Ÿผ module.exports = 3.14๋กœ ๋ฐ”๊พธ๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”?

// utils.js
module.exports = 3.14;

// app.js
const utils = require('./utils');
console.log(utils); // 3.14
console.log(utils.PI); // undefined

์œ„์™€ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์„๊ฑฐ์—์š”. ๊ทธ๋ƒฅ ๊ฐ์ฒด๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋ฉด ์ดํ•ด๊ฐ€ ๋น ๋ฅด์‹ค๊ฒ๋‹ˆ๋‹ค!

exports


๊ธฐ๋ณธ์ ์œผ๋กœ exports ํ‚ค์›Œ๋“œ๋„ module.exports์™€ ๋น„์Šทํ•œ ๋ฐฉ์‹์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

// ๐Ÿ“ utils.js

exports.PI = 3.14;
console.log(module.exports === exports); // true

console.log(exports); // { PI: 3.14 }

์ฆ‰ exports๋Š” module ๊ฐ์ฒด์˜ exports๋ฅผ ์ฐธ์กฐํ•˜๋Š” ํ˜•์‹์œผ๋กœ ์ด๋ฃจ์–ด์ ธ์žˆ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

module.exports = "done";
exports.phrase = "done";

console.log(module.exports); // ???

๊ทธ๋Ÿผ ์œ„์™€ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ์–ด๋–จ๊นŒ์š”?
์ด ํฌ์ŠคํŒ…์„ ๋ณด๊ณ  ๊ณ„์‹  ๋ถ„์ด๋ผ๋ฉด, Call By Reference์— ๋Œ€ํ•ด ๋“ค์–ด๋ณด์…จ์„ ๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
์›์‹œํƒ€์ž…์€ ๊ฐ’์„ ๊ธฐ์–ตํ•˜์ง€๋งŒ, ์ฐธ์กฐํƒ€์ž…์€ ์ฃผ์†Œ๋ฅผ ๊ธฐ์–ตํ•œ๋‹ค๋Š” ๊ฒƒ, ๊ธฐ์–ต๋‚˜์‹œ๋‚˜์š”??
exports๋Š” modules.exports๋ผ๋Š” ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ์žˆ๋Š”๋ฐ,
module.exports๊ฐ€ ๊ฐ’์œผ๋กœ ๋ฎ์–ด์”Œ์›Œ์ง€๋ฉด exports๊ฐ€ ์ฐธ์กฐํ•˜๊ณ ์žˆ๋Š” ๊ฐ์ฒด๋Š” ๋” ์ด์ƒ module.exports์™€๋Š” ์ „ํ˜€ ์ƒ๊ด€์—†๋Š” ์นœ๊ตฌ๊ฐ€ ๋˜๊ฒ ์ฃ ?

์ด ๋•Œ๋ฌธ์—, exports๋Š” module.exports = expression๊ณผ๋Š” ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜, module.exports.key = value์™€ ๊ฐ™์ด ํ”„๋กœํผํ‹ฐ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import


var math = require('./math');

console.log(math.sum(1,2));

๊ฐ„๋‹จํ•˜์ฃ ?
๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ 4๊ฐ€์ง€ ๊ฒฝ์šฐ๋ฅผ ์ปค๋ฒ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
1. File Module
2. Folder as Module
3. node_modules
4. Global Directory

File Modules


์ƒ๋Œ€๊ฒฝ๋กœ์— ์žˆ๋Š” ํŒŒ์ผ ์ค‘ ํ™•์žฅ์ž๊ฐ€ .js, .json, .node์ธ ํŒŒ์ผ์„ ๋ชจ๋“ˆ๋กœ์จ ๋ถˆ๋Ÿฌ์˜ต๋‹ˆ๋‹ค. ํ™•์žฅ์ž๋Š” ์ƒ๋žตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// data.json
{ "data": "Hello World!" }

// utils.js
module.exports.PI = 3.14

// app.js
const data = require('./data');
const utils = require('./utils');

console.log(data); // { data: "Hello World!" }
console.log(utils.PI); // 3.14

/๋กœ ์‹œ์ž‘ํ•˜๋ฉด ์ ˆ๋Œ€๊ฒฝ๋กœ๋กœ, ./ํ˜น์€ ../๋กœ ์‹œ์ž‘ํ•œ๋‹ค๋ฉด ์ƒ๋Œ€๊ฒฝ๋กœ๋กœ ์ฐพ์Šต๋‹ˆ๋‹ค.
์•„๋ฌด๊ฒƒ๋„ ์—†์ด ์‹œ์ž‘ํ•  ๊ฒฝ์šฐ์—๋Š”, node_modules ํด๋”์—์„œ ์ฐพ์Šต๋‹ˆ๋‹ค.

๊ฒฝ๋กœ์—์„œ ์ฐพ์„ ์ˆ˜ ์—†์„ ๊ฒฝ์šฐ์— require()์€ ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋ฉฐ MODULE_NOT_FOUND๋ผ๋Š” ์—๋Ÿฌ๋ช…์ด ๋‚˜ํƒ€๋‚  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Folder as Modules


ํด๋”๋ฅผ require() ๊ตฌ๋ฌธ์„ ์ด์šฉํ•ด importํ•  ๋•Œ๋Š” 2๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.
1. ๋””๋ ‰ํ† ๋ฆฌ์˜ ๋ฃจํŠธ์— main๋ชจ๋“ˆ์„ ๋ช…์‹œํ•œ package.json ํŒŒ์ผ์„ ํ†ตํ•œ ๋ฐฉ๋ฒ•
ex)

// package.json
{ 
  "name": "DIY-library",
  "main": "./lib/DIY-library"
}

package.jsonํŒŒ์ผ์ด ์—†๊ฑฐ๋‚˜, main ๋ชจ๋“ˆ์˜ ์—”ํŠธ๋ฆฌํฌ์ธํŠธ๊ฐ€ ์—†์„ ๋•Œ ํ˜น์€ resolve๋˜์ง€ ์•Š์„ ๋•Œ,
๋‹ค์Œ ๋ฐฉ๋ฒ•์„ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค.
2. ๋””๋ ‰ํ† ๋ฆฌ์—์„œ index.js ๋‚˜ index.node ํŒŒ์ผ์„ ์ฐพ์Šต๋‹ˆ๋‹ค.

์œ„์˜ ๋ฐฉ๋ฒ•์ด ๋ชจ๋‘ ์‹คํŒจํ•˜๋ฉด
Node.js๋Š” Error: Cannot find module 'Module_Name'์„ ์ถœ๋ ฅํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

from node_modules


require()๋กœ ๋„˜๊ฒจ์ง„ ์ธ์ž๊ฐ€ ์ฝ”์–ด ๋ชจ๋“ˆ(์–ธ์–ด ์ž์ฒด์— ๋‚ด์žฅ ๋œ ๋ชจ๋“ˆ)์ด ์•„๋‹ˆ๋ผ๋ฉด, ๊ทธ๋ฆฌ๊ณ  /, ./, ../๋กœ ์‹œ์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด Node.js๋Š” ํ˜„์žฌ ๋ชจ๋“ˆ์˜ ์ƒ์œ„ ๋””๋ ‰ํ† ๋ฆฌ์— /node_modules๋ฅผ ๋ถ™์ด๊ณ  ๊ทธ ์œ„์น˜๋ถ€ํ„ฐ ๋ชจ๋“ˆ์„ ์ฐพ๊ธฐ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

์ฐพ์ง€ ๋ชปํ•˜๋ฉด, ๋” ์ƒ์œ„ ๋””๋ ‰ํ† ๋ฆฌ๋กœ, ํŒŒ์ผ์‹œ์Šคํ…œ์˜ ๋ฃจํŠธ๊ฒฝ๋กœ(/)์— ๋‹ฟ์„ ๋•Œ๊นŒ์ง€ ๋ฐ˜๋ณตํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ๊ฒฝ๋กœ๊ฐ€ /home/ry/projects/foo.js์ธ ํŒŒ์ผ์—์„œ require('bar.js')๋ฅผ ํ˜ธ์ถœํ•˜์˜€์„ ๋•Œ, Node.js๋Š” ์•„๋ž˜์˜ ์ˆœ์„œ๋Œ€๋กœ ๋ชจ๋“ˆ์„ ์ฐพ์Šต๋‹ˆ๋‹ค.

  • /home/ry/projects/node_modules/bar.js
  • /home/ry/node_modules/bar.js
  • /home/node_modules/bar.js
  • /node_modules/bar.js

๋ชจ๋“ˆ์ด๋ฆ„ ๋’ค์— ๊ฒฝ๋กœ๋ฅผ ์ถ”๊ฐ€ํ•ด์„œ ํŠน์ • ํŒŒ์ผ์ด๋‚˜ ์„œ๋ธŒ๋ชจ๋“ˆ์„ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
ex) require('DIY-library/path/to/file')
DIY-library๋ฅผ ๋จผ์ € ์ฐพ์€๋‹ค์Œ path/to/file์€ ์ƒ๋Œ€๊ฒฝ๋กœ๋กœ์จ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

global


์œ„์— ๋‚˜์—ด ๋œ ๋ฐฉ๋ฒ•๋“ค๋กœ ๋ชจ๋“ˆ์„ ์ฐพ์„ ์ˆ˜ ์—†๊ณ , NODE_PATH ํ™˜๊ฒฝ ๋ณ€์ˆ˜๊ฐ€ ์ฝœ๋ก (:)์œผ๋กœ ๋ถ„๋ฆฌ๋œ ์ ˆ๋Œ€๊ฒฝ๋กœ์˜ ๋ชฉ๋ก์— ์„ค์ • ๋˜์–ด์žˆ๋‹ค๋ฉด Node.js๋Š” ๊ทธ ๊ฒฝ๋กœ์—์„œ ๋ชจ๋“ˆ์„ ์ฐพ์Šต๋‹ˆ๋‹ค.

Windows์˜ ๊ฒฝ์šฐ์—๋Š” ์ฝœ๋ก ๋Œ€์‹  ์„ธ๋ฏธ์ฝœ๋ก (;)์ž…๋‹ˆ๋‹ค.

NODE_PATH๋Š” ํ˜„์žฌ์˜ Module resolution ์•Œ๊ณ ๋ฆฌ์ฆ˜์ด ์ •๋ฆฝ๋˜๊ธฐ ์ „์— ๋ชจ๋“ˆ ๋กœ๋“œ๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ๋งŒ๋“ค์–ด์กŒ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

NODE_PATH๋Š” ์—ฌ์ „ํžˆ ์ง€์›๋˜๋Š” ์ค‘์ด๋ฉฐ, NODE_PATH์„ค์ •๋œ๋‹ค๋Š” ์ ์— ๋Œ€ํ•ด์„œ ์ฃผ์˜ํ•˜์ง€ ์•Š์œผ๋ฉด, ํ”„๋กœ๊ทธ๋žจ์ด ์˜๋„์น˜ ์•Š์€ ๋™์ž‘์„ ํ•  ์ˆ˜ ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“ˆ์„ NODE_PATH์—์„œ ๊ฐ€์ ธ์˜ค๊ฒŒ๋˜๊ฑฐ๋‚˜ํ•˜์—ฌ ๋‹ค๋ฅธ ๋ฒ„์ „, ํ˜น์€ ์•„์˜ˆ ๋‹ค๋ฅธ ๋ชจ๋“ˆ์ด ๋กœ๋“œ ๋  ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

์ถ”๊ฐ€์ ์œผ๋กœ, ์•„๋ž˜ ๋ชฉ๋ก์˜ ์ „์—ญ ๋””๋ ‰ํ† ๋ฆฌ์—์„œ ๋ชจ๋“ˆ์„ ์ฐพ์Šต๋‹ˆ๋‹ค.
1. $HOME/.node_modules
2. $HOME/.node_libraries
3. $PREFIX/lib/node
$HOME์€ ์‚ฌ์šฉ์ž์˜ home ๋””๋ ‰ํ† ๋ฆฌ, $PREFIX๋Š” Node.js์—์„œ ์„ค์ •ํ•œ node_prefix์ž…๋‹ˆ๋‹ค.

AMD(Asynchronous Module Definition)


Asynchronous Module Definition์˜ ์•ฝ์ž๋กœ์จ, ๋น„๋™๊ธฐ์  ๋ชจ๋“ˆ ์„ ์–ธ์ด๋ผ๋Š” ๋œป์ž…๋‹ˆ๋‹ค.
AMD๋Š” ๋ชจ๋“ˆ ์„ ์–ธ์˜ ๋ฐฉ๋ฒ•๋ก ์ด๊ณ , ์ด๊ฒƒ์„ ๊ตฌํ˜„ํ•œ ๋Œ€ํ‘œ์ ์ธ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์€ Require.js์ž…๋‹ˆ๋‹ค.

ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ์—์„œ ๋ชจ๋“ˆ์„ ๋กœ๋”ฉํ•  ๋•Œ, ์Šคํฌ๋ฆฝํŠธ ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด์„œ ๋กœ๋”ฉํ•˜๋Š” ๊ฒƒ์€, ๋กœ๋”ฉ์ด ์™„๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ”„๋ฆฌ์ง•๋˜์–ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์— ์•ˆ์ข‹์€ ์˜ํ–ฅ์„ ๋ผ์ณค์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋ชจ๋“ˆ ๋กœ๋”ฉ์„ ํ•  ํ•„์š”๊ฐ€ ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ํƒœ์–ด๋‚ฌ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ! ์ด์ „์— ํƒœ์–ด๋‚œ ๋ฐฐ๊ฒฝ์ด ๊ทธ๋žฌ๋˜ ๊ฒƒ์ด์ง€, ์ตœ๊ทผ์—๋Š” ๋Œ€์•ˆ์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

  1. ESM - ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚ด์žฅ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ
  2. Webpack๊ณผ ๊ฐ™์€ bundler์˜ ๋ชจ๋“ˆ ๋กœ๋“œ

๊ทธ๋ž˜๋„ ์ผ๋‹จ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์•Œ์•„๋‘์–ด์•ผ๊ฒ ์ฃ โ“

<!-- index.html  -->
<html>
  ...
  <script src="require.js"></script>
  <script src="app.js"></script>
  ...
</html>
// myModule.js
define(['jquery', 'math'], function($, Math) {
  console.log($);
  console.log(Math);
  return {
    a: $,
    b: Math,
  }
});

์ฒซ๋ฒˆ์งธ ์ธ์ž์—๋Š” ๊ฐ€์ ธ์˜ฌ ๋ชจ๋“ˆ ์ด๋ฆ„์˜ ๋ฐฐ์—ด, ๋‘๋ฒˆ์งธ ์ธ์ž์—๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ๋„ฃ์œผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ๋งŒ๋“  ๋ชจ๋“ˆ requireํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

require(['myModule'], function(mod){
  console.log(mod.a) // jquery
  console.log(mod.b) // Math
});

ESM(ECMAScript Module)


ESM์€ ES6๋ถ€ํ„ฐ ์ง€์›๋˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž์ฒด ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์ž…๋‹ˆ๋‹ค.
HTML ํŒŒ์ผ์—์„œ ์ง์ ‘ ๊ฐ€์ ธ์˜ค๋Š” ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.

<html>
  //...
  <script type="module" src="lib.mjs"></script>
  <script type="module" src="app.mjs"></script>
  //...
</html>

ES6๋ชจ๋“ˆ ํŒŒ์ผ์˜ ํ™•์žฅ์ž๋Š” ๋ชจ๋“ˆ์ž„์„ ๋ช…ํ™•ํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด mjs๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ํ•˜๋„ค์š”!

๊ทธ๋Ÿผ js ํŒŒ์ผ ๋‚ด์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณผ๊นŒ์š”?

export


๋ชจ๋“ˆ๋ฐ–์œผ๋กœ ๋‚ด๋ณด๋‚ผ ๋•Œ๋Š” exportํ‚ค์›Œ๋“œ๋ฅผ ์ด์šฉํ•ฉ๋‹ˆ๋‹ค.

// module.mjs
export const pi = Math.PI;

export function square(x){
  return x * x;
}

export class Person {
  constructor(name) {
    this.name = name;
  }
}

์ฐจ๋ก€๋กœ ๋ณ€์ˆ˜, ํ•จ์ˆ˜, ํด๋ž˜์Šค๋ฅผ ๋‚ด๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•˜์ฃ ?
๋˜๋Š” ํ•œ๋ฒˆ์— ๋ชจ์•„์„œ ๋‚ด๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

// module.mjs
const pi = Math.PI;

function square(x) {
  return x * x;
}

class Person {
  constructor(name) {
    this.name = name;
  }
}

export { pi, square, Person };

import


๋ชจ๋“ˆ์„ ๊ฐ€์ ธ์˜ฌ ๋•Œ๋Š” importํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
export๋œ ์‹๋ณ„์ž๋ฅผ ๊ทธ๋Œ€๋กœ ๊ฐ€์ ธ์˜ค๋ฉฐ ํ™•์žฅ์ž๋Š” ์ƒ๋žต ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค(mjs).

// app.mjs
import { pi, square, Person } from './module.mjs';

console.log(pi); // 3.14...
console.log(square(10)); // 100
console.log(new Person('Lee')); Person { name: 'Lee' }

์–ด๋–ค๊ฐ€์š”? ์ œ๊ฐ€ ๋Š๋ผ๊ธฐ์—” ๋‹ค๋ฅธ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ๋ณด๋‹ค ํ›จ์”ฌ ์ง๊ด€์ ์ด๊ณ  ๊น”๋”ํ•ด๋ณด์ด๋„ค์š”๐Ÿ‘

ํ•œ๋ฒˆ์— ๋‚ด๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์—ˆ์œผ๋‹ˆ ํ•œ๋ฒˆ์— ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๊ฒ ์ฃ ?

// app.js
import * as lib from './module.mjs';

console.log(lib.pi);
console.log(lib.square(10));
console.log(new lib.Person('Lee'));

์ด๋ ‡๊ฒŒํ•˜๋ฉด export๋œ ๋ฐ์ดํ„ฐ๋“ค์„ ํ•œ๋ฒˆ์— ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

๋˜, ๊ฐ€์ ธ์˜ค๋ฉด์„œ ์ž์‹ ์ด ์›ํ•˜๋Š” ์ด๋ฆ„์œผ๋กœ ๋ณ€๊ฒฝํ•ด์„œ ๊ฐ€์ ธ์˜ฌ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

// app.js
import { pi as PI, square as sq, Person as P } from './module.mjs';

console.log(PI);
console.log(sq(2));
console.og(new P('Lee'));

export default


ํ•˜๋‚˜์˜ ๋ฐ์ดํ„ฐ๋งŒ์„ exportํ•  ๋•Œ๋Š” default ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

// module.mjs
export default function (x) {
  return x * x;
}

deafultํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” var, let, const๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

// module.mjs
export default () => {}; // OK

export default const foo = () => {}; // Error

defaultํ‚ค์›Œ๋“œ๋กœ export๋œ ๋ชจ๋“ˆ์€ {} ์—†์ด ์ž„์˜์˜ ์ด๋ฆ„์œผ๋กœ importํ•ฉ๋‹ˆ๋‹ค.

// module.mjs
import square from './module.mjs';

console.log(square(3)); // 9

UMD(Univerasal Module Definition)


UMD๋Š” AMD, CommonJS, window์— ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ์‹์—๊นŒ์ง€ ๋ชจ๋‘ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“ˆ ํŒจํ„ด์ž…๋‹ˆ๋‹ค.
AMD๋Š” define, CommonJS๋Š” module.exports๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ์ ์„ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

// module.js
(function(root, factory){
  if (typeof define === 'function' && define.amd) {
    define(['jquery', 'myModule'], factory); // require.js
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory(require('jquery'), require('myModule')); // CommonJS
  } else {
    root.myModule = factory(root.$, root.mod); // window
  }
}(this, function($, mod) {
  return {
    a: $,
    b: mod,
  };
});

์ด๋ ‡๊ฒŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—ฌ๋Ÿฌ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค!
์œ ์ตํ•œ ์‹œ๊ฐ„์ด์…จ๋‚˜์š”? ์ด ํฌ์ŠคํŠธ๊ฐ€ ์—ฌ๋Ÿฌ๋ถ„์ด ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์— ๋Œ€ํ•ด ์ดํ•ดํ•˜์‹œ๋Š”๋ฐ ๋„์›€์ด ๋์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ ๋˜ ๋งŒ๋‚˜์š”๐Ÿ™Œ

profile
์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด.

0๊ฐœ์˜ ๋Œ“๊ธ€