JavaScript modules

이 κ°€μ΄λ“œλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ λͺ¨λ“ˆ ꡬ문을 μ‹œμž‘ν•˜λŠ”λ° ν•„μš”ν•œ λͺ¨λ“  것을 μ œκ³΅ν•©λ‹ˆλ‹€.

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