[모던 자바스크립트 Deep Dive] 44. 모듈

모듈의 일반적 의미

• 어플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 
• 기능을 기준으로 파일 단위로 분리 
• 모듈이 성립하려면 자신만의 파일 스코프 (모듈 스코프)를 가질 수 있어야 함
• 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없음
• 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하며 이를 export 라 함
• 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용 가능하며 이를 import 라 함
• 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있고 재사용성이 좋아 개발 효율성과 유지보수성을 높일 수 있음 

 

자바스크립트와 모듈

• 클라이언트 사이드 자바스크립트는 script 태그를 사용하여 외부의 자바스크립트 파일을 로드할 수는 있지만 파일마다 독립적인 파일 스코프를 갖지 X
• 자바스크립트 파일을 여러 개의 파일로 분리하여 script 태그로 로드해도 분리된 자바스크립트 파일들은 결국 하나의 스크립트 파일 내에 있는 것 처럼 동작 (하나의 전역 공유)
• 브라우저 환경에서 모듈을 사용하기 위해 CommonJS 사용 필요
• Node.js 는 ECMAScript 표준 사양은 아니지만 모듈 시스템을 지원하며 Node.js 환경에서는 파일별로 독립적인 파일 스코프(모듈 스코프)를 가짐

ES6 모듈(ESM)

• IE를 제외한 대부분의 브라우저에서 ES6 모듈 사용 가능
• script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작
• 일반적인 자바스크립트 파일이 아닌 ESM 임을 명확히 하기 위해 ESM 파일의 확장자는 mjs 를 사용할 것을 권장

1. 모듈 스코프

• 일반적인 자바스크립트 파일은 script 태그로 분리하여 로드해도 독자적인 모듈 스코프를 갖지 X
• ESM 은 파일 자체의 독자적인 모듈 스코프를 제공

2. export 키워드

• 모듈 내에서 선언한 모든 식별자는 기본적으로 해당 모듈 내부에서만 참조 가능
• 모듈 내부에서 선언한 식별자를 외부에 공개하여 다른 모듈들이 재사용할 수 있게 하려면 export 키워드 사용 필요

// 변수 공개
export const pi = Math.PI;

// 함수 공개
export function sum(x, y) {
 return x + y;
} 

// 클래스 공개
export class Person{
 constructor(name){
  this.name = name;
 }
}

// 변수 공개
const pi = Math.PI;

// 함수 공개
function sum(x, y) {
 return x + y;
} 

// 클래스 공개
class Person{
 constructor(name){
  this.name = name;
 }
}

// 변수, 함수, 클래스를 하나의 객체로 구성하여 공개
export { pi, sum, Person }

 

3. import 키워드

• 다른 모듈에서 공개한 식별자를 자신의 모듈 스코프 내부로 로드하려면 import 키워드 사용 필요
• 다른 모듈이 export 한 식별자를 이름으로 import 해야하며 ESM의 경우 파일 확장자 생략 가능

// lib 모듈에서 export 한 식별자 이름으로 import
import { pi, sum, Person } from "./lib.mjs";

// lib 모듈에서 export된 모든 식별자를 lib 객체의 프로퍼티로 모아 import
import * as lib from "./lib.mjs";

console.log(lib.pi);	// 3.14...

// lib 모듈에서 export 된 식별자 이름을 변경하여 import
import { sum as s } lib from "./lib.mjs";

console.log(s(2,3));	// 5

• 모듈에서 하나의 값만 export 한다면 default 키워드 사용 가능 (이름 없이 하나의 값을 export)
• default 키워드 사용 시 var, let, const 사용 불가
• default 키워드와 함께 export 한 모듈은 {} 없이 임의의 이름으로 import

export default x => x * x;
// export default const func =()=>{}; SyntaxError

import sqr from "./lib.mjs";

console.log(sqr(2)); // 4