Node.js 입문주차 1주차 -4_ES6 Module 시스템

◆ 모듈(Module) : Javascript를 파일 단위로 분리된 코드 덩어리를 일컫습니다. 

‘정적(Static) 모듈 로딩’, ‘동적(Dynamic) 모듈 로딩’, 순환 종속(Circular Dependency)’  등

하나의 모듈에서 다른 모듈을 호출하여 사용할 수 있습니다.

모듈(Module)은 그 자체로도 하나의 프로그램이면서 다른 프로그램의 부품으로도 사용할 수 있습니다.

보통 1개의 파일이 1개의 모듈이 됩니다.

 

◆ 모듈의 장점

코드 베이스를 분리가능, 이를 통해 코드를 구조적으로 관리할 수 있습니다.
코드를 재사용 가능하게 만들어줍니다. (모듈화(modularize))
코드의 함수와 변수중 일부만 외부에서 사용하도록 노출시킬 수 있습니다.
    정보은닉(information hiding)을 구현가능.
해당 모듈이 참조하고 있는 다른 모듈에 대한 종속성(Dependency)을 관리하는 역할을 담당합니다.

◆  CJS(CommonJS)
Node.js 환경에서 기본적으로 사용되는 모듈 시스템입니다. 
설정을 따로 추가하지 않은 이상, Node.js에서는 CommonJS를 기본으로 사용하게 됩니다. 
require 함수를 사용하여 다른 모듈을 불러올 수 있습니다.
require 함수는 경로 혹은 문자열을 가지고 내부 알고리즘을 통해 모듈을 가져오고 종속성을 처리합니다.

 

◆ ESM(ECMA Script Module)    이걸 사용할 예정

최신 JavaScript에서 지원하는 모듈 시스템입니다.
모든 Javascript 환경에서 통합적인 인터페이스를 제공하기 위해 시작된 체계입니다. 
CommonJS와는 다르게 정적(Static)으로 모듈을 가져오며 비동기적 모듈 로딩과 순환 종속을 처리합니다. 

 

◆ Module 사용

hacks.mozilla.org

export 명령어를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다.
 하나의 큰 프로그램들을 작게 나누어, 다른 파일에서도 재사용 할 수 있습니다.
import, require 명령어를 사용하면 외부 모듈의 기능을 가져올 수 있습니다.

◆  import : 정적 로딩(Static Loading)을 지원. ES6(ES2015)로 모듈 시스템을 관리할 때 사용합니다.

import 문은 코드의 최상위에 위치합니다.

◆  require : 동적 로딩(Dynamic Loading)을 지원 .  CommonJS로 모듈 시스템을 관리할 때 사용합니다.

require 문은 코드의 어디에서든 사용할 수 있습니다.

https://nodejs.org/api/modules.html

 

◆ ES6 Module 사용

modules 폴더를 생성해 math.js, run.js 라는 파일을 생성합니다.

// modules/math.js
// add 함수를 외부로 노출시킵니다.
export function add(a, b) {
 return a + b;
}

// modules/run.js
import { add } from './math.js'  // ./math.js 파일에서 add 함수를 가져옵니다.
console.log(add(3, 4)); // import한 add 함수를 실행합니다.

// Print: 7

 

import 방법

import { 모듈명 } from '상대경로'

 

 

◆ 모듈 오류

package.json에 "type": "module" 이 없으면 추가하세요.

 

◆ 화살표 함수 export

/** 화살표 함수 export **/
// 모듈을 호출했을 때, addArrowFunction 키 값에는 addArrowFunction 변수 함수가 가지고 있는 값이 할당됩니다.
export const addArrowFunction = (a, b) => {
  return a + b;
}

/** 화살표 함수 import **/
import { addArrowFunction } from './math.js'
console.log(addArrowFunction(5, 3));

// Print: 8

◆ 익명 함수 export

/** 익명 함수 export **/
// 모듈을 호출했을 때, addAnonymousFunction 키 값에는 (a,b){return a + b;} 익명 함수가 할당됩니다.
export const addAnonymousFunction = function (a, b) {
  return a + b;
}

/** 익명 함수 import **/
import { addAnonymousFunction } from './math.js'
console.log(addAnonymousFunction(9, 3));
// Print: 12

◆ export default Object

/** export default Object **/
// 모듈을 호출했을 때, add 키 값에는 add 함수가 들어가는 방법입니다.
const defaultObject = {
  add: add,
}
export default defaultObject;


/** import default Object, 모듈 전체 가져오기1 **/
import * as math from './math.js'
console.log(math.default.add(13, 8)); // Print: 21

/** import default Object, 모듈 전체 가져오기2 **/
import { default as defaultObject } from './math.js'
console.log(defaultObject.add(17, 2)); // Print: 19

◆ export default Function

/** export default Function **/
// 모듈을 호출했을 때, defaultAddFunction 함수가 들어가는 방법입니이다.
const defaultAddFunction = function (a, b) {
  return a + b;
}
export default defaultAddFunction;

/** import default Function, 모듈 전체 가져오기1 **/
import * as math from './math.js'
console.log(math.default(20, 11)); // Print: 31


/** import default Function, default 모듈만 가져오기2 **/
import { default as defaultAddFunction } from './math.js'
console.log(defaultAddFunction(12, 16)); // Print: 28

◆ export default 익명 함수

/** 익명 함수 export default **/
// 모듈을 호출했을 때, 익명 함수가 반환되는 방법입니다.
export default function (a, b) {
  return a + b;
}

/** default 익명 함수 import **/
import math from './math.js'
console.log(math(2, 1)); // Print: 3

 

※ 기억할 것

◆ import 방법

import { 모듈명 } from '상대경로'

◆ 상대 경로

같은 폴더에 위치 : ./파일명.형식

바로상위 폴더에 위치 : ../경로