[자바스크립트] 모듈 시스템

자바스크립트 모듈 시스템은 코드를 작은 단위로 분리하여 관리하고 재사용성을 높이는 시스템입니다. 마치 레고 블록처럼 각 모듈을 독립적인 기능 단위로 만들어 필요에 따라 조립하여 사용할 수 있습니다. 이를 통해 코드의 복잡성을 줄이고 유지보수를 용이하게 만들 수 있습니다.

왜 모듈 시스템이 필요한가요?

• 코드 재사용성: 한 번 작성한 코드를 여러 곳에서 재사용할 수 있어 개발 생산성을 높입니다.
• 코드 관리 용이성: 코드를 작은 단위로 분리하여 관리하기 때문에 코드의 복잡성을 줄이고, 특정 부분만 수정해야 할 경우 다른 부분에 영향을 미칠 가능성을 줄입니다.
• 협업 효율 증대: 여러 개발자가 각자 모듈을 개발하여 합칠 수 있으므로 협업이 용이합니다.
• 의존성 관리: 모듈 간의 의존성을 명확히 관리하여 예상치 못한 문제 발생을 방지합니다.

모듈 시스템의 종류

• CommonJS: Node.js에서 주로 사용되는 모듈 시스템입니다. require() 함수를 사용하여 모듈을 불러오고, module.exports를 통해 모듈을 내보냅니다.
• AMD (Asynchronous Module Definition): 브라우저 환경에서 비동기적으로 모듈을 로딩하기 위해 만들어진 시스템입니다. require.js 라이브러리가 대표적입니다.
• UMD (Universal Module Definition): CommonJS와 AMD를 모두 지원하는 모듈 시스템입니다.
• ESM (ECMAScript Modules): ECMAScript 표준에 포함된 모듈 시스템으로, import와 export 키워드를 사용하여 모듈을 가져오고 내보냅니다.

모듈 시스템 사용 예시 (ESM)

// module1.js
export const name = '홍길동';
export function greet() {
    console.log('안녕하세요');
}

// module2.js
import { name, greet } from './module1.js';

console.log(name); // 홍길동
greet();

모듈 시스템의 장점

• 코드의 조직화: 코드를 논리적인 단위로 분리하여 관리하기 쉽습니다.
• 재사용성 향상: 한 번 작성한 모듈을 여러 프로젝트에서 재사용할 수 있습니다.
• 유지보수 용이: 모듈 단위로 수정이 가능하여 유지보수가 용이합니다.
• 협업 효율 증대: 여러 개발자가 각자 모듈을 개발하여 합칠 수 있습니다.

모듈 시스템의 단점

• 초기 학습 비용: 모듈 시스템을 처음 접하는 개발자에게는 학습 곡선이 있을 수 있습니다.
• 빌드 과정: 모듈 번들링 등 추가적인 작업이 필요할 수 있습니다.

 

1. 간단한 모듈 예시 (ESM)

// module1.js
export const PI = 3.14159;

export function calculateCircleArea(radius) {
  return PI * radius * radius;
}

// module2.js
import { PI, calculateCircleArea } from './module1.js';

const radius = 5;
const area = calculateCircleArea(radius);
console.log(`원의 면적: ${area}`);

• module1.js: PI 상수와 calculateCircleArea 함수를 export하여 다른 모듈에서 사용할 수 있도록 합니다.
• module2.js: module1.js에서 export한 PI와 calculateCircleArea를 import하여 사용합니다.

2. 기본값 제공

// module.js
export const config = {
  host: 'localhost',
  port: 3000,
  database: 'mydatabase'
};

// 다른 모듈에서 사용
import { config } from './module.js';
const { host, port, database = 'default' } = config;

• database에 기본값을 설정하여, 해당 값이 존재하지 않을 경우 default 값을 사용합니다.

3. 별칭 사용

// module.js
export const PI = 3.14159;

// 다른 모듈에서 사용
import { PI as circleRatio } from './module.js';
console.log(circleRatio); // 3.14159

• PI를 circleRatio라는 다른 이름으로 사용할 수 있습니다.

4. 모든 항목 가져오기

// module.js
export const name = '홍길동';
export const age = 30;

// 다른 모듈에서 사용
import * as user from './module.js';
console.log(user.name); // 홍길동
console.log(user.age); // 30

• * as user 문법을 사용하여 모듈의 모든 export를 user 객체에 담습니다.

5. 동적 import

// 모듈을 동적으로 로딩
const module = await import('./module.js');
console.log(module.default);

• import() 함수를 사용하여 모듈을 동적으로 로딩할 수 있습니다.

6. 태그 템플릿과 함께 사용

// module.js
export const hello = (name) => `안녕하세요, ${name}님!`;

// 다른 모듈에서 사용
import { hello } from './module.js';
console.log(hello('홍길동'));

• 태그 템플릿과 함께 사용하여 동적인 문자열을 생성할 수 있습니다.