모듈 Module
모듈(Module)은 특정 기능을 가진 함수나 변수들을 모아놓은 것을 의미합니다. 예를들면 다양한 정렬 기능이 포함된 함수들을 모듈로 모아놓고, 그 중에서 필요한 것만 쏙쏙 뽑아서 사용하는 것을 모듈이라고 할 수 있습니다.
모듈은 주로 비슷한 기능들, 혹은 하나의 기능만하는 함수/변수를 모아놓았기 때문에, 하나의 프로그램 뿐만 아니라 다른 프로그램에서 모듈만 가져온다면 이용할 수 있는 기능의 모임이라고 볼 수 있습니다. 그렇기 때문에 모듈을 잘 이용하면 코드가 잘 분리되고, 유지보수가 쉬워진다는 이점이 있습니다.
모듈 만들기 export
간단한 덧셈 뺄셈 모듈을 만들면서 학습해보겠습니다.
다음은 html문서인데, 여태까지 자바스크립트를 삽입하기 위해서는 <script>태그의 type속성에 text/javascript를 지정해주었던 것과 다르게, module이라고 명시를 해주었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ModuleTest</title>
</head>
<body>
<script type="module" src='../js/index.js'></script>
</body>
</html>html문서의 준비가 끝나면 자바스크립트 모듈을 만들어볼 차례입니다. 함수나 변수 앞에 export 키워드를 붙이면 해당 함수, 변수를 모듈로 내보낼 준비가 완료됩니다.
// ./src/lib/arithmeticOperation.js
export const add = (num1, num2) => {
return num1 + num2;
}모듈로 내보내고 싶은 함수, 변수 앞에는 반드시 export키워드를 붙여야지, 외부에서 해당 함수, 변수에 접근할 수 있습니다.
모듈 접근하기 import
외부에서 모듈에 접근하기 위해서는 import를 이용합니다. 다시 한 번 강조하지만 export키워드가 붙은 함수, 변수에 대해서만 접근이 가능합니다.
import를 통해 다음과 같이 모듈에 접근합니다. 이때, 쉼표,로 여러개의 함수/변수를 가져올 수 있습니다.
import { 모듈 함수/변수 } from '모듈 경로';그러면, 조금 전에 만들었던 모듈에 접근해보겠습니다.
// ./src/index.js
import {add} from '../lib/arithmeticOperation.js';
const num1 = 10;
const num2 = 4;
console.log(add(10, 4));
모듈에 빼기 기능까지 추가해서 작성해보겠습니다.
//모듈 파일
export const add = (num1, num2) => num1 + num2;
export const sub = (num1, num2) => num1 - num2;// js파일
import {add, sub} from '../lib/arithmeticOperation.js';
const num1 = 10;
const num2 = 4;
console.log(add(10, 4));
console.log(sub(10, 4));
import ~ as
기본 용법
import에는 as를 통해 별칭(alias)을 부여해서 사용할 수 있는 용법도 있습니다. 별칭을 부여한다는 것은 모듈을 가져올 때 이름 중복을 피하거나, 편하게 사용하기 위해서 모듈의 이름을 변경하는 것 입니다. as를 통한 별칭 지정은 다음과 같습니다.
import {원래이름 as 별칭} from '경로';방금 전의 모듈 코드에 별칭을 붙여서 사용해보겠습니다.
import {add as a, sub as s} from '../lib/arithmeticOperation.js';
const num1 = 10;
const num2 = 4;
console.log(a(10, 4));
console.log(s(10, 4));
모듈에서 별칭 지정하고 내보내기
as를 통해 모듈에서 내보낼 때 별칭을 지정할 수도 있습니다.
// 모듈파일
export const add = (num1, num2) => {
return num1 + num2;
}
export const sub = (num1, num2) => {
return num1 - num2;
}
export {add as a, sub as s};마지막에 export와 as를 이용해서 별칭으로 내보내고 있습니다. 접근은 일반 모듈 접근하듯이 합니다. 다만 import시 내보낸 별칭을 사용해야 별칭을 이용할 수 있습니다.
//js 파일
import {a, s} from '../lib/arithmeticOperation.js';
const num1 = 10;
const num2 = 4;
console.log(a(10, 4));
console.log(s(10, 4));import * as
모듈 내에서 가져와야할 것이 많은 경우(혹은 모두 가져와야할 경우) *를 사용해서 모듈 내의 모든 함수, 변수를 가져옵니다.
*를 사용해서 전체 모듈을 가져오면, 모듈은 객체 형태로 가져와지기 때문에 모듈의 함수나 변수를 객체 프로퍼티, 메소드 접근하듯이 사용할 수 있습니다.
import * as Op from '../lib/arithmeticOperation.js';
const num1 = 10;
const num2 = 4;
console.log(Op.add(10, 4));
console.log(Op.sub(10, 4));