모듈이란?
- 모듈: 자바스크립트 파일 하나
- 많은 코드가 필요한 프로그램은 하나의 파일로 관리하는 게 아니라 각 기능 별로 여러 개의 파일로 분리해서 관리하는 것이 좋음
- 모듈화 (Modularization): 공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정
- 코드를 효율적으로 관리할 수 있음
- 다른 프로그램에서 재사용할 수 있음
모듈 파일의 조건
- 모듈이 되는 파일은 독립적인 스코프를 가져야 함
- 모듈 스코프: 모듈 파일만이 가지는 독립적인 스코프
- HTML 파일에서 자바스크립트를 불러올 때 모듈 스코프를 갖게 하는 방법
<body>
<script> type="module" src="printer.js"></script>
<script> type="module" src="index.js"></script>
</body>- 모듈 문법을 활용할 때는 브라우저에서 HTML 파일을 직접 불러 오지 않고 서버를 통해서 파일을 실행해야함
모듈 문법
- 모듈 스코프를 가진 파일에서 외부로 내보내고자 하는 변수나 함수:
export키워드를 통해 내보내기 - 모듈 파일에서 내보낸 변수나 함수들 가져오기:
import키워드 이용하기 - HTMl 파일에서는 자바스크립트 코드의 진입점 역할을하는 파일 하나만 불러옴
// printer.js
export const title = 'CodeitPrinter';
export function print(value) {
console.log(value);
};// index.js
import { title, print } from './printer.js';
print(title);<body>
<script> type="module" src="index.js"></script>
</body>이름 바꾸기
// index.js
import { title as printerTitle, print } from './printer.js';
print(printerTitle);한꺼번에 다루기
import할 때 와일드카드 문자*와 as를 활용하면 모듈 파일에서export하는 모든 대상을 하나의 객체로 불러올 수 있음
import * as printerJS from './printer.js';
console.log(printerJS.title); // CodeitPrinter
console.log(printerJS.print); // ƒ print(value) { console.log(value); }- 변수나 함수 앞에 매번
export키워드를 붙일 수도 있지만, 선언된 변수나 함수를 하나의 객체로 모아 한꺼번에 내보낼 수도 있음 - 이때
as키워드를 활용하면 이름을 변경해서export할 수도 있음
const title = 'CodeitPrinter';
function print(value) {
console.log(value);
}
function printArr(arr) {
arr.forEach((el, i) => {
console.log(`${i + 1}. ${el}`);
});
}
export { title as printerTitle, print, printArr };default export
export를 할 때default키워드를 함께 사용하면 모듈 파일에서 기본적으로export할 대상을 정할 수 있음default키워드는 모듈 파일 내에서 딱 한번만 사용할 수 있음- 여러번 사용하려 하면 오류가 남
- 일반적으로 모듈 파일에서
export대상이 하나라면,default키워드를 함께 활용하는 것이 조금 더 간결한 코드를 구성하는데 도움이 됨
//export
const title = 'CodeitPrinter';
function print(value) {
console.log(value);
}
export default print;
//import
import { default as printerJS } from './printer.js';
console.log(printerJS.title); // CodeitPrinter
console.log(printerJS.print); // ƒ print(value) { console.log(value); }
//import 축약형
import printerJS from './printer.js';
console.log(printerJS.title); // CodeitPrinter
console.log(printerJS.print); // ƒ print(value) { console.log(value); }활용
- 여러 개의 기능으로 잘게 나누어진 모듈을 import한 다음 다시 export하는 모듈 파일을 만들 수 있음
- 비슷한 특징을 가진 여러 모듈 파일들을 다시 하나의 모듈 파일로 만들 수 있어서 파일 관리를 유용하게 할 수 있도록 도와줌
// (modules.js)
import module1 from './sub-module1.js';
import module2 from './sub-module2.js';
import module3 from './sub-module3.js';
export { module1, module2, module3 };
// index.js
import { module1, module2, module3 } from 'modules.js';
아이디어와 구현을 좋아합니다!