μ΄ κ°μ΄λλ μλ°μ€ν¬λ¦½νΈ λͺ¨λ ꡬ문μ μμνλλ° νμν λͺ¨λ κ²μ μ 곡ν©λλ€.
A background on modules
μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλ¨μ κ½€ μκ² μμλμμ΅λλ€. μ΄κΈ°μ μ¬μ© λ λλΆλΆμ μ€ν¬λ¦½νΈλ λ 립μ μΈ μμ μ μννμ¬, νμν κ²½μ° μΉ νμ΄μ§μ μ½κ°μ μνΈ μμ©μ μ 곡νλ―λ‘ μΌλ°μ μΌλ‘ ν° μ€ν¬λ¦½νΈκ° νμνμ§ μμμ΅λλ€. λͺλ ν μλ°μ€ν¬λ¦½νΈλ λ§μ λΈλΌμ°μ μμ μ€νλκ³ μλ μμ ν μ ν리μΌμ΄μ μ μ€νν μ μμ λΏ μλλΌ, λ€λ₯Έ 컨ν μ€νΈμμ (μλ₯Όλ€λ©΄ Node.js) μλ°μ€ν¬λ¦½νΈλ₯Ό μ¬μ©νκ² λ©λλ€.
λ°λΌμ μ΅κ·Ό λͺ λ λμ μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλ¨μ νμμ λ°λΌ κ°μ Έμ¬ μ μλ, λ³λμ λͺ¨λλ‘ λΆν νκΈ° μν 맀컀λμ¦μ μ 곡νλ κ²μ λν΄ μκ°νκΈ° μμνμ΅λλ€. node.jsλ μ€λ«λμ μ΄λ¬ν λ₯λ ₯μ κ°μ§κ³ μμκ³ , λͺ¨λ μ¬μ©μ κ°λ₯νκ²νλ λ§μ μλ°μ€ν¬λ¦½νΈ λΌμ΄λΈλ¬λ¦¬μ νλ μμν¬κ° μμ΅λλ€. (μλ₯Όλ€μ΄ RequireJSμ κ°μ CommonJS μ AMDκΈ°λ° λͺ¨λ μμ€ν , λ μ΅κ·Όμλ Webpackκ³Ό Babel κ°μ λͺ¨λ κΈ°λ° μμ€ν μ΄ μμ΅λλ€.)
μ’μ μμμ μ΅μ λΈλΌμ°μ κ° κΈ°λ³Έμ μΌλ‘ λͺ¨λ κΈ°λ₯μ μ§μνκΈ° μμνμΌλ©°, μ΄κ²μ΄ μ΄ κΈ°μ¬μ μ λΆμ λλ€. λΈλΌμ°μ λ λͺ¨λμ λ‘λ©μ μ΅μ ν ν μ μκΈ° λλ¬Έμ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νλ κ²λ³΄λ€ λ ν¨μ¨μ μ΄λ©°, ν΄λΌμ΄μΈνΈ μΈ‘μμμ μΆκ° μ²λ¦¬μ μ¬λΆμ μ볡μ λͺ¨λ ν΄μΌνλ κ² λ³΄λ€ ν¨μ¨μ μ λλ€.
Browser support
λ€μ΄ν°λΈ μλ°μ€ν¬λ¦½νΈ λͺ¨λμ import
μ export
λ¬Έ(statement)μ μμ‘΄μ μ΄λ©°, νΈνμ±μ λ€μκ³Ό κ°μ΅λλ€.
import
BCD tables only load in the browser
export
BCD tables only load in the browser
Introducing an example
λͺ¨λ μ¬μ©λ²μ μ€λͺ
νκΈ° μν΄ Githubμ κ°λ¨ν μμ λͺ¨μμ λ§λ€μμ΅λλ€. μ΄ μμ λ€μ μΉ νμ΄μ§μ <canvas>
μμ(element)λ₯Ό λ§λ€κ³ , μΊλ²μ€μ λ€μν λνμ κ·Έλ¦¬κ³ , κ·Έλ¦°κ²μ λν μ 보λ₯Ό λ³΄κ³ νλ κ°λ¨ν λͺ¨λ μ§ν©μ
λλ€.
μ΄κ²λ€μ λ§€μ° μ¬μν κ²μ΄μ§λ§, λͺ¨λμ λͺ ννκ² μ€λͺ νκΈ° μν΄ μλμ μΌλ‘ λ¨μνκ² μ μ§μ€μ λλ€.
μ£Όμ: μμ λ₯Ό λ€μ΄λ‘λνμ¬ λ‘컬μμ μ€ννλ €λ©΄, λ‘컬 μΉ μλ²λ₯Ό ν΅ν΄ μμ λ₯Ό μ€νν΄μΌ ν©λλ€.
Basic example structure
첫 λ²μ§Έ μμ (basic-modules)λ₯Ό 보면 λ€μκ³Ό κ°μ νμΌ κ΅¬μ‘°κ° μμ΅λλ€.
index.html main.js modules/ canvas.js square.js
μ£Όμ: μ΄ κ°μ΄λμ λͺ¨λ μμ λ κΈ°λ³Έμ μΌλ‘ λμΌν ꡬ쑰λ₯Ό κ°μ§λλ€. μμ λ΄μ©μ μ΅μν΄μ§μλκ² μ’μ΅λλ€.
modules λλ ν 리μ λ λͺ¨λμ λ€μκ³Ό κ°μ΅λλ€.
canvas.js
β μΊλ²μ€ μ€μ κ³Ό κ΄λ ¨λ κΈ°λ₯μ ν¬ν¨ν©λλ€.create()
β μ§μ ν IDλ₯Ό κ°μ§ λνΌ<div>
μμ, μ§μ νwidth
μheight
λ₯Ό κ°μ§ μΊλ²μ€λ₯Ό μμ±ν©λλ€. μ§μ ν ID(첫 λ²μ§Έ μΈμ)λ μ§μ ν λΆλͺ¨ μμ(λ λ²μ§Έ μΈμ)μμ μΆκ°λ©λλ€. μΊλ²μ€μ 2D 컨ν μ€νΈμ λνΌ(wrapper div)μ IDκ° λ€μ΄μλ κ°μ²΄λ₯Ό λ°νν©λλ€.createReportList()
β λ°μ΄ν°λ₯Ό μΆλ ₯νλλ° μ¬μ©ν μ μλ, μ§μ ν λνΌ μμ(div) μμ μΆκ° λ μ λ ¬λμ§ μμ 리μ€νΈ(ul)λ₯Ό λ§λλλ€. 리μ€νΈμ IDλ₯Ό λ°νν©λλ€.
square.js
β λ€μμ ν¬ν¨ν©λλ€.name
β λ¬Έμμ΄ 'square'λ₯Ό λ΄κ³ μλ μμμ λλ€.draw()
β μ§μ λ ν¬κΈ°, μμΉ, μμμ μ¬μ©νμ¬ μ§μ λ μΊλ²μ€μ μ¬κ°νμ 그립λλ€. μ¬κ°νμ ν¬κΈ°, μμΉ, μμμ ν¬ν¨νλ κ°μ²΄λ₯Ό λ°νν©λλ€.reportArea()
β κΈΈμ΄κ° μ£Όμ΄μ§λ©΄ μ¬κ°νμ λμ΄λ₯Ό μ§μ ν λ³΄κ³ μ 리μ€νΈμ μμ±ν©λλ€.reportPerimeter()
β κΈΈμ΄κ° μ£Όμ΄μ§λ©΄ μ¬κ°νμ λλ λ₯Ό μ§μ ν λ³΄κ³ μ 리μ€νΈμ μμ±ν©λλ€.
Exporting module features
λͺ¨λ κΈ°λ₯μ μ¬μ©νλ €λ©΄ λ¨Όμ ν¨μλ₯Ό export ν΄μΌ ν©λλ€. μ΄ μμ
μ export
λ¬Έ(statement)μ μ¬μ©νμ¬ μνν©λλ€.
μ΄λ₯Ό μ¬μ©νλ κ°μ₯ μ¬μ΄ λ°©λ²μ λͺ¨λ λ°μΌλ‘ λ΄λ³΄λ΄λ €λ νλͺ© μμ (exportλ₯Ό) λ°°μΉνλ κ²μ λλ€. μλ₯Όλ€λ©΄ λ€μκ³Ό κ°μ΅λλ€.
export const name = 'square';
export function draw(ctx, length, x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, length, length);
return {
length: length,
x: x,
y: y,
color: color
};
}
functions, var
, let
, const
, classλ₯Ό λ΄λ³΄λΌ μ μμ§λ§, μ΅μμ νλͺ©μ΄μ΄μΌ ν©λλ€. μλ₯Όλ€μ΄, ν¨μ μμμ export
λ₯Ό μ¬μ©ν μ μμ΅λλ€.
μ¬λ¬ νλͺ©μ λ΄λ³΄λ΄λ λ νΈλ¦¬ν λ°©λ²μ λͺ¨λ νμΌ λμ νλμ export λ¬Έμ μ¬μ©νλ κ²μ λλ€. κ·Έ λ€μμ λ΄λ³΄λ΄λ €λ κΈ°λ₯λ€μ μΌνλ‘ κ΅¬λΆνμ¬ λμ΄νκ³ μ€κ΄νΈλ‘ λ¬Άμ΅λλ€.
export { name, draw, reportArea, reportPerimeter };
Importing features into your script
λͺ¨λμμ μΌλΆ κΈ°λ₯μ λ΄λ³΄λΈ νμλ, μ΄λ₯Ό μ¬μ©ν μ μλλ‘ μ°λ¦¬κ° μ¬μ©ν μ€ν¬λ¦½νΈλ‘ κ°μ ΈμμΌ ν©λλ€. κ°μ₯ κ°λ¨ν λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€.
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
import
λ¬Έ(statement)μ μ¬μ©νκ³ , κ°μ Έμ¬ λͺ©λ‘μ μΌνλ‘ κ΅¬λΆνμ¬ λμ΄ν λ€ κ΄νΈλ‘ λ¬Άμ΅λλ€. κ·Έ λ€μλ fromμ μ°κ³ λͺ¨λ νμΌμ κ²½λ‘λ₯Ό μμ±ν©λλ€. (μ¬μ΄νΈ 루νΈμ μ°κ΄λ κ²½λ‘λ‘, μ°λ¦¬μ basic-modules
μμ λ /js-examples/modules/basic-modules
μ
λλ€) main.js
μμ μ΄λ¬ν μ½λλ₯Ό λ³Ό μ μμ΅λλ€.
κ·Έλ¬λ μ°λ¦¬λ κ²½λ‘λ₯Ό μ‘°κΈ λ€λ₯΄κ² μμ±νμ΅λλ€. μ°λ¦¬λ "νμ¬ μμΉ"λ₯Ό μλ―Ένλ μ (.) ꡬ문μ μ¬μ©νκ³ μμΌλ©°, κ·Έ λ€μμ μ°Ύκ³ μνλ νμΌμ κ²½λ‘λ₯Ό λ€μ μ¨ μ€λλ€. μ΄κ²μ μλμ μΌλ‘ μ 체 μλ κ²½λ‘λ₯Ό μμ±νλ κ²λ³΄λ€ ν¨μ¬ λΉ λ₯΄λ©°, URLμ΄ λ μ§§μ μ§λ―λ‘ μ¬μ΄νΈ κ³μΈ΅ ꡬ쑰μ λ€λ₯Έ μμΉλ‘ μ΄λνλλΌλ μ΄ μμ κ° κ³μ μλν©λλ€.
μλ₯Όλ€λ©΄,
/js-examples/modules/basic-modules/modules/square.js
μ΄λ κ² μΈ μ μμ΅λλ€.
./modules/square.js
main.js
μμ μ΄λ¬ν μ½λλ₯Ό λ³Ό μ μμ΅λλ€.
μ£Όμ: μΌλΆ λͺ¨λ μμ€ν
μμλ νμΌ νμ₯λͺ
μ μλ΅ν μ μμ΅λλ€. (μ: '/modules/square'
). μ΄κ²μ λ€μ΄ν°λΈ μλ°μ€ν¬λ¦½νΈμμλ μλνμ§ μμ΅λλ€. λν μμ μ¬λμλ₯Ό ν¬ν¨ν΄μΌ ν©λλ€.
μ°λ¦¬μ μ€ν¬λ¦½νΈμ κΈ°λ₯μ κ°μ Έμ€λ©΄ λμΌν νμΌ λ΄μ μ μν κ²μ²λΌ κΈ°λ₯μ μ¬μ©ν μ μμ΅λλ€. λ€μμ main.js
μ import ν μλμ μμ΅λλ€.
let myCanvas = create('myCanvas', document.body, 480, 320);
let reportList = createReportList(myCanvas.id);
let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
reportArea(square1.length, reportList);
reportPerimeter(square1.length, reportList);
Applying the module to your HTML
μ΄μ main.js
λͺ¨λμ HTML νμ΄μ§μ μ μ©νλ©΄ λ©λλ€. μ΄λ λͺ κ°μ§ μ£Όλͺ©ν λ§ν μ°¨μ΄μ μ μ μΈνλ©΄ HTMLνμ΄μ§μ μΌλ° μ€ν¬λ¦½νΈλ₯Ό μ μ©νλκ²κ³Ό λ§€μ° μ μ¬ν©λλ€.
μ΄ μ€ν¬λ¦½νΈλ₯Ό λͺ¨λλ‘ μ μΈνλ €λ©΄ <script>
μμ(element)μ type="module"
μ ν¬ν¨μμΌμΌ ν©λλ€.
<script type="module" src="main.js"></script>
κΈ°λ³Έμ μΌλ‘ λͺ¨λ κΈ°λ₯μ κ°μ Έμ€λ μ€ν¬λ¦½νΈλ μ΅μμ λͺ¨λλ‘ μλν©λλ€. μ΄λ₯Ό μλ΅νλ©΄ νμ΄μ΄νμ€λ‘ μλ₯Όλ€λ©΄, "SyntaxError: import declarations may only appear at top level of a module"λΌλ μ€λ₯λ₯Ό μ€λλ€.
import
μ export
λ¬Έ(statement)μ λͺ¨λ λ΄μμλ§ μ¬μ©ν μ μμ΅λλ€. μ κ· μ€ν¬λ¦½νΈκ° μλλλ€.
μ£Όμ: type="module"
μ ν¬ν¨νλ©΄ μΈν°λ μ€ν¬λ¦½νΈμμλ import λͺ¨λμ μ¬μ©ν μ μμ΅λλ€. μ: <script type="module"> /* μ¬κΈ°μ μ½λλ₯Ό μμ±νμΈμ */ </script>
.
Other differences between modules and standard scripts
- λ‘컬 ν
μ€νΈμμμ μ£Όμ μ¬ν β HTMLνμΌμ λ‘컬(μλ₯Όλ€μ΄
file://
URL)μμ λ‘λνλ €κ³ νλ©΄, μλ°μ€ν¬λ¦½νΈ λͺ¨λ 보μ μꡬ μ¬νμΌλ‘ μΈν΄ CORSμ€λ₯κ° λ°μν©λλ€. μλ²λ₯Ό ν΅ν΄ ν μ€νΈ ν΄μΌ ν©λλ€. - νμ€ μ€ν¬λ¦½νΈμ λ¬λ¦¬ λͺ¨λ λ΄λΆμμ μ μλ μ€ν¬λ¦½νΈ μΉμ κ³Όλ λ€λ₯΄κ² λμν μ μμ΅λλ€. μ΄λ λͺ¨λμ΄ μλμ μΌλ‘ strict modeλ₯Ό μ¬μ©νκΈ° λλ¬Έμ λλ€.
- λͺ¨λ μ€ν¬λ¦½νΈλ₯Ό λΆλ¬μ¬ λ
defer
μμ±(<script>
attributes)λ₯Ό μ¬μ©ν νμκ° μμ΅λλ€. λͺ¨λμ μλμΌλ‘ deferλ©λλ€. - λ§μ§λ§μΌλ‘ λͺ¨λ κΈ°λ₯μ λ¨μΌ μ€ν¬λ¦½νΈμ μ€μ½νλ‘ κ°μ Έμμμ λΆλͺ ν ν΄μΌ ν©λλ€. β μ μ μ€μ½νμμλ μ¬μ©ν μ μμ΅λλ€. λ°λΌμ importν μ€ν¬λ¦½νΈμμ κ°μ Έμ¨ κΈ°λ₯μλ§ μ κ·Όν μ μμ΅λλ€. μλ₯Όλ€μ΄ μλ°μ€ν¬λ¦½νΈ μ½μμμ μ κ·Όν μ μμ΅λλ€. DevToolsμ ꡬ문 μ€λ₯κ° νμλμ§λ§, μ¬μ©νλ €κ³ νλ λλ²κΉ κΈ°μ μ€ μΌλΆλ μ¬μ©ν μ μμ΅λλ€.
Default exports versus named exports
μ§κΈκΉμ§ μ°λ¦¬κ° export ν κΈ°λ₯μ named exports λ‘ κ΅¬μ±λμμ΅λλ€. κ° νλͺ©(function, const
λ±)μ export ν λ μ΄λ¦μΌλ‘ μ°Έμ‘°λμμΌλ©°, import ν λμ μ΄ μ΄λ¦μ μ°Έμ‘°νμ¬ μ¬μ©ν©λλ€.
κ·Έ μΈμλ default export λΌκ³ λΆλ₯΄λ export λ μμ΅λλ€. μ΄κ²μ λͺ¨λμ΄ μ 곡νλ κΈ°λ³Έ κΈ°λ₯μ μ½κ² λ§λ€ μ μλλ‘ μ€κ³λμμ΅λλ€. λν μλ°μ€ν¬λ¦½νΈ λͺ¨λμ κΈ°μ‘΄μ CommonJS μ AMD λͺ¨λ μμ€ν κ³Ό ν¨κ» μ¬μ©(interpolate)νλλ°λ λμμ΄ λ©λλ€. (Jason Orendorffμ μν΄ μμ±λ ES6 In Depth: Modules μ μ€λͺ λμ΄μμ΅λλ€. "Default exports"λ₯Ό κ²μν΄λ³΄μΈμ)
μμ λ₯Ό κ°μ§κ³ μ΄λ»κ² μλνλμ§ μ΄ν΄λ³΄κ² μ΅λλ€. μμ μ€ basic-modules νλ‘μ νΈμ square.js
νμΌμμ μμμ μμ, ν¬κΈ°, μμΉλ‘ κ°λ μ¬κ°νμ λ§λλ randomSquare()
λΌλ ν¨μλ₯Ό μ°Ύμ μ μμ΅λλ€. μ΄κ²μ κΈ°λ³Έκ°μΌλ‘ exportνλ €κ³ νλ―λ‘, νμΌμ 맨 μλμ λ€μκ³Ό κ°μ΄ μλλ€.
export default randomSquare;
μ€κ΄νΈκ° μμμ μ£ΌμνμΈμ.
λμ ν¨μ μμ export default
λ₯Ό μΆκ°νκ³ , λ€μκ³Ό κ°μ΄ μ΅λͺ
ν¨μλ‘ μ μΈν μ μμ΅λλ€.
export default function(ctx) {
...
}
main.js
νμΌμμ λ€μ μ½λμ²λΌ μ¬μ©νλ©΄, default functionμ΄ import λ©λλ€.
import randomSquare from './modules/square.js';
λ€μ λ§νμ§λ§, μ€κ΄νΈκ° μλ€λ μ μ μ μνμΈμ. νλμ λͺ¨λμ νλμ default exportλ§ νμ©νκΈ° λλ¬Έμ μ°λ¦¬λ randomSquare
κ° ν΄λΉ λͺ¨λμμ μ μ μμ΅λλ€. μμ μ½λλ μλμ μ½λλ₯Ό λ¨μΆνμ¬ μ¬μ©ν κ²μ
λλ€.
import {default as randomSquare} from './modules/square.js';
μ£Όμ: exportν νλͺ©μ μ΄λ¦μ λ°κΎΈλ ꡬ문μ Renaming imports and exports μΉμ μμ μ€λͺ ν©λλ€.
Avoiding naming conflicts
μ§κΈκΉμ§ μ°λ¦¬μ μΊλ²μ€ λν 그리기 λͺ¨λμ μ λλ‘ μλνλ κ² κ°μ΅λλ€. μμ΄λ μΌκ°νμ²λΌ λ€λ₯Έ λνμ 그리λ λͺ¨λμ μΆκ°νλ €κ³ νλ©΄ μ΄λ»κ² λ κΉμ? μ΄ λν(shape)μλ μλ§λ draw()
, reportArea()
λ±κ³Ό κ°μ κ΄λ ¨ ν¨μκ° μμ κ²μ
λλ€. λμΌν μ΄λ¦μ μ¬λ¬ ν¨μλ₯Ό λμΌν μ΅μμ λͺ¨λλ‘ κ°μ Έμ€λ €κ³ νλ©΄, μΆ©λκ³Ό μλ¬κ° λ°μν©λλ€.
λ€νμ€λ½κ²λ μ΄ λ¬Έμ λ₯Ό ν΄κ²°ν μ μλ μ¬λ¬κ°μ§ λ°©λ²μ΄ μμ΅λλ€. λ€μ μΉμ μμ μ΄ λ΄μ©μ μ΄ν΄λ³΄κ² μ΅λλ€.
Renaming imports and exports
import
μ export
λ¬Έ(statement)μ μ€κ΄νΈ μμ as
ν€μλλ₯Ό μ ν¨μμ μ΄λ¦μΌλ‘ ν¨κ» μ¬μ©νμ¬, μ΅μμ λͺ¨λ λ΄λΆμ ν¨μλ€μ μλ³ κ°λ₯ν μ΄λ¦μΌλ‘ λ³κ²½ν μ μμ΅λλ€.
μλ₯Όλ€μ΄ λ€μ λ κ°μ§ λ°©λ²μ μ½κ°μ μ°¨μ΄κ° μμ§λ§, λ λ°©λ² λͺ¨λ λμΌν μμ μ μννκ³ μμ΅λλ€.
// inside module.js
export {
function1 as newFunctionName,
function2 as anotherNewFunctionName
};
// inside main.js
import { newFunctionName, anotherNewFunctionName } from './modules/module.js';
// inside module.js
export { function1, function2 };
// inside main.js
import { function1 as newFunctionName,
function2 as anotherNewFunctionName } from './modules/module.js';
μ€μ μ¬λ‘λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€. renaming λλ ν 리μμ μκ³Ό μΌκ°νμ κ·Έλ¦¬κ³ λ³΄κ³ νκΈ° μν΄ circle.js
μ triangle.js
λͺ¨λμ μΆκ°νλ€λ μ λ§ μ μΈνλ©΄, μμ μμ λμΌν λͺ¨λ μμ€ν
μ λ³Ό μ μμ΅λλ€.
μ΄ λͺ¨λλ κ°κ°μλ λ΄λΆμ μΌλ‘ λμΌν μ΄λ¦μ κΈ°λ₯μ΄ μμ΅λλ€. λ°λΌμ κ°κ° νλ¨μ λμΌν export λ¬Έ(statement)μ΄ μμ΅λλ€.
export { name, draw, reportArea, reportPerimeter };
μ΄κ²λ€μ main.js
μ κ°μ Έμ¬ λ μ°λ¦¬λ λ€μκ³Ό κ°μ΄ μλν μ μμ΅λλ€.
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';
μμκ°μ΄ μ μΌλ©΄ λΈλΌμ°μ μμ "SyntaxError: redeclaration of import name"κ³Ό κ°μ μ€λ₯κ° λ°μν©λλ€. (Firefox).
λμ importκ° κ³ μ νλλ‘(μλ³ κ°λ₯νλλ‘) μ΄λ¦μ λ³κ²½ν΄μΌ ν©λλ€.
import { name as squareName,
draw as drawSquare,
reportArea as reportSquareArea,
reportPerimeter as reportSquarePerimeter } from './modules/square.js';
import { name as circleName,
draw as drawCircle,
reportArea as reportCircleArea,
reportPerimeter as reportCirclePerimeter } from './modules/circle.js';
import { name as triangleName,
draw as drawTriangle,
reportArea as reportTriangleArea,
reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';
λ€μκ³Ό κ°μ΄ importνλ νμΌ λμ λͺ¨λ νμΌμμ λ¬Έμ λ₯Ό ν΄κ²°ν μλ μμ΅λλ€.
// in square.js
export { name as squareName,
draw as drawSquare,
reportArea as reportSquareArea,
reportPerimeter as reportSquarePerimeter };
// in main.js
import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';
κ·Έλ¦¬κ³ μ΄κ²μ λκ°μ΄ μλ ν κ²μ λλ€. μ¬μ©νλ μ€νμΌμ κ°μΈμ μ·¨ν₯μ΄μ§λ§, λͺ¨λ μ½λλ₯Ό κ·Έλλ‘ λκ³ import λ₯Ό λ³κ²½νλ κ²μ΄ λ ν©λ¦¬μ μ λλ€. νΉν μ μ΄ κΆνμ΄ μλ μ¨λ νν° λͺ¨λμμ importλ₯Ό μ¬μ©νλ κ²½μ°μ νΉν μ μ©ν©λλ€.
Creating a module object
μμ λ°©λ²μ μ μμ μΌλ‘ μλνμ§λ§, λ€μ μ§μ λΆνκ³ κΈΈμ΄μ§ μ μμ΅λλ€. λ³΄λ€ λμ ν΄κ²°μ± μ κ° λͺ¨λμ κΈ°λ₯μ λͺ¨λ κ°μ²΄ λ΄λΆλ‘ κ°μ Έμ€λ κ²μ λλ€. λ€μκ³Ό κ°μ ꡬ문μ μ¬μ©ν©λλ€.
import * as Module from './modules/module.js';
μ΄ λͺ¨λμ module.js
λ΄μμ μ¬μ©ν μ μλ λͺ¨λ exportλ₯Ό κ°μ Έμ΅λλ€. κ·Έλ¦¬κ³ κ·Έκ²λ€μ κ°μ²΄ Module
μ λ©€λ²λ‘ λ§λ€κ³ μ°λ¦¬ μμμ ν¨κ³Όμ μΈ λ€μμ€νμ΄μ€λ₯Ό μ 곡ν©λλ€.
Module.function1()
Module.function2()
etc.
λ€μ ν λ² μ€μ μ¬λ‘λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€. module-objects λλ ν λ¦¬λ‘ κ°λ©΄ κ°μ μμ λ₯Ό λ³Ό μ μμ§λ§, μλ‘μ΄ κ΅¬λ¬Έμ μ΄μ©νκΈ° μν΄ λ€μ μμ±ν©λλ€. λͺ¨λμμ exportλ λͺ¨λ λ€μκ³Ό κ°μ κ°λ¨ν νμμΌλ‘ μ΄λ£¨μ΄μ§λλ€.
export { name, draw, reportArea, reportPerimeter };
λ°λ©΄μ importλ λ€μκ³Ό κ°μ΅λλ€.
import * as Canvas from './modules/canvas.js';
import * as Square from './modules/square.js';
import * as Circle from './modules/circle.js';
import * as Triangle from './modules/triangle.js';
κ°κ°μ κ²½μ°μ, μ§μ ν κ°μ²΄ μ΄λ¦ μλμ μλ λͺ¨λμ importμ μ κ·Όν μ μμ΅λλ€. λ€μμ κ·Έ μμμ λλ€.
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
Square.reportArea(square1.length, reportList);
Square.reportPerimeter(square1.length, reportList);
λ°λΌμ μ΄μ λ μ΄μ κ³Ό λκ°μ μ½λλ₯Ό μμ±ν μ μμ΅λλ€. (νμν κ²½μ° κ°μ²΄ μ΄λ¦μ ν¬ν¨ν΄μΌ ν©λλ€) importλ λ³΄λ€ κΉλν΄μ‘μ΅λλ€.
Modules and classes
μ΄μ μ μμ νλ―μ΄ classλ₯Ό exportνκ±°λ import ν μλ μμ΅λλ€. μ΄κ²μ μ½λμμ μΆ©λμ νΌνκΈ° μν λ λ€λ₯Έ μ΅μ μΌλ‘, λͺ¨λ μ½λκ° μ΄λ―Έ κ°μ²΄ μ§ν₯ μ€νμΌλ‘ μμ±λ κ²½μ°μ νΉν μ μ©ν©λλ€.
μ°λ¦¬μ classes λλ ν 리μμ ES ν΄λμ€λ‘ λ€μ μμ±λ λν 그리기 λͺ¨λμ μλ₯Ό λ³Ό μ μμ΅λλ€. μλ₯Όλ€μ΄ square.js
νμΌμλ λͺ¨λ κΈ°λ₯μ΄ λ¨μΌ ν΄λμ€μ ν¬ν¨λμ΄ μμ΅λλ€.
class Square {
constructor(ctx, listId, length, x, y, color) {
...
}
draw() {
...
}
...
}
μ°λ¦¬λ λ€μκ³Ό κ°μ΄ export ν©λλ€.
export { Square };
main.js
μμ μ°λ¦¬λ λ€μκ³Ό κ°μ΄ import ν©λλ€.
import { Square } from './modules/square.js';
κ·Έλ°λ€μ ν΄λμ€λ₯Ό μ΄μ©νμ¬ μ¬κ°νμ 그립λλ€.
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
square1.draw();
square1.reportArea();
square1.reportPerimeter();
Aggregating modules
λͺ¨λμ λͺ¨μμΌ ν λκ° μμ κ²μ λλ€. μ¬λ¬ μλΈ λͺ¨λμ νλμ λΆλͺ¨ λͺ¨λλ‘ κ²°ν©νμ¬ μ¬λ¬ λ¨κ³μ μ’ μμ±μ κ°μ§ μ μμ΅λλ€. μμ λͺ¨λμμ λ€μ μμμ export ꡬ문μ μ¬μ©νν μ μμ΅λλ€.
export * from 'x.js'
export { name } from 'x.js'
μ£Όμ: μ΄κ²μ μ€μ λ‘ import μ μ€μλ§μ΄κ³ , κ·Έ λ€μ exportκ° μ΅λλ€. μλ₯Όλ€λ©΄, "λλ λͺ¨λ x.js
λ₯Ό κ°μ Έμ¨ λ€μ, μΌλΆ λλ μ λΆλ₯Ό export νκ² λ€" λΌλ λ»μ
λλ€.
μλ₯Όλ€μ΄ module-aggregation λλ ν 리λ₯Ό μ°Έμ‘°νκ² μ΅λλ€. μ΄ μμ μμλ μ΄μ ν΄λμ€ μμ λ₯Ό κΈ°λ°μΌλ‘ circle.js
, square.js
, triangle.js
μ λͺ¨λ κΈ°λ₯μ ν¨κ» λͺ¨μΌλ shapes.js
λΌλ μΆκ° λͺ¨λμ΄ μμ΅λλ€. λν μ°λ¦¬λ shapes λͺ¨λ
λλ ν 리 μμ μλ μλΈ λλ ν 리 λ΄μμ μλΈ λͺ¨λμ μ΄λ μμΌ°μ΅λλ€. μ΄μ λͺ¨λ ꡬ쑰λ λ€μκ³Ό κ°μ΅λλ€.
modules/ canvas.js shapes.js shapes/ circle.js square.js triangle.js
κ° νμ λͺ¨λμμ export ννλ κ°μ΅λλ€. μ)
export { Square };
λ€μμ μ§ν©(aggregation) λΆλΆμ
λλ€. shapes.js
μμλ λ€μκ³Ό κ°μ λ΄μ©μ΄ ν¬ν¨λμ΄ μμ΅λλ€.
export { Square } from './shapes/square.js';
export { Triangle } from './shapes/triangle.js';
export { Circle } from './shapes/circle.js';
μ΄ λͺ¨λμ κ°κ°μ μλΈ λͺ¨λμ exportλ₯Ό κ°μ Έμμ shapes.js
λͺ¨λμμ ν¨κ³Όμ μΌλ‘ μ¬μ©ν μ μλλ‘ ν©λλ€.
μ£Όμ: shapes.js
μμ μ°Έμ‘°λλ exportλ κΈ°λ³Έμ μΌλ‘ νμΌμ ν΅ν΄ 리λ€μ΄λ νΈ λκ³ μ€μ λ‘λ μ‘΄μ¬νμ§ μμΌλ―λ‘, κ°μ νμΌ λ΄μ μ μ©ν μ½λλ₯Ό μΈ μ μμ΅λλ€.
μ΄μ main.js
νμΌμμ μ°λ¦¬λ μΈ κ°μ λͺ¨λ ν΄λμ€λ₯Ό λͺ¨λ λ체ν μ μμ΅λλ€.
import { Square } from './modules/square.js';
import { Circle } from './modules/circle.js';
import { Triangle } from './modules/triangle.js';
λ€μκ³Ό κ°μ ν μ€λ‘ μμ±ν μ μμ΅λλ€.
import { Square, Circle, Triangle } from '/js-examples/modules/module-aggregation/modules/shapes.js';
Dynamic module loading
λΈλΌμ°μ μμ μ¬μ©ν μ μλ μλ°μ€ν¬λ¦½νΈ λͺ¨λ κΈ°λ₯μ μ΅μ λΆλΆμ λμ λͺ¨λ λ‘λ© μ λλ€. μ΄λ κ² νλ©΄ λͺ¨λ κ²μ μ΅μμμμ λΆλ¬μ€μ§ μκ³ , νμν λλ§ λͺ¨λμ λμ μΌλ‘ λΆλ¬μ¬ μ μμ΅λλ€. μ΄κ²μ λͺ κ°μ§ λΆλͺ ν μ±λ₯ μ΄μ μ΄ μμ΅λλ€. κ³μ μ½μ΄λ³΄κ³ μ΄λ»κ² μλνλμ§ μ΄ν΄λ΄ μλ€.
μ΄ μλ‘μ΄ κΈ°λ₯μ ν΅ν΄ import()
λ₯Ό ν¨μλ‘ νΈμΆνμ¬ λͺ¨λ κ²½λ‘λ₯Ό λ§€κ° λ³μ(parameter)λ‘ μ λ¬ν μ μμ΅λλ€. λͺ¨λ κ°μ²΄(Creating a module object μ°Έμ‘°)λ₯Ό μ¬μ©νμ¬ promiseλ₯Ό λ°ννλ©΄ ν΄λΉ κ°μ²΄μ exportμ μ κ·Όν μ μμ΅λλ€.
import('/modules/myModule.js')
.then((module) => {
// Do something with the module.
});
μμ λ₯Ό λ³΄κ² μ΅λλ€. In the dynamic-module-imports λλ ν 리μλ classes μμ λ₯Ό κΈ°λ°μΌλ‘ ν λ λ€λ₯Έ μμ κ° μμ΅λλ€. μ΄λ²μλ μμ κ° λ‘λ©λ λ μΊλ²μ€μ μ무κ²λ κ·Έλ¦¬μ§ μμ΅λλ€. λμ μ°λ¦¬λ μΈ κ°μ λ²νΌ("Circle", "Square", "Triangle")μ΄ ν¬ν¨λμ΄ μμ΅λλ€. μ΄ λ²νΌμ λλ₯΄λ©΄ νμν λͺ¨λμ λμ μΌλ‘ λΆλ¬μ¨ λ€μ, μ΄λ₯Ό μ¬μ©νμ¬ μ°κ΄λ λνμ 그립λλ€.
μ΄ μμ μμ μ°λ¦¬λ index.html νμΌκ³Ό main.js νμΌλ§ λ³κ²½νμ΅λλ€. λͺ¨λ exportλ μ΄μ κ³Ό λμΌνκ² μ μ§λ©λλ€.
main.js
μμ document.querySelector()
λ₯Ό μ¬μ©νμ¬ κ° λ²νΌμ λν μ°Έμ‘°λ₯Ό κ°μ Έμμ΅λλ€. μλ₯Όλ€λ©΄ λ€μκ³Ό κ°μ΅λλ€.
let squareBtn = document.querySelector('.square');
κ·Έλ° λ€μ κ° λ²νΌμ μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°νμ¬ ν΄λΉ λͺ¨λμ λλ₯΄λ©΄, λμ μΌλ‘ λ‘λλμ΄ λνμ 그리λλ° μ¬μ©λ©λλ€.
squareBtn.addEventListener('click', () => {
import('/js-examples/modules/dynamic-module-imports/modules/square.js').then((Module) => {
let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
square1.draw();
square1.reportArea();
square1.reportPerimeter();
})
});
Note that, promise fulfillment κ° λͺ¨λ κ°μ²΄λ₯Ό λ°ννκΈ° λλ¬Έμ ν΄λμ€λ κ°μ²΄μ νμ κΈ°λ₯μΌλ‘ λ§λ€μ΄μ§λλ€. λ°λΌμ μ΄μ Module
μ μ¬μ©νμ¬ μμ±μ(contructor)μ μ κ·Όν΄μΌ ν©λλ€. μλ₯Όλ€μ΄ Module.Square( ... )
μ κ°μ΄ μμ Module
μ΄ λΆμ΅λλ€.
See also
- Using JavaScript modules on the web, by Addy Osmani and Mathias Bynens
- ES modules: A cartoon deep-dive, Hacks blog post by Lin Clark
- ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
- Axel Rauschmayer's book Exploring JS: Modules