1-9 ES6 Module 시스템 알아보기

Module

 

1) Module 란?

 

 

 

모듈(Module)은 JavaScript를 파일 단위로 분리된 코드 덩어리를 일컫는다.

JavaScript 파일은 특정한 기능을 가진 여러 개의 함수와 변수들의 집합체 입니다.

 

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

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

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

 

왜 필요한가?

 

1. 코드 베이스를 분리할 수 있으며, 이를 통해 코드를 구조적으로 관리할 수 있다.

2. 코드를 재사용 가능하게 만들어준다. 즉, 모듈화(modularize)

3. 코드의 함수와 변수 중 일부만 외부에서 사용하도록 노출시킬 수 있다.

    → 모듈 내부의 코드 세부사항을 외부로 부터 정보은닉(Information hiding)을 해준다.

4. 모듈이 참조하고 있는 다른 모듈에 대한 종속성(Dependency)을 관리하는 역할을 담당한다.

 

 

2) Module의 종류

 

1. CJS(CommoJS)

 

CJS(CommonJS)는 Node.js 환경에서 기본적으로 사용되는 모듈 시스템입니다.

설정을 따로 추가하지 않은 이상, Node.js에서 CommonJS를 기본으로 사용하게 됩니다.

require 함수를 사용하여 다른 모듈을 불러올 수 있습니다.

require 함수는 경로 혹은 문자열을 가지고 내부 알고리즘을 통해 모듈을 가져오고 종속성을 처리합니다.

 

2. ESM(ECMA Script Module)

ESM(ECMA Script Module)은 모든 JavaScript 환경에서 통합적인 인터페이스를 제공하기 위해 시작된 체계입니다.

CommonJS와는 다르게 정적(Static)으로 모듈을 가져오며 비동기적 모듈 로딩과 순환 종속을 처리합니다.

 

 

3) Module은 어떻게 사용할까요?

 

 

export 명령어를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다.

 

export 사용법 : 

 

export default 함수명 or 클래스명

 

다수의 함수를 보내야 할 경우

 

  export { 함수명, ..., 함수명 }

 

import, requier 명령어를 사용하면 외부 모듈의 기능을 가져올 수 있다.

 

import, requier 사용처 구분 방법 : 

 

import : 정적 로딩(Static Loading)을 지원합니다.

             ( import 문은 코드의 최상위에 위치 해야한다 )

 

require : 동적 로딩(Dynamic Loading)을 지원합니다.

             ( require 문은 코드의 어디에서든 사용할 수 있다 )

 

 

4) ES6 Module 사용해보기

 

modules 폴더를 만들고

내부에 myMath.js, myRun.js 라는 파일 생성

이때 디렉토리 안에 package.json 파일과

package.json 파일 요소로

"type" : "module"이 있어야 한다.

 

myMath.js는

 

export function add(a, b) {

  return a + b;

}

 

또는,

 

function add(a, b) {

  return a + b;

}

export default add;

를 작성합니다.

 

 

myRun.js는

 

import { add } from "./myMath.js";

console.log(add(3, 4));

 

같이 myMath.js 파일 안 export 함수인

add 함수를 import 받는다.

 

 

 

상대 경로 :

 

.은 상위 폴드를 가리키고 /는 폴드 내부로 진입을 가리킨다.

 

if ) myRun.js가 myMath.js를 가리키고 싶다면

 

. 으로 상위 폴더인 modules로 이동 후

/로 modules의 내부로 진입한다.

그 후, myMath.js로 myMath.js 파일을 찾는다.

 

 

문제

와 같은 형태로 디렉토리가 돼 있을 때,

src/libs/run.js 파일에서, 모든 모듈을 가져오도록

작성해주세요.

 

처음에 

 

import {~~~} from 경로

 

로 작성을 해서

 

run.js에서 작동을 시켜봤더니 오류가 발생했다.

경로가 잘못 됐나 싶어? 계속 경로를 봤지만

아무 이상이 없었다...

 

혹시나 하는 마음에

 

import ~~~ from 경로

 

로 수정했더니 정상적으로 잘 작동했다...

 

위의 코드에서 

 

export function add(a, b) {

  return a + b;

}

과

import { add } from "./myMath.js";

console.log(add(3, 4));

 

은 파일이 분리 돼 있고 {}를 사용했는데

아무 문제없이 동작하는걸 다시 확인했다...

 

 

그래서 add함수와 문제의 함수들을 비교해 봤는데

위의 함수들은 함수에 이름이 존재하지 않고, default가 붙어 있었다

exprot default ()

{

}

으로 코드가 작성 돼 있었다.

 

아마 defualt 가 붙으면 {}을 사용하면 안 되는 것 같았다.

(여러 실험 결과 이름 유무는 상관이 없었다.)

 

 

물론...

 

(

아마 함수는

 

let 함수명1 = () =>

{

}

let 함수명2 = () =>

{

}

 

export {함수명1, 함수명2}

 

import {함수명1, 함수명2} from 경로

로 많이 사용하고,

 

class는

 

class ClassName{

}

 

export default ClassName

 

import ClassName from 경로

로 많이 사용할 것 같다.

 

)

 

ES6 Module 심화

1. 화살표 함수

 

export

export const addArrowFunction = (a, b) => {

  return a + b;

};

 

import

import { addArrowFunction } from "./myMath.js";

console.log(addArrowFunction(3, 4));

 

2. 익명 함수

 

export

export const addAnonymousFunction = function (a, b) {

  return a + b;

}

 

import

import { addAnonymousFunction } from './math.js'

console.log(addAnonymousFunction(9, 3));

 

3. export default Object

 

export

const defaultObject = {

  add: add,

}

export default defaultObject;

 

import

console.log(math.default.add(13, 8));

// Print: 21

/** import default Object, 모듈 전체 가져오기 **/

import { default as defaultObject } from './math.js'

console.log(defaultObject.ad(17, 2));

 

4. export default Fuction

 

export

const defaultAddFunction = function (a, b) {

  return a + b;

}

export default defaultAddFunction;

 

import

import { default as defaultAddFunction } from './math.js'

console.log(defaultAddFunction(12, 16));

 

5. export default 익명 함수

 

export

export default function (a, b) {

  return a + b;

}

 

import

import math from './math.js'

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