## 🌟 모듈 한 파일에 모든 기능을 다 때려 박는다면 가독성도 좋지 않고 유지 보수도 힘들 것입니다. 그래서 보통 기능 별로 파일을 나누어 사용하는 데, 이를 **모듈**이라고 합니다. ![모듈](https://jongdeug.ddns.net/api/nest/uploads/c60797a5-0b99-4349-a42e-fe2121005c22_1740042169213.png) 특정 기능을 하는 JavaScript 파일이 하나의 모듈인 것이죠.
## 🌟 모듈 시스템 모듈 시스템은 모듈을 가져오고, 내보내고, 사용하는 등의 기능을 제공해 코드를 구조화하고 관리하는 시스템입니다. 대표적인 모듈 시스템에는 CommonJS와 ES Modules 등이 있습니다. ### CommonJS CommonJS는 전통적인 모듈 시스템인데 `require`, `exports` 명령어로 모듈을 가져오고 내보내는 방식입니다. ### ES Modules ES Modules는 ES6(ECMAScript 2015)에서 도입된 모듈 시스템으로 `import`, `export`를 통해 모듈을 가져오고 내보내는 방식입니다. `.mjs` 확장자를 사용하거나, `package.json`에서 `"type": "module"`을 설정하여 사용할 수 있습니다.
## 🌟 CommonJS vs ES Modules ### 1. 정적/동적 용어 정리 먼저 정적/동적 import에 대한 용어 정리가 필요할 것 같습니다. **정적 import는 "빌드" 타임에 결정되고, 동적 import는 "런타임"에 결정**되는 것입니다. 정적 import는 다음과 같은 특징들을 만족해야 합니다.
모듈의 최상위 레벨에서만 사용 가능 ```js // 올바른 사용: 최상위 레벨 import fs from 'fs'; function someFunction() { // 잘못된 사용: 함수 내부 import fs from 'fs'; // 오류! } ``` if문, for문 등의 제어문 안에서 사용 불가능 ```js // 잘못된 사용: 조건문 내부 if (condition) { import mod1 from './mod1.js'; // 오류! } else { import mod2 from './mod2.js'; // 오류! } ``` 문자열 리터럴만 사용 가능 ```js // 올바른 사용: 문자열 리터럴 import myModule from './myModule.js'; // 잘못된 사용: 변수나 표현식 const modulePath = './myModule.js'; import myModule from modulePath; // 오류! ```
### 2. 동기적 vs 비동기적 용어 정리를 했으니 각 모듈 시스템이 어떻게 동작하는지 살펴보겠습니다.
#### CommonJS - CommonJS는 동적 import만 가능합니다. - 코드의 최상단에 있고, 문자열 리터럴만 사용한다는 점에서 "정적"으로 보이지만 실제로 **런타임**에 작동합니다. - `require()`는 항상 **동기적**으로 실행됩니다. ```js // 1. 정적으로 보이는 import let foo = require("./mod1.js"); // 2. 동적 import let foo; if (someCondition) { foo = require("./mod1.js"); } else { foo = require("./mod2.js"); } // 또는 const foo = require(someCondition ? "./mod1.js" : "./mod2.js"); // 3. 동기적으로 실행 const fs = require('fs'); // 파일 불러올 때까지 기다림 console.log('파일 불러옴'); ```
#### ES Modules - 정적 import(`import`문): **파싱 단계**에 분석됩니다. - 동적 import(`import()`문): **런타임**에 실행됨 - ES Modules는 브라우저 환경에서도 사용될 수 있도록 비동기적으로 설계됐습니다. ```js // 1. 정적 import =================================== // 유효함 import foo from "./mod1.js"; // 유효하지 않음 if (someCondition) { import foo from "./mod1.js"; } else { import foo from "./mod2.js"; } // 2. 동적 import =================================== if (someCondition) { const mod1 = await import("./mod1.js"); } else { const mod2 = await import("./mod2.js"); } // 또는 const foo = await import(someCondition ? "./mod1.js" : "./mod2.js").default; // 3. 비동기적으로 실행 =================================== import fs from 'fs'; console.log('파일 불러오기 전에 이게 찍힘'); ```
### 3. 트리셰이킹(Tree-Shaking) 트리셰이킹이란 미사용 코드를 번들에서 제거하는 최적화 기법을 말합니다. ES Modules는 **정적 분석**(코드를 실행하지 않고 단순히 파싱만으로 모듈 간의 의존성을 파악하는 것)이 가능해 번들러가 미사용 코드를 쉽게 탐지하고 제거할 수 있습니다. (다만 `import()`를 사용한 동적 import는 트리셰이킹 대상이 아닙니다.) ```js // math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; export const multiply = (a, b) => a * b; export const divide = (a, b) => a / b; // main.js import { add } from './math.js'; console.log(add(2,3)); ``` 반면, CommonJS는 런타임에 모듈을 가져오기 때문에 불필요한 코드를 제거하기 어렵습니다.
### 4. 최상위 레벨에서 await ES Modules는 최상위 레벨에서 `await`를 사용할 수 있습니다. 코드를 직접 보시면 이해가 빠를 겁니다. CommonJS ```js const fetchData = async () => { return '데이터'; }; // 함수 밖에서 await를 사용하면 에러가 발생합니다. (async () => { const data = await fetchData(); console.log(data); })(); ``` ES Modules ```js const fetchData = async () => { return '데이터'; }; // 함수 밖에서도 await 사용이 가능합니다. const data = await fetchData(); console.log(data); ```
## 🌟 모듈 시스템 흐름 ![image.png](https://jongdeug.ddns.net/api/nest/uploads/f5ea3dba-489c-4c4c-8329-c8a8fe6e8347_1740111125655.png)출처: 재그지그, [https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html](https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html)
## 🌟 참고 자료 - [https://medium.com/@hong009319/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%91%9C%EC%A4%80-%EC%A0%95%EC%9D%98-commonjs-vs-es-modules-306e5f0a74b1](https://medium.com/@hong009319/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%91%9C%EC%A4%80-%EC%A0%95%EC%9D%98-commonjs-vs-es-modules-306e5f0a74b1) - [ https://stackoverflow.com/questions/52965907/what-is-the-meaning-of-static-import-in-es6]( https://stackoverflow.com/questions/52965907/what-is-the-meaning-of-static-import-in-es6)