48장 모듈

해당 포스팅은 위키북스의 모던 자바스크립트 Deep Dive라는 책을 독학하며 기록하는 글입니다.

모듈

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

모듈의 장점

어플리케이션을 모듈로 관리하면 다음과 같은 장점이 있다.

1. 다른 어플리케이션이나 다른 모듈에 의해 재사용될 수 있다.
2. 개발 효울성과 유지보수성을 높일 수 있다.

자바스크립트에서의 모듈

자바스크립트 ES6부터는 클라이언트 사이드 자바스크립트에서 동작하는 모듈 기능을 추가했다. 이전의 자바스크립트는 모듈 기능을 지원하지 않았으며 따라서 여러 개의 자바스크립트 파일을 하나의 HTML 파일에 추가하였을 때 각각의 자바스크립트 파일이 독립적인 스코프를 가지는 것이 아니라 하나의 전역 스코프를 가져 예기치 못한 오류를 불러오기도 했다.

자바스크립트를 모듈로서 사용하기 위해서는 script 태그를 사용할 때 type 어트리뷰트의 값으로 module을 주면 된다. 또한 명시적으로 일반적인 자바스크립트 파일이 아닌 모듈로서 동작하는 ESM 자바스크립트라는 표현하기 위해 mjs 확장자를 쓰는 것이 권장된다. ESM에는 클래스와 마찬가지로 기본적으로 strict mode가 적용된다.

export

하나의 모듈 내부에서 선언한 식별자를 외부에 공개하여 다른 모듈들이 재사용할 수 있게 하려면 export 키워드를 사용한다. export 키워드는 선언문 앞에 사용하며 변수, 함수, 클래스 등 모든 식별자를 export할 수 있다.

export const pi = Math.PI;

export function say() {
  console.log("Hi");
}

만약 매번 앞에 export를 붙히는 것이 귀찮다면 마지막에 한 번에 export할 수도 있다.

const pi = Math.PI;

function say() {
  console.log("Hi");
}

export { pi, say };

만약 하나의 파일에서 export할 것이 1개라면 export default키워드를 사용하면 된다. 다만 이 경우 const나 let과 같은 변수 선언문 키워드를 사용할 수 없다.

export default Math.PI;

또는
export default () => {
  console.log("Hi");
}

import

다른 모듈에서 공개한 식별자를 자신의 모듈 스코프 내부에서 사용하기 위해서는 import 키워들를 사용한다. 이때 다른 모듈이 export한 식별자 이름으로 import해야 하며 ESM의 경우 파일 확장자를 생략할 수 없다.

import { pi, say } from './index.mjs';

console.log(pi);
say();

만약 현재 사용하고 있는 파일에서 다른 식별자명을 사용하고 싶으면 as 키워드를 사용한다.

import { pi as PI, say as HI} from './index.mjs';

console.log(PI);
HI();

이때 만약 export default를 사용한 경우 import할 때 무조건 하나의 값만 들어온다는 것이 보장되어 있기 때문에 중괄호({})를 사용하지 않고 원하는 식별자명을 바로 정의해서 사용할 수 있다.

import sayHi from './index.mjs';

sayHi();