요약 정리는 못 참지 않을까요? (20) 모듈

🙄모듈

모듈은 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말합니다.
일반적으로 모듈은 기능을 기준으로 파일 단위로 분리하는데 모듈이 성립하려면
모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야합니다.

또한 모듈은 모듈의 모든 자산을 캡슐화하며 애플리케이션과 분리되어 존재합니다.
하지만 모듈이 완전히 개별적으로 존재하면 재사용이 불가능하니까 의미가 없음

따라서 모듈은 공개가 필요한 부분을 선정해서 선택적으로 공개하며 이것을 export라고 합니다.
export된 모듈의 자산은 다른 모듈에서 재사용할 수 있고
모듈 사용자는 모듈이 공개한 자산 중 일부 or 전체를 선택해 자신의 스코프 내로
불러 들여서 재사용합니다. 이것은 import라고 합니다.

모듈은 개별적으로 존재하다가 재사용되기에 재사용성을 높이고 유지보수성을 높여줄 수 있습니다.

---

🙄자바스크립트의 모듈

자바스크립트는 모듈 시스템을 지원하지 않았었습니다.
여러개의 파일로 분리해서 script 태그로 로드해도 결국 하나의 전역 스코프를 공유하기에
모듈을 구현할 수가 없습니다.

그렇기에 자바스크립트에서 모듈을 사용하려면 CommonJS 혹은 AMD를 구현한
모듈 로더 라이브러리를 사용해야 했습니다.
Node.js는 CommonJS를 채택했다고 하네요 그래서 Node.js 환경에서는
파일별로 독립적인 파일 스코프를 가질 수 있습니다.

또한 ES6에서는 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능을 추가했습니다.
사용법은 아래처럼 type에 module을 명시해주면 됩니다.

<script type = "mudule" src = "app.mjs"></script>​

 

ES6 모듈은 mjs 로 확장자를 정하는 걸 권장합니다.
일반 자바스크립트 파일이 아니라 ES6 모듈이라는걸 강조하기 위해서입니다.
ES6모듈은 ESM이라고 부르며 strict mode가 적용됩니다.

ESM은 독자적인 모듈 스코프를 가지며 일반 자스파일은 script 태그로 분리해서 로드해도
독자적인 모듈 스코프를 갖지 않습니다.

모듈은 export 키워드를 통해 모듈 내부에서 선언한 식별자를 외부에 공개할 수 있습니다.
export할걸 하나하나 키워드 붙여주는게 번거롭다면 
export할 대상을 객체로 구성해서 한번에 export하는것도 가능합니다.

export {variable , pi , Person}​

import 키워드를 통해 다른 모듈에서는 export 된 것들을 로드할 수 있습니다.
다른 모듈이 export한 식별자 이름으로 import 해야하고 ESM의 경우 파일확장자를 생략할 수 없습니다.

// ESM의 경우 파일 확장자를 생략할 수 없습니다
// 같은 폴더 내의 lib.mjs 모듈이 export 한 식별자 이름으로 import 합니다.
import { pi, square, Person} from './lib.mjs'

console.log(pi)​

또한 한 파일에서 export한 모든 식별자를 한번에 import하는 방법도 있습니다.
as를 사용하면 되용

// ESM의 경우 파일 확장자를 생략할 수 없습니다
// 같은 폴더 내의 lib.mjs 모듈이 export 한 식별자 이름으로 import 합니다.
import { pi, square, Person} from './lib.mjs'

console.log(pi)

이런식으로 export할때처럼 import도 할 수 있네요

의존성이란 개념이 있어서 import문이 있는 파일을 script 태그에 넣을 경우

import해야할 파일은 script태그에 안넣어도 되네요

// ESM의 경우 파일 확장자를 생략할 수 없습니다
// 같은 폴더 내의 lib.mjs 모듈이 export 한 식별자 이름으로 import 합니다.
import { pi, square, Person} from './lib.mjs'

console.log(pi)

import * as lib from './lib.mjs'

console.log(lib.pi)
//from 파일에서 export한 모든 식별자를 객체로 담아온다.


import {pi as PI, square as sq} from './lib.mjs'
//식별자 이름을 변경해서 import한다.

console.log(PI)​

---

🙄default 문

default 키워드는 모듈에서 하나의 값만 export한다면 사용 할 수 있습니다.
default 키워드를 사용할 땐 기본적으로 이름없이 하나의 값을 export 합니다.
dafault 키워드를 사용할땐 var,let,const 사용이 불가능합니다.

export default x => x * x

import square from './lib.mjs'

console.log(square(3)) // 9​

default문을 통해 export한 것은 {} 없이도 임의의 이름으로 import할 수 있습니다.

default 문을 사용할 때 가장 큰 문제점은
import를 아무런 이름으로 가져와도 동작이 default한 것대로 동작하기 때문에
코드 유지보수가 어려워진다는 것입니다.

단 하나의 export만 사용한다면 상관 없을 수도 있겠지만
사용을 지양해야한다는 움직임도 있는것같네용

---