모듈 시스템

모듈 시스템

---

JS의 모듈 시스템은 코드를 여러 개의 파일로 나누어 관리하고, 각 파일 간의 의존성을 정의하여 필요한 기능을 불러오는 방식이다.
이를 통해 코드의 재사용성, 유지보수성, 가독성을 높일 수 있다.
자바에서도 패키지를 사용해 관련 클래스와 인터페이스를 그룹화하여 관리하는 것과 유사하게, JavaScript에서는 모듈 시스템을 통해 코드를 나눌 수 있습니다.

CommonJS

---

CommonJS는 JavaScript를 사용하는 서버 사이드 플랫폼에서 모듈을 정의하고 사용하기 위한 표준화된 방법 중 하나이다. Node.js에서 가장 널리 사용되는 모듈 시스템이며, 이전에는 브라우저 환경에서도 사용되었으며 ES6 모듈 시스템이 대안으로 사용되기도 한다.
브라우저 환경에서 사용하기에는 동기적인 특성과 캐싱 메커니즘 때문에 성능적인 측면에서 제약이 있을 수 있다. 그러나 Node.js와 같은 서버 사이드 환경에서는 이러한 특성이 더욱 적합하며, 많은 서버 사이드 라이브러리 및 프레임워크가 CommonJS를 기본 모듈 시스템으로 사용하고 있다.

특징

• 동기적 로딩: 모듈을 가져올 때 동기적으로 로딩된다.
• 범용성: Node.js 환경에서 주로 사용된다.
• 단일 값 또는 객체: CommonJS에서는 주로 단일 값을 module.export에 할당한다. 객체를 내보내는 것도 가능하다.

예제

// math.js - 모듈 정의
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

module.exports = { add, subtract };

// main.js - 모듈 가져오기
const math = require('./math');

console.log(math.add(2, 3));
console.log(math.subtract(5, 2));

// main.js - 모듈 가져오기
const { add, subtract } = require('./math');

console.log(add(2, 3));
console.log(subtract(5, 2));

ES6 모듈 시스템 (ESM)

---

ES6 모듈 시스템은 ECMAScript 2015(ES6)에서 도입된 표준 모듈 시스템이다. import와 export를 사용하여 모듈을 가져오고 내보낸다.

ES6는 JavaScript의 6번째 버전으로, 2015년에 공식적으로 발표되었다. ES6는 JavaScript 언어에 많은 새로운 기능과 문법을 추가하여 개발자들이 코드를 더 효율적으로 작성하고 유지보수할 수 있도록 도와주는 것이 목적이었다.

특징

• 비동기적 로딩: 모듈을 가져올 때 비동기적으로 로딩된다.
• 표준화: 최신 JavaScript 표준으로, 브라우저와 Node.js 모두에서 사용할 수 있다.
• 정적 분석: 빌드 타임에 모듈 관계를 정적으로 분석할 수 있어 최적화와 트리 쉐이킹(tree shaking)이 가능하다.
• 두 가지 내보내기 방식: Default Export와 Named Export가 있다.

Default Export

• 모듈당 하나의 값을 기본으로 내보낼 수 있다.
• 가져올 때는 중괄호를 사용하지 않는다.
• 기본적으로 사용되는 값을 나타낸다.

// Default Export
const multiply = (a, b) => a * b;
export default multiply;

// Default Export 가져오기
import multiply from './math';

console.log(multiply(5, 3));

 

Named Export

• 모듈에서 여러 값을 명명하여 내보낼 수 있습니다.
• 가져올 때는 중괄호를 사용하여 해당하는 값을 가져다.
• 다수의 값을 내보낼 때 사용한다.

// Named Export
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// Named Export 가져오기
import { add, subtract } from './math';

console.log(add(5, 3));
console.log(subtract(5, 3));

 

함께 사용하기

Named Export와 Default Export를 혼합하여 사용할 수 있다. 모듈에서는 하나의 값만을 Default Export로 내보낼 수 있지만, 그 외에 여러 값들을 Named Export로 내보낼 수 있다. 이를 혼합하여 사용하면 모듈을 더욱 유연하게 구성할 수 있다.

// Named Export와 Default Export 혼합 사용
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

const multiply = (a, b) => a * b;
export default multiply;

// Named Export와 Default Export 혼합 사용
import multiply, { add, subtract } from './math';

console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2
console.log(multiply(5, 3)); // 15