[JavaScript] 모듈

모듈의 일반적 의미

모듈^module

• 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각
• 일반적으로 기능별로 분리되어 개별적인 파일로 작성, 필요에 따라 다른 모듈에 의해 재사용
  • 모듈은 자신만의 파일 스코프(모듈 스코프)를 가짐
  • 자신만의 파일 스코프를 갖는 모듈의 자산은 기본적으로 비공개 상태 (자산 캡슐화)
  • 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개 가능 — export
  • 모듈이 export한 자산 중 일부 또는 전체를 선택해 다른 모듈의 스코프 내로 불러들여 재사용 가능 — import
• 코드의 단위를 명확히 분리하여 애플리케이션 구성 가능
• 재사용성이 좋아 개발 효율성과 유지보수성 향상

자바스크립트와 모듈

• 모듈 시스템 지원 X (import, export 지원 X)
• 모든 자바스크립트 파일은 하나의 전역을 공유
• 자바스크립트를 브라우저 환경에 국한하지 않고 범용적으로 사용하기 위해 모듈 시스템 제안
  • CommonJS, AMD^{Asynchronous Module Definition}
• Node.js: CommonJS를 채택 후 독자적 진화, 모듈 시스템 지원

ES6 모듈, ESM

<script type="module" src="app.mjs"></script>

• ES6 → 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능 추가
• script 태그에 type="module" 어트리뷰트 추가: 로드된 자바스크립트 파일은 모듈로서 동작
• ESM 파일 확장자: mjs 사용 권장
• 기본적으로 strict mode 적용

모듈 스코프

• ESM은 독자적인 모듈 스코프 제공
• 모듈 내 var 키워드로 선언한 변수: 전역 변수 X, window 객체의 프로퍼티 X
• 모듈 내에서 선언한 식별자: 모듈 외부에서 참조 불가

export 키워드

// 선언문 앞에 export 키워드
export const banana = 'banana';

• 변수, 함수 클래스 등의 선언문 앞에 사용
• export할 대상을 하나의 객체로 구성하여 한 번에 export 가능

const apple = 'apple';
 
function run(x) {
  return `${x} is running!`;
}
 
// export할 대상을 하나의 객체로 구성
export { apple, run }

import 키워드

• 다른 모듈에서 export한 식별자를 자신의 모듈 스코프 내부로 로드
• 다른 모듈이 export한 식별자 이름으로 import
• ESM의 경우 파일 확장자 생략 불가

// utils.mjs 모듈이 export한 식별자 이름으로 import
import { apple, run } from './utils.mjs';
console.log(apple);
 
 
// utils.mjs 모듈이 export한 모든 식별자를 utils 객체의 프로퍼티로 모아 import
import * as utils from './utils.mjs';
console.log(utils.apple);
 
// utils.mjs 모듈이 export한 식별자 이름을 변경하여 import
import { apple as APPLE, run as running } from './utils.mjs';
console.log(APPLE);

default 키워드

• 모듈에서 하나의 값만 export하는 경우 사용 가능
• 기본적으로 이름 없이 하나의 값을 export
• var, let, const 키워드 사용 불가
• { } 없이 임의의 이름으로 import

// utils.mjs
export default x => x + 1;
 
// app.mjs
import addOne from './utils.mjs';
console.log(addOne(7)); // 8