[JavaScript] JavaScipt Module System(모듈 시스템)

모듈 시스템이란? 

JavaScript에서 **모듈(Module)**이란 코드의 재사용성과 유지보수성을 높이기 위해 하나의 파일을 여러 개로 분리하여 관리하는 방법입니다. ES6 이전에는 모듈 시스템이 없었기 때문에 전역 변수 오염, 의존성 관리 문제 등의 어려움이 있었습니다. 

이를 해결하기 위해 CommonJS와 ESModule(ESM) 같은 모듈 시스템이 도입되었습니다. 

이 글에서는 import/export 문법, CommonJS와 ESModule의 차이, default export와 named export의 차이에 대해 자세히 알아보겠습니다. 

import, export 문법 

(ES Module) ES6(ECMAScript 2015)에서 등장한 **ESM(ECMAScript Module)**을 사용하면 import와 export를 통해 모듈을 불러오고 내보낼 수 있습니다. 

export 사용법

모듈을 내보낼 때는 export 키워드를 사용합니다. default export와 named export 두 가지 방법이 있습니다.

named export (이름 내보내기)

// math.js 
export const add = (a, b) => a + b; 
export const subtract = (a, b) => a - b;

default export (기본 내보내기)

// user.js 
export default function getUser(name) {
  return `User: ${name}`; 
}

 

 import 사용법 내보낸 모듈을 가져올 때는 import 키워드를 사용합니다.

named export 가져오기

// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8

default export 가져오기

 // main.js 
 import getUser from './user.js'; 
 console.log(getUser('Alice')); // User: Alice

 as 키워드를 사용한 별칭(Alias) 지정

import { add as sum } from './math.js';
console.log(sum(10, 2)); // 12

 

CommonJS vs ESModules 차이

특징	CommonJS	ESModules
사용 방식	require() / module.exports	import / export
실행 방식	동기(Synchronous)	비동기(Asynchronous)
브라우저 지원	기본 지원 ❌(Webpack 등 필요)	기본 지원
사용 환경	환경 Node.js에서 주로 사용	브라우저 & 최신 Node.js에서 사용

 CommonJS 예제

// math.js 
module.exports = { 
  add: (a, b) => a + b, 
  subtract: (a, b) => a - b 
}; 

// main.js 
const math = require('./math'); 
console.log(math.add(4, 2)); // 6

 ESModule 예제

// math.js 
export function add(a, b) { 
  return a + b;
} 

// main.js 
import { add } from './math.js'; 
console.log(add(4, 2)); // 6

CommonJS는 require()를 사용하여 동기적으로 모듈을 로드하지만, ESModule은 import를 사용하여 비동기적으로 로드됩니다.

default export vs named export 차이

구분	named export	default export
내보내기 방식	export { 변수명 }	export default 변수명
가죠오기 방식	{ 변수명 }	변수명을 마음대로 변경 가능
한 파일에서 여러 개 가능 여부	가능	불가능 (한 개만 가능)

named export 예제

// utils.js 
export const greet = () => "Hello";
export const farewell = () => "Goodbye"; 

// main.js 
import { greet, farewell } from "./utils.js"; 
console.log(greet()); // Hello

default export 예제 

// user.js 
export default function getUser(name) { 
  return `User: ${name}`; 
} 

// main.js 
import getUser from "./user.js"; 
console.log(getUser("Alice")); // User: Alice

default export는 파일에서 한 번만 사용할 수 있으며, import 시 이름을 자유롭게 변경할 수 있습니다.

---

결론

ESModule (import / export)은 최신 JavaScript에서 사용되는 공식 모듈 시스템

CommonJS (require / module.exports)는 Node.js에서 주로 사용

named export는 여러 개 내보낼 수 있지만, default export는 한 개만 가능

최근에는 ESModule이 표준이므로, 가능하면 import/export를 사용하는 것이 좋습니다. 🚀