module

javascript 모듈 시스템에 대해서 살펴본다

module

module은 프로그램을 단위 별로 개발하여 필요한 내용들을 불러와 사용할 수 있도록 고안된 시스템이다. export와 import를 통하여 내보내기 및 불러오기를 처리할 수 있다.

JavaScript modules - JavaScript | MDN

module의 장점

module의 장점은 다음과 같다.

• export를 통해 원하는 항목만 외부에서 이용하도록 처리할 수 있다.

• import를 통해 대상에서 원하는 항목만 호출하여 사용할 수 있다.

• cdn처럼 선언 순서가 중요하지 않다.

module 사용을 위한 script 구성

module을 사용하기 위해서는 다음과 같은 <script>구성이 필요하다.

<script type="module">

</script>

named export

이름을 기반으로 하여 export와 import를 할 수 있다. 프로젝트를 다음과 같이 구성하여 module을 사용해본다.

project
+-- test01.html
+-- test01.js

test01.js

export const a = 10;
export const b = 20;

test01.html에서는 script 부분 외는 기본 템플릿을 사용한다.

test01.html

<script type="module">
import {a, b} from './test01.js';
console.log(a, b);
</script>

실행하면 정상적으로 값이 로드되어 출력까지 잘 되는 것을 확인할 수 있다.

CDN 방식과의 비교

cdn 방식이라면 위의 예제는 다음과 같이 구현되었을 것이다.

test01.js

const a = 10;
const b = 20;

test01.html

<script src="./test01.js"></script>
<script>
console.log(a, b);
</script>

import 대신 <script> 태그를 사용하여 js 파일을 불러와 해당 파일의 내용을 사용한다. 이 경우 발생하는 문제점은 여러 가지가 있다.

1. js에 작성된 내용의 이름을 바꿀 수 없다.

2. js에 작성된 내용을 반드시 모두 가져와야 한다.

3. 불러오는 <script>를 반드시 위에 따로 작성해야 한다.

export default

default를 사용하여 이름을 생략하고 export와 import를 할 수 있다. 프로젝트를 다음과 같이 구성한다.

project
+-- test02.html
+-- test02.js

js와 html에 각각 코드를 작성한다.

test02.js

export default function hello() {
    console.log("Hello world!");
}

test02.html (script 부분만)

<script type="module">
import hello from './test02.js';
hello();
</script>

아래의 그림처럼 불러오며, named export와 차이점은 import 시 { }를 사용하지 않는다는 것이다.

다음 두 코드는 같은 코드이다.

import hello from './test02.js';

import {default as hello} from './test02.js';

참고 링크https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules#default_exports_versus_named_exports

rename import

import 할 때 충돌을 방지하기 위해서 이름을 변경할 수 있다. 프로젝트를 다음과 같이 구성한다.

project
+-- test03.html
+-- test03.js

test03.js

const n = 10;
const str = "hello";
function alert() {
    console.log("module test");
}

export {n, str, alert};

test03.html (이름 변경 전)

<script type="module">
import {n, str, alert} from './test03.js';

console.log(n);
console.log(str);
alert();
</script>

실행하면 정상적으로 나오지만 alert과 같은 경우 window.alert 함수와 충돌이 발생한다. 따라서 이름을 바꿔서 불러올 수 있다. 이름을 바꾼 코드는 다음과 같다.

test03.html (이름 변경 후)

<script type="module">
import {n as a, str as b, alert as c} from './test03.js';

console.log(a);
console.log(b);
c();
</script>

default rename import

export default에 대한 rename은 다음과 같이 할 수 있다.

project
+-- test04.html
+-- test04.js

test04.js

export default function hello(){
    console.log("Hello!");
}

test04.html (script 부분만)

<script type="module">
import goodbye from './test04.js';
goodbye();
</script>