[javascript] module 시스템

목표

- javascript의 모듈 시스템에 대해서 알아 봅니다.

모듈이란?

- 하나의 큰 기능을 문해 해결을 쉽게하기 위하여 여러 작은 기능으로 분리하는데 이 작은 기능을 모듈이라고 합니다.
- 아래 예제는 SSH 통신이란 큰 기능을 "연결" "요청" "결과확인" 이라는 모듈을 합쳐서 만든 것입니다.

module 사용이유

1. 유지보수 용이

- 기능드이 모듈화가 잘되어있을 경우, 의존성을 줄일 수 있고 기능을 개선이나 수정이 용이 합니다.

2. namespace화

- module로 code들을 분리하면 개별 namespace를 갖습니다.

module system란?

1. 정의

- module로 분리된 javacript파일들을 불러오는 방식을 정의 한 것이 module system 입니다.

module system을 사용하지 않으면 어떻게 되는가?

- 아래와 같이 module을 사용하지 않고 html에 javascript를 사용하면 a.js 와 b.js는 global scope를 같이 공유하게 됩니다.
그래서 a.js 와 b.js간에 global scope가 충돌이 납니다.
- module system을 사용하지 않고 module 가져오기

<script src="./a.js"></script>
<script src="./b.js"></script>

module system을 사용하면 어떻게 되는가?

- 모듈 시스템을 사용하여 javascript module을 가져오면 각 module을 자신만의 scope를 갖게 되면서 global scope가
중복되지 않습니다.

javascript에서 지원하는 module 시스템

- 다음은 module system의 종류 입니다. 여기서 ES Module, CommonJS만 알아 보겠습니다.

종류	설명
ES Module	ES6(ES2015)에서 도입된 javascript module system
CommonJS	NodeJS 환경을 위해 만들어진 module system
AMD	가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해서 처음 개발 됨
UMD	AMD와 CommonJS 와 같은 다양한 모듈 시스템을 함께 사용하기 위해서 만들어짐

ES Module System

1. 모듈 정의

- ES6 (2015)에서 도입된 javascript module system 입니다.

2. html에서 javascript 파일을 module로 변경 방법

- <script> tag에 type="module"속성을 추가하면됩니다.

<script type="module" src="./module/index.js"></script>

3. module 기능 외부 노출 방법

1) export를 이용한 개별 변수, function, class를 export

export const a_variable = 10;

export const sum = (num1, num2) => {
    return num1 + num2;
};

export class User {
    constructor(name) {
        this.name = name;
    }
}

2) export 마지막에 선언하여 한번에 여러개를 export

const a_variable = 10;

const sum = (num1, num2) => {
    return num1 + num2;
};

class User {
    constructor(name) {
        this.name = name;
    }
}

export { a_variable, sum, User }

2) export default를 이용한 기본 export 지정

const a_variable = 10;

const sum = (num1, num2) => {
    return num1 + num2;
};

class User {
    constructor(name) {
        this.name = name;
    }
}

export { a_variable, sum, User };

export default sum;
//이러게도 가능 export default { a_variable, sum, User };

4. javascript내부에서 모듈 import 방법

- import를 사용하여 module을 import 합니다.

1) export한 변수, 함수, class등을 배열 형태로 import

import { export한 리스트 } from 'module파일'

import { a_variable, sum, User } from './math.js';

console.log("print A:", a_variable);
console.log("print A:", sum(10, 20));
var kim = new User("kim");

2) export한 변수, 함수, class등을 객체로 import

import * as 객채이름' from 'module파일'

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

console.log("print A:", test.a_variable);
console.log("print A:", test.sum(10, 20));
var kim = new test.User("kim");

2) export default 한 변수, 함수, class import

import "export_default를 받을 변수명" from 'module 파일'
참고) "export_default를 받을 변수명" export default한 변수명과 같은 필요는 없다.

import * as test from './math.js';
import sum_test from './math.js';

console.log("print A:", test.a_variable);
console.log("print A:", test.sum(10, 20));
var kim = new test.User("kim");
console.log("print A:", sum_test(10, 20));

CommonJS Module System

1. 모듈 정의

- NodeJS 환경에서 javascript module을 사용하기 위해 만들어진 module system 입니다. 모듈을 외부에서 사용 할 수 있도록
내보낼 때는 exports, module.exports와 같은 키워드를 사용합니다.
불러올 때는 require 키워드를 사용합니다.

참조 유튜브

https://www.youtube.com/watch?v=5NXEXkIrkAk&ab_channel=%EC%A7%90%EC%BD%94%EB%94%A9%EC%9D%98CODINGGYM