[JS]모듈

1. 모듈이란?

하나의 파일이 아닌 기능별로 여러개의 파일로 분리해서 관리하는 것이 좋다. 
분리한 파일이 모듈
코드를 효율적으로 관리
다른 프로그램에서 재사용 가능


ES2015에서 모듈화를 지원하는 표준 문법 지원



2. 모듈 파일의 조건

모듈 스코프
파일만의 독립적인 스코프

코드의 실행이 하나의 파일 안에서만 사용이 가능해야한다.
변수 등을 자바스크립트 파일이 공유할 위험이 있다.
모듈 스코프를 정해줘야한다.

<script type="module" ....

브라우저에서 직접 실행하면 오류발생
서버를 통해서 HTML 파일을 실행해야한다.(ex: live server)



3. 모듈 문법
다른 파일의 변수와 함수를 사용할 수 있게 만든다.
export, import

ex)
export function testModule(){ ... };

바로 사용가능하지않고 사용하고자 하는 파일에서
import { 사용할함수나 변수, testModule } from '파일경로';


모듈화를 하게되면 script 태그로 하나의 파일만 링크해서 사용가능하다.



4. 모듈에서 중복되는 이름 바꾸기
as를 사용한다.
import { name as nameChange} from ....


import 한번에 하기
import * as newObj from ...

객체처럼 접근가능하다.

* >> 와일드카드 문자

export 한번에 하기
export { var1, fun1, fun2, ...};

export 할 때도 as 사용가능하다.



5. default export
파일에서 단 한번만 지정할 수 있다.

const example;
const example2;

export default example; // export default '식별자가 아닌 값도 가능';
or
export default {example, example2}; // default가 식별자들의 객체가 된다.

import {default as 이름을지정해줘야한다, (다른export), (...) } from ....
or
import 사용자지정이름 from ... /// 사용자지정이름, {나머지1, 나머지 ...} 식으로 사용가능

*  export default {example, example2}; 로 export 했을 때,
    import newDefault from ....;
    newDefault.example 처럼 프로퍼티로 사용할 수 있다.