모듈

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 여덟 번째인 IIFE, modules and namespace 항목을 공부하면서 간단하게 작성한 글이다.

모듈이란?

프로그램의 기능을 독립적인 작은 부품들로 나눈 것을 모듈이라고 한다. 모듈을 하나의 파일로 볼 수도 있는데 거기에는 특정한 목적을 가진 함수들 또는 클래스 하나로 구성되어있다. 모듈의 장점은 다음과 같다.

• 유지보수: 프로그램의 기능들이 모듈로 되어있다면, 각 기능들을 손쉽게 수정하고 개선할 수가 있다.
• 네임스페이스: 함수 또는 블록 스코프 외에 다른 곳에 변수를 선언하면 모두 전역 변수가 되는데, 그러면 해당 변수가 필요하지 않은 곳에서도 접근이 가능해지게 된다. 이런 점을 프로그래밍할 때 지양하기 때문에 모듈을 통해서 해당 모듈 내에서만 변수에 접근이 가능해지게 만든다.
• 재사용: 똑같은 기능을 다른 프로그램에서도 사용할 때 같은 코드를 다시 작성할 필요가 없다.

자바스크립트에서 모듈을 사용하기 위해 CommonJS, AMD, UMD와 같은 모듈 시스템을 사용하지만 이 포스팅에서는 ES6 모듈 시스템에 대해서 알아보려고 한다.

ES6 모듈 시스템

다른 곳에서 함수나 변수를 사용할 수 있게 하려면 export를 사용하고 다른 모듈을 가져올 때는 import를 사용한다.

// module.js
export function display(){
	console.log("Module");
}

// main.js
import {display} from './module.js';

display(); // 'Module'

 

export 하는 방식에는 위 코드와 같이 변수, 함수, 클래스를 선언할 때 앞에 export를 추가해주거나 코드 마지막 줄에서 export를 한 번에 할 수 있다.

// module.js
const count = 1;
function display(){
	console.log("Module");
}
function inc(){
	count++;
}

export {count, display, inc};

 

import를 해서 여러 개를 가져오고 싶다면 Objecct Destructuring을 이용하면 된다.

// main.js
import {count, display, inc} from './module.js';

//또는
import * as module from './module.js';
module.display(); // 'Module'

as

export 하거나 import 할 때 이름을 바꿔서 모듈을 사용하고 싶다면 as 키워드를 사용하면 된다.

// module.js
export {count as cnt, display as dis, inc as i};

// main.js
import * as module from './module.js';
module.dis(); // 'Module'

// module.js
export {count, display, inc};

// main.js
import {display as dis} from './module.js';
module.dis(); // 'Module'

export default

하나의 자바스크립트 파일에서 단일 객체를 내보내고 싶을 때는 export default를 사용하면 된다. export default는 모듈 내에 하나만 존재할 수 있고 해당 모듈을 import 할 때 이름을 아무거나 쓰면 export default 모듈이 import 된다. 그리고 import 할 때는 중괄호 없이 사용한다.

// module.js
export default function display(){
	console.log("Module");
}
export function inc(){
	count++;
}

// main.js
import hello from './module.js';

hello(); // 'Module'