Module   모듈

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