소개
Javascript Module에 대해서 이해하고 조금 더 효율적인 코딩을 위한 방법들을 정리해보고자 합니다.
Module이 무엇인지? Module 을 사용하면 무엇이 좋은지? 어떻게 사용하는지? 에 대해서 정리해보도록 하겠습니다.
Javascript Module 이란?
프로그래밍에서 모듈(Module)이란 간단히 말해 코드들의 묶음이라고 볼 수 있습니다. 그렇다면 코드를 어떻게 묶을 것인지에 대한 고민을 하게 되는데, 여기서 좋은 모듈화에 대한 기준이 나옵니다. 높은 독립성을 바탕으로 기능적으로 구분될 수 있는 단위로 묶은 코드들을 좋은 모듈화를 구현하였다고 볼 수 있습니다.
Javascript 에서는 모듈 구현을 위해 ECMAScript6(ES6)에서부터 built-in module들을 지원하고 있습니다.
이는 import 와 export 를 통해 구현을 할 수 있습니다.
왜 Module을 쓰면 좋은가?
그렇다면 모듈을 쓰면 어떤 장점을 가질 수 있는 걸까요?
모듈을 사용함으로서 크게 3가지의 아래와 같은 장점을 가질 수 있을 것 같습니다.
- 유지보수 용이함.
- 네임스페이스
- 재사용
유지보수 용이함
모듈이란 기능적으로 구분될 수 있는 코드들을 높은 독립성을 가질 수 있도록 묶어놓은 코드묶음이라고 하였습니다. 이는 곧 모듈간 결합도가 낮다는 의미가 됩니다. 이로 인해서 구현된 프로그램에서 수정이 필요할 때 연관있는 모듈만 업데이트를 함으로서 최소한의 작업을 통해 유지보수가 가능하게 됩니다.
네임스페이스
Javascript에서 top-level function의 scop밖 변수들은 global 변수로서 어디서든 접근이 가능하게 되어있습니다. 이는 프로그램 규모가 커짐에 따라 디버깅을 어렵게 하는 요인이 되는데, 모듈을 사용함으로서 변수들을 위한 private 공간을 만들수 있게 됩니다.
재사용
모듈은 유사한 기능적 코드모음이라고 하였습니다. 이런 모듈을 통해 여기저기서 사용되는 동일한 기능들에 대해서는 별도로 모듈화를 하여 어디서는 필요에 의한 재사용이 가능하게 됩니다.
Module은 어떻게 구현하는가?
Javascript에서는 모듈을 import와 export를 통해서 구현할 수 있습니다.
별도의 js 파일로 모듈을 구현한다고 할때, 다른 곳의 모듈을 사용하고 싶을 때는 export 를,
다른 곳의 모듈을 사용하고 싶을 때는 import 를 사용하면 됩니다.
html 에서도 type 지정을 통해 script 를 정의해주어야 합니다.
export 구현
모듈에서 export 가능한 것은 var / let / const / function / class 들이 export 가능합니다. export 문을 쓰는 방식은 크게 두가지입니다.
첫번째는 함수를 정의할 때 export문을 사용하는 방법입니다.
// calc.js 파일에서
export function Add(num1, num2) {
return num1 + num2;
}두번째는 함수 정의 후, 마지막에 한번에 export 할 것들을 정의하는 방법입니다.
// calc.js 파일에서
function Add(num1, num2) {
return num1 + num2;
}
function Multiply(num1, num2) {
return num1 * num2;
}
export {
Add,
Multiply
};import 구현
export 한 모듈을 사용하기 위해서는 import 구문을 사용합니다.
as 구문을 통해 export 된 이름을 다르게 사용할 수도 있는데요. as 구문은 언제 사용하면 좋을까요?
as 구문을 통해 name 충돌 방지로 사용할 수 있습니다. 예를 들어, calc 와 other 모듈을 import 한다고 해봅시다. 각각의 모듈에서 동일한 이름의 Add 함수를 사용하고 있다면, import 할때 충돌이 날 수 있습니다. 이를 방지하기 위해서 as 구문을 사용할 수 있습니다.
// main.js 파일에서
import { Add as calcAdd } from './calc.js'; // 동일한 함수명 Add를 import할때 충돌을 피하기 위한 as 사용
import { Add as otherAdd } from './other.js';
function init() {
const addResult = calcAdd(1, 2);
const mulResult = otherAdd(3, 4);
console.log(addResult);
console.log(mulResult);
}
init();default export 구현
기본적으로 export 만 사용할 시에는 이름을 참조로 export하고, import 할시에도 동일한 이름으로 참조하게 됩니다.
import 할시 as 구문을 사용하면 다른이름을 부여하여 사용할 수 있지만, 기본적으로는 그렇습니다.
default export를 사용하게 되면, import 할시, 중괄호 없이 원하는 이름으로 import 하여 사용할 수 있습니다.
그리고 유의할 점은 하나의 모듈에서는 하나의 default exoprt 만 허용합니다.
// calc.js 에서
export default function Add(num1, num2) {
return num1 + num2;
}// main.js 에서
import renameAdd from './calc.js';
function init() {
const result = renameAdd(1, 2);
console.log(result);
}
init()
// 결과 : 3main.js 에서 calc.js 에서 사용된 함수이름인 Add 를 사용안하고 renameAdd 로 바꿔 import 하여도 사용이 가능하다.
HTML에서는?
모듈을 사용하기 위해서 html 에서는 script 정의를 할 시 type을 아래와 같이 지정해 주면 됩니다.
여기서 모듈 사용에 따른 특징은 아래와 같습니다.
- defer 자동 적용
- script 에서 stric 모드 자동 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="main.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>깔금한 Module 구현을 위해서는?
위에서 언급한 방법들은 각각의 export 할 함수 등을 개별로 중괄호를 통해 정의해주고, import 할때도 동일하게 개별 정의를 통해 import 를 하였는데요. 좀 더 깔끔한 방식으로 모듈을 구현하기 위해서는 아래의 두가지 방법을 사용할 수 있습니다.
- Module object 만들기
- Class 를 만들어 export 하고 사용하기
Module object 화
import 할시 모든 export 를 가져와 object 화 하여 사용하는 방법입니다.
export * as OBJECTNAME 형식으로 오래와 같이 사용이 가능합니다.
// main.js 파일에서
import * as Calc from './calc.js'; // module object 만들어 사용
function init() {
const addResult = Calc.Add(1, 2); // Calc object 로 사용
const mulResult = Calc.Mul(3, 4); // Calc object 로 사용
console.log(addResult);
console.log(mulResult);
}
init();Class 를 만들어 export 하고 사용하기
export 할시 Class 를 통해서 한번에 내부의 변수 및 함수를 export 하여 사용하는 방법입니다.
아래와 같이 사용을 한다면 보다 더 깔끔한 module 사용이 가능합니다.
// calc.js 파일에서
export class Calc { // class 로 만들어 export
add(num1, num2) {
return num1 + num2;
}
multiply(num1, num2) {
return num1 * num2;
}
}// main.js 파일에서
import {
Calc
} from './calc.js';
function init() {
const calc = new Calc(); // object 로 선언하여 사용
const addResult = calc.add(1, 2);
const mulResult = calc.multiply(3, 4);
console.log(addResult);
console.log(mulResult);
}
init();