모듈의 일반적 의미
- 애플리케이션을 구성하는 개별적 요소, 재사용 가능한 코드 조각
- 기능을 기준으로 파일 단위로 분리
- 자신만의 파일 스코프를 갖어야함
- 기본적으로 모듈의 리소스는 비공개지만 비공개면 재사용이 불가능하니 의미가 없음
- 개발 효율성과 유지보수성 향상
export : 공개가 필요한 리소스에 한정하여 명시적으로 선택적 공개
import : 모듈이 공개한 리소스중 일부or전체를 자신의 스코프 내로 불러들임
자바스크립트와 모듈
원래는 파일 스코프와 ,export,importf를 지원하지 않았다
웹 페이지의 단순한 처리를 위한 언어였으니
클라이언트 사이드 자바스크립트는 script 태그를 통해 외부 파일을 로드할 수 있지만 파일마다 독립적인 스코프를 갖지 않는다
script 태그로 여러 자바스크립트 파일을 로드해도 하나의 전역을 공유함
현재 Node.js는 모듈 시스템을 지원함 -> 파일별로 파일 스코프 갖음
ES6 모듈 (ESM)
IE를 제외한 대부분의 브라우저에서 사용 가능
script 태그에 type="module" 어트리뷰트를 추가하면 됨
파일 확장자는 일반 자바스크립트 파일과 구별을 위해 .mjs 추천
strict 모드 적용이 기본
모듈 스코프
일반 자바스크립트 파일은 script 태그로 분리해 로드해도 하나의 전역
//temp1.js
var name = 'Sam';
console.log(window.name);
//temp2.js
console.log(name);
//temp.html
<script src="./temp1.js"></script>
<script src="./temp2.js"></script>
// teml.html의 콘솔창에는 Sam이 두번 찍힌다//temp.html
<script src="./temp1.js" type="module"></script>
<script src="./temp2.js" type="module"></script>
// 파일 자체 모듈 스코프 제공, var로 선언해도 전역 객체의 프로퍼티가 아님export 키워드
- export 키워드는 선언문 앞에 사용
- 모든 식별자는 export 가능
export const name = 'Sam';
export function square(x){
return x*x;
}- 일일히 export 안하고 객체로 구성해서 한번에 가능
//lib.mjs
const name = 'Sam';
function square(x){
return x*x;
}
export {name, square};import 키워드
- 다른 모듈이 export한 식별자 이름으로 import
- ESM의 경우 파일 확장자 생략 불가
import {name,square} from './lib.mjs';- 하나의 이름으로 한번에 import하면 객체의 프로퍼티로 할당됨
import * as lib from './lib.mjs';
lib.name; // 'Sam'
lib.square(2); // 4- 모듈이 export한 식별자 이름을 변경할 수 있음
import {name as N,square as S} from 'lib.mjs';- 모듈에서 하나의 리소스만 export할꺼면 default 키워드로
// 이름 없이 바로 하거나
export default x=>x*x;
// const,let,var 쓰면 에러
export default const square = x => x*x;
//따로 선언을 하고 export default 이름
const square = x => x*x;
export default square;- default 키워드로 export한 모듈은 import 할때 {} 없이 이름 지어주면 됨
//lib.mjs
export default x => x*x;
// app.js
import square from './lib.mjs'; // 맘대로 작명
import 제곱 from './lib.mjs'; // 맘대로 작명
이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스(2021)
grindin'