[JavaScript] 자바스크립트 - 모듈

자바스크립트의 모듈 시스템은 코드를 여러 파일로 분할하고, 각 파일에서 개별적으로 기능을 정의한 후 다른 파일에서 재사용할 수 있게 해준다. 이를 통해 코드의 재사용성과 유지보수성을 높이고, 네임스페이스 오염을 방지할 수 있다. ES6에서 공식적으로 모듈 시스템을 지원하기 시작했으며, import와 export 문을 사용한다.

 

모듈 사용 방법

export - 모듈을 사용하기 위해서는 우선 기능을 정의하고 내보내야 한다.

import - 그 다음, 다른 파일에서 그 기능을 불러와서 사용할 수 있다.

 

1. 기능 내보내기

[ mathUtils.js ]

// 여러 함수를 export 할 수 있습니다.
export function add(x, y) {
  return x + y;
}

export function subtract(x, y) {
  return x - y;
}

// 변수, 클래스 또한 export 가능
export const pi = 3.14159;

 

2. 기능 가져오기

[ app.js ]

// 다른 파일에서 함수를 import 해서 사용합니다.
import { add, subtract, pi } from './mathUtils.js';

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

 

기능만 내보내고 가져오기

default - 모듈에서 하나의 기능한 내보내기

1. 기본 내보내기

[ StringUtils.js ]

// 기본 내보내기 (default export)
export default function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

 

2. 기본 가져오기

[ app.js ]

// 기본 내보내기된 함수를 기본 가져오기로 불러옵니다.
// 파일 내 기본 내보내기된 요소가 하나이므로, 괄호 없이 이름을 지정합니다.
import capitalize from './StringUtils.js';

console.log(capitalize("hello")); // "Hello"

 

모듈의 장점

1. 명확한 의존성 선언

각 모듈이 어떤 다른 모듈에 의존하는 지 파일의 최상단에 선언한다.

2. 네임스페이스 관리

전역 네임스페이스를 오염시키지 않고 필요한 심버들만 명시적으로 불러와 사용한다.

3. 재사용성

모듈은 재사용 가능하게 설계되어, 다른 프로젝트에서도 동일한 모듈을 사용할 수 있다.