ECMAScript 모듈 (ESM)

ESM(ECMAScript Modules)

• 파일간에 표준화된 모듈 가져오기와 내보내기를 제공하는 모듈 시스템
• 스크립트파일 : 모듈이 아닌 파일로 선언된 변수/함수 등은 전역 범위에 존재한다.
• 모듈 파일: export 또는 import를 사용하여 모듈로 선언된 파일. 독립적인 범위를 가지며, export를 통해 외부에서 접근 가능하다. 파일을 모듈로서 동작시키지만 실제로는 어떤 것도 내보내거나 가져오고 싶지 않을 때, 빈 export {} 구문을 추가하여 "이 파일을 독립적인 모듈로 취급하지만 실제로는 아무것도 내보내지 않을 것"을 명시할 수 있다. 이렇게 함으로써 파일은 자체적인 범위를 갖게 되어 다른 파일들과 변수나 함수 이름 충돌을 방지할 수 있습니다.

예시 코드 1

모듈인 a.ts와 b.ts가 동일한 이름의 변수인 shared을 내보내지만 문제 되지 않는다.
모듈인 c.ts는 가져온 shared 변수와 c.ts에서 직접 정의한 shared의 변수 이름이 같기 때문에 충돌해서 변수재정의 오류가 발생한다.

// a.ts
export const shared = "Cher";
// b.ts
export const shared = "Cher";
// c.ts
import { shared } from "./a";
export const shared = "Cher"; // a.ts에서 shared를 import해서 이미 존재하는 변수이기 때문에 오류 발생

예시코드 2

스크립트인 a.ts와 b.ts는 동일한 파일에 동일한 이름의 변수가 선언된 것처럼 충돌하게 된다.

// a.ts
// cannot redeclare block-scoped variable 'shared'
const shared = "Cher";
// cannot redeclare block-scoped variable 'shared'
// b.ts
const shared = "Cher";