[Javascript] 예제 소스 정리 - 모듈

bitcamp-ncp\`html css js exam\javascript\ex10

 

예제 소스 정리

 

모듈

 

 

export/import - 문법

js 파일 하나는 모듈 하나이다.

모듈을 가져오려면 import 하면 된다.

모듈을 외부에 공개하려면 export 해야 한다.

// javascript\ex10\exam01.html

<script type="module">
  import {v1} from "./modules/m1.js";
  console.log(v1);

// modules\m1.js

export const v1 = 100;

 

 

export/import - 기본 프로퍼티

default export는 모듈 내에서 한번만 사용 가능하고 named export는 여러번 사용 가능하다.

default export로 내보내면 import에선 내보낸 이름 그대로 바로 사용할 수 있지만, named export로 내보내면 { }로 묶어서 불러와야 한다.

별칭(alias)를 as로 주어서 다른 이름으로 사용할 수도 있고 *로 한번에 불러오거나 내보낼 수도 있다.

<script type="module">
  import v1 from "./modules/m2.js";
  console.log(v1);

// modules\m2.js

const v1 = "Hello!";
export default v1;

 

 

export/import - 여러 개 프로퍼티 다루기

<script type="module">
  import {v1, v2, f1} from "./modules/m3.js";
  console.log(v1);
  console.log(v2);
  f1();

// modules\m3.js

export const v1 = 100;
export const v2 = "aaa";
export function f1() {console.log("test..ok!")}

 

 

export/import - 기본 프로퍼티와 기타 프로퍼티 다루기

<script type="module">
  // import 기본프로퍼티명, {기타 프로퍼티들} from ...
  import v2, {v1, f1} from "./modules/m4.js";
  console.log(v1);
  console.log(v2);
  f1();

// modules\m4.js

export const v1 = 100;
const v2 = "aaa";
export default v2; // 모듈 당 한 개의 default 만 가능
export function f1() {console.log("test..ok!")}

 

 

export/import - 여러 개의 프로퍼티를 내보내는 다른 방법

<script type="module">
  import v2, {v1, f1} from "./modules/m5.js";
  console.log(v1);
  console.log(v2);
  f1();

// modules\m5.js

const v1 = 100;
const v2 = "aaa";
function f1() {console.log("test..ok!")}

export {v1, f1};
export default v2;

 

 

export/import - 모듈 프로퍼티를 객체로 받기

import * as obj 로 해당 모듈을 obj 객체로 받는다.

<script type="module">
  import * as obj from "./modules/m5.js";
  console.log(obj);
  console.log(obj.v1); 
  console.log(obj.v2); 
  console.log(obj.default); // default로 설정된 프로퍼티의 이름은 "default" 이다.
  obj.f1();