자바스크립트 모듈 시스템

목차

1. 개요

2. 자바스크립트 모듈 시스템

    2-1. 모듈의 구성

    2-2. 모듈 시스템

3. ESM (ECMAScript Module)

---

1. 개요

JS 계열 파일의 개발, 환경 설정 등을 하다보면 뭔가 자바스크립트의 환경이나 설정 관련된 말 같기는 한데

정확히 뭔지는 모르겠고, 일단 넘어가도 진행은 할 수 있는 용어들을 많이 만나게 된다. 가령 ESM 같은 것..

🤷 아니 대체 ESM이 뭔데?? Common JS가 뭔데??? 🤷

해서 너무 늦기 전에 한 번 정리해보려고 한다.

---

2. 자바스크립트 모듈 시스템

개발하는 애플리케이션의 크기가 커지면 파일을 분리해야하는 때가 온다.

이 분리된 각각의 파일을 모듈이라고 한다.

모듈은 파일이 너무 길고 복잡해져서 분리한 것이기 때문에 너무 광범위한 범위를 가지지 않는다.

https://ldd6cr-adness.tistory.com/418

모듈은 뭘까

 

1. 모듈의 구성

• 클래스 하나
• 라이브러리 하나 (특정 목적을 가진 복수의 함수)

 

애플리케이션의 크기가 커지며, 다양해지며, 어떤 기능을 가진 모듈들이 우다다 생겨날 것이다.

모듈이 많아지자, 자바스크립트 커뮤니티는 모듈을 필요할 때 불러와서 사용할 수 있는 모듈 시스템을 만든다.

 

2. 모듈 시스템

모듈 시스템은 어떻게 모듈을 정의하고 불러올 것인지에 대한 문법/스펙/규칙같은 것이다.

 

모듈을 내보내고 불러올 수 있게 되며, 모듈은 지시자 import와 export를 적용할 수 있게 된다.

• import : 모듈 가져오기 - 지시자를 사용하여 외부 모듈의 기능을 가져올 수 있다
• export : 모듈 내보내기 - 변수/함수 앞에 지시자를 붙여 해당 변수/함수에 접근할 수 있도록 한다.

자바스크립트는 아래와 같은 모듈 시스템을 사용할 수 있다.

모듈 시스템	특징	설명
CommonJS	⋅ 정적 바인딩 ⋅ 동기 import ⋅ 서버 환경에 적합	Node.js에서 사용되는 모듈 시스템으로, 실행 시 require()를 통해 모듈을 불러온다. 서버 사이드에서 사용하기 좋다.
AMD	⋅ 비동기	브라우저 환경에서 비동기적으로 모듈을 로딩할 수 있도록 설계되었다. CommonJS 방식은 필요한 모듈이 모두 준비되어야 사용 가능하므로, 네트워크로 모듈을 받는 브라우저에서 사용하기 어렵기 때문이다.
UMD	⋅ 여러 모듈 로더에서 사용 가능 ⋅범용성	CommonJS, AMD 방식 모두에서 작동하도록 설계된 하이브리드 형태이다. 모듈 시스템에 따라 다른 구현을 정의하는 형태이다. CJS는 module.exports를 사용하며, AMD는 define을 사용하므로, ⋅ exports, module이 존재하면 CJS 방식으로, ⋅ define, define.amd가 존재할 경우 AMD 방식으로, ⋅ 둘다 아니라면 window 객체에 모듈을 보낸다.
ESM	⋅ 정적 바인딩 ⋅ 비동기 import 가능 ⋅공식 표준	ES6에서 도입된 공식 표준 모듈 시스템으로, 언어 자체에 탑재되어 있다. export - import 문으로 JS 파일 간의 접근을 가능하게 한다.

 

---

3. ESM (ECMAScript Module)

ES6부터 도입된 모듈 시스템으로, export - import 문으로 JS 파일 간 접근을 가능하게 한다.

이 방식이 나오기 전까지는 <script> 파일을 전역 스코프처럼 사용했다. (순서 섞이면 안되고 하위가 상위를 오염시킬 수 있는 그것..ㄷㄷ)

 

1. ESM 동작 방식

평소 남발했던 import와 export가 어떻게 동작하고 있었는지 알아보자.

1. 모듈 선언
   
   • 개발자가 import/export 문법으로 모듈을 작성한다.
2. 정적 분석 ✅
   • 선언한 모듈을 실행하기 전에 자바스크립트 엔진이 정적 분석한다.
   • 분석을 통해  Module Record(모듈 메타데이터 객체)를 생성한다.
     Module Record의 역할                                                                                    
     - 구문 분석 결과 보관 (import/export 구문 분석 후 어떤 바인딩이 있는지 저장)  
     - 의존성 정보 추적 (어떤 모듈을 import 하는지 경로/이름 정보를 포함)               
     - 호출 환경 준비 (모듈 실행 전 필요한 초기 환경 레코드를 설정)                          
     - 순환 참조 추적 (순환 의존성이 있는 경우, 처리 흐름을 관리)                             
     - 1회 실행 관리 (모듈이 한 번만 평가됨을 보장)                                                  
3. 모듈 로딩
   • 비동기적 방식으로 모듈을 로딩한다.(네트워크 or 파일시스템)
4. 모듈 인스턴스화 ✅
   • Module Record를 Module Instance로 변환한다.
     Module Instance의 역할
     - import할 변수/함수에게 할당할 공간을 찾는 과정을 가진다.
     - import/export가 모두 할당한 메모리 주소를 가리킨다. (라이브 바인딩)
     - 이때 import 해온 모듈은 하위에서 변경이 불가능하다.
5. 모듈 평가 ✅
   • 각 모듈은 한 번만 실행되며, 실행 이후 캐싱된다.
   • import된 모듈이 실행되면 export 값이 메모리에 저장되며, 저장된 값은 참조하는 모듈이 사용한다.

 

 

 

참고

https://leetrue.hashnode.dev/javascript-module-system