ES6 Module 시스템 알아보기

모든 토글을 열고 닫는 단축키
Windows : Ctrl + alt + t
Mac : ⌘ + ⌥ + t

1) Module이란?

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

여기서 **Javascript 파일은 특정한 기능을 가진 여러 개의 함수와 변수들의 집합체입니다.
1. 모듈(Module)은 하나의 모듈에서 다른 모듈을 호출하여 사용할 수 있습니다.
2. 모듈(Module)은 그 자체로도 하나의 프로그램이면서 다른 프로그램의 부품으로도 사용할 수 있습니다.
3. 보통 1개의 파일이 1개의 모듈**이 됩니다.

• 모듈은 왜 필요할까요?
  1. 코드 베이스를 분리할 수 있으며, 이를 통해 코드를 구조적으로 관리할 수 있습니다.
  2. 코드를 재사용 가능하게 만들어줍니다. 즉, 모듈화(modularize) 됩니다.
  3. 코드의 함수와 변수중 일부만 외부에서 사용하도록 노출시킬 수 있습니다.
     → 즉, 모듈 내부의 코드 세부사항을 외부로 부터 은닉하는 [정보은닉(information hiding)](http://wiki.hash.kr/index.php/%EC%A0%95%EB%B3%B4%EC%9D%80%EB%8B%89)을 구현 할 수 있게 됩니다.
  4. 해당 모듈이 참조하고 있는 다른 모듈에 대한 종속성(Dependency)을 관리하는 역할을 담당합니다.
• CJS(CommonJS) CJS(CommonJS)는 Node.js 환경에서 기본적으로 사용되는 모듈 시스템입니다. 설정을 따로 추가하지 않은 이상, Node.js에서는 CommonJS를 기본으로 사용하게 됩니다. require 함수를 사용하여 다른 모듈을 불러올 수 있습니다. require 함수는 경로 혹은 문자열을 가지고 내부 알고리즘을 통해 모듈을 가져오고 종속성을 처리합니다.
  
• ESM(ECMA Script Module) ESM(ECMA Script Module)은 최신 JavaScript에서 지원하는 모듈 시스템입니다. 모든 Javascript 환경에서 통합적인 인터페이스를 제공하기 위해 시작된 체계입니다. CommonJS와는 다르게 정적(Static)으로 모듈을 가져오며 비동기적 모듈 로딩과 순환 종속을 처리합니다.

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

• export 명령어를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다. → 이렇게 하면 하나의 큰 프로그램들을 작게 나누어, 다른 파일에서도 재사용 할 수 있습니다.
  
• import, require 명령어를 사용하면 외부 모듈의 기능을 가져올 수 있습니다.
• import, require는 어떻게 구분해서 사용할까요?
  - 자바스크립트는 대표적으로 CommonJS, ES6(ES2015) 방식으로 모듈 시스템을 관리할 수 있습니다.
  - import는 이제부터 학습하게 될 ES6(ES2015)로 모듈 시스템을 관리할 때 사용합니다.
  - 이 방식은 정적 로딩(Static Loading)을 지원합니다.
  - import 문은 코드의 최상위에 위치해야 합니다.
  - require는 CommonJS로 모듈 시스템을 관리할 때 사용합니다.
  - 이 방식은 동적 로딩(Dynamic Loading)을 지원합니다.
  - require 문은 코드의 어디에서든 사용할 수 있습니다.
  3) ES6 Module 사용해보기
  modules 폴더를 생성해 math.js, run.js 라는 파일을 생성합니다.
  2가지의 인자를 입력받았을 때 값을 더해주는 함수를 생성합니다.
  // modules/math.js

function add(a, b) {
return a + b;
}
​
그리고 작성한 함수를 다른 모듈로 내보내주기 위해 함수 앞에 코드를 추가합니다.
// modules/math.js

// add 함수를 외부로 노출시킵니다.
export function add(a, b) {
return a + b;
}
​
run.js 파일에서 불러들인 add함수를 사용하도록 작성합니다.
// modules/run.js

// ./math.js 파일에서 add 함수를 가져옵니다.
import { add } from './math.js'

console.log(add(3, 4)); // import한 add 함수를 실행합니다.

// Print: 7

• 4) 상대 경로 저희는 모듈을 import할 때, 아래와 같이 구현하였습니다.

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

  이 코드에서 ./math.js는 파일 경로를 나타내는데, ./으로 시작하는 경로는 ‘상대 경로’ 라는 것을 나타내게됩니다. 여기서, ‘상대 경로’란 현재 파일의 위치에 따라 다르게 해석되는 파일 또는 디렉토리의 위치를 나타내는 방식입니다. 즉, ./math.js는 현재 파일이 위치한 디렉토리에서 math.js 라는 이름의 파일을 찾는 것을 의미하게 됩니다. 이와 달리 ../는 상위 디렉토리를 나타내므로, ../math.js는 현재 파일이 위치한 디렉토리의 상위 디렉토리에서 math.js를 찾는 것을 의미합니다.
  
• 5) ES6 Module 사용해보기 심화
  • 화살표 함수 export
    / 화살표 함수 export /

// 모듈을 호출했을 때, addArrowFunction 키 값에는 addArrowFunction 변수 함수가 가지고 있는 값이 할당된다.
export const addArrowFunction = (a, b) => {
return a + b;
}
화살표 함수 import
/ 화살표 함수 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 /

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;
default Object import
/ import default Object, 모듈 전체 가져오기 /

import * as math from './math.js'

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

// Print: 21

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

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;
default Function import
/ import default Function, 모듈 전체 가져오기 /
import * as math from './math.js'

console.log(math.default(20, 11));

// Print: 31

/ import default Function, default 모듈만 가져오기 /
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
/ default 익명 함수 import /

import math from './math.js'

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

// Print: 3

• 6) Module 정리하기 📌 모듈은 크게 보았을 때, JavaScript 코드를 논리적인 단위로 나누는 방법입니다. 만약, 모듈을 도입하게 된다면, 코드의 재사용성을 높이고, 코드를 분리하여 관리할 수 있으므로 유지 보수하기 수월해지게 되는것이죠. 또한, 모듈은 코드의 네임스페이스(Name Space)를 분리하여, 같은 이름의 함수나 변수가 충돌하는 것을 방지하게 됩니다. 이렇게 코드를 모듈로 나누는 것은 큰 프로젝트에서 코드의 복잡성을 관리하는데 아주 중요한 요소 중 하나입니다!