1. [자바스크립트] 모듈
ㅇ 모듈은, 기능별 구분이 되고, 개별 파일 단위로 작성되어, 존재함
- 어플리케이션과는 완전히 분리된채, 개별 파일 단위로 존재하면서, 재사용됨
ㅇ 표준 : ES6부터 사용 가능
2. [자바스크립트] 모듈 내어주기, 가져오기
ㅇ 스코프 원칙 : 모듈 스코프 또는 파일 스코프
* 기존 자바스크립트 파일들은 모두 전역 스코프를 공유하나,
- 모듈들은, 파일 단위로 캡슐화되어, 모듈 자신 만의 파일 스코프를 가지며,
- 이것이 공개(export)되면,
- 모듈 사용자는, 이것을 선택(import)하여, 자신의 스코프 내로 불러들여, 재사용 가능
ㅇ 모듈 내어주기, 가져오기
- export로써, 변수,함수,클래스 등을 (객체화시켜) 내보내고,
. export 가능 : var, let, const, function, class
- import로써, 가져다 씀
. 다른 모듈에서 export한 식별자들을, 자신의 모듈 스코프 내에서도, 사용 가능토록 함
. import문이 있는 `*.mjs` 파일은, html 문서에서 반드시 script 태그로 로드해야 만 함
.. 단, import from ~ 에 의해 입수되는 `*.mjs` 파일은, 의존성 있으므로,
별도 script 태그에 의해 로드할 필요 없음
- 만일, default 사용하여, export한 모듈의 경우에는,
. `이름`,`{}` 없이 하나의 값 만을 임의 이름으로 import 가능
.. (export) export default x => x * x;
.. (import) import square from './(모듈 파일명).mjs'; console.log(2)); => 4
ㅇ (유의점)
- 모듈 파일의 확장자는, `*.mjs`가 바람직(권장됨)
- 웹서버 설정 필요
. MIME 타입으로 설정이 필요함
.. 즉, `Content-Type: text/javascript`
. 아파치웹서버에서는, `AddType text/javascript .mjs`로 설정 가능
3. [자바스크립트] 모듈 사용 例)
<script type="module" src="module.mjs"></script>
[module.mjs]
const PI = 3.1415926;
function square(x) { return x * x; }
export { PI, square }
[main.js]
import { PI, square } from './module.mjs';
console.log(PI); // 3.1415926
console.log(square(2)); // 4