[JavaScript 최신 기능 시리즈] 6일차: JavaScript 모듈 시스템 이해하기

6. 모듈 시스템

모듈 시스템이란 무엇인가?

모듈 시스템은 코드의 재사용성과 유지보수성을 높이기 위해 코드를 독립적인 단위로 분리하는 방법을 제공합니다. ES6 이전에는 CommonJS와 AMD와 같은 모듈 시스템이 사용되었지만, ES6에서 표준 모듈 시스템이 도입되었습니다.

ES6 모듈

ES6 모듈은 import와 export 키워드를 사용하여 모듈을 정의하고 불러올 수 있습니다.

1. 모듈 내보내기 (Export)

모듈에서 변수, 함수, 클래스 등을 내보내기 위해 export 키워드를 사용합니다.

기본 내보내기 (Default Export)

모듈에서 하나의 기본 값을 내보낼 수 있습니다.

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

export default add;

이름 내보내기 (Named Export)

모듈에서 여러 값을 이름으로 내보낼 수 있습니다.

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

2. 모듈 가져오기 (Import)

모듈을 가져오기 위해 import 키워드를 사용합니다.

기본 가져오기 (Default Import)

기본 내보내기를 가져올 때는 중괄호를 사용하지 않습니다.

// main.js
import add from './math.js';

console.log(add(2, 3));  // 출력: 5

이름 가져오기 (Named Import)

이름 내보내기를 가져올 때는 중괄호를 사용합니다.

// main.js
import { add, subtract } from './math.js';

console.log(add(2, 3));      // 출력: 5
console.log(subtract(5, 2)); // 출력: 3

별칭 사용하기 (Aliasing)

가져오는 값에 별칭을 사용할 수 있습니다.

// main.js
import { add as sum, subtract as minus } from './math.js';

console.log(sum(2, 3));      // 출력: 5
console.log(minus(5, 2));    // 출력: 3

모두 가져오기 (Import All)

모든 내보내기를 객체 형태로 가져올 수 있습니다.

// main.js
import * as math from './math.js';

console.log(math.add(2, 3));      // 출력: 5
console.log(math.subtract(5, 2)); // 출력: 3

동적 가져오기 (Dynamic Import)

ES2020에서는 import() 함수로 동적으로 모듈을 가져올 수 있게 되었습니다. 이는 조건부로 모듈을 가져오거나, 비동기적으로 모듈을 가져올 때 유용합니다.

1. 동적 가져오기 예제

// main.js
if (condition) {
  import('./math.js').then(module => {
    console.log(module.add(2, 3));  // 출력: 5
  });
}

CommonJS 모듈

Node.js 환경에서는 CommonJS 모듈 시스템이 널리 사용됩니다. CommonJS에서는 module.exports와 require를 사용하여 모듈을 내보내고 가져옵니다.

1. 모듈 내보내기 (CommonJS)

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

module.exports = {
  add,
  subtract
};

2. 모듈 가져오기 (CommonJS)

// main.js
const math = require('./math');

console.log(math.add(2, 3));      // 출력: 5
console.log(math.subtract(5, 2)); // 출력: 3

결론

모듈 시스템을 사용하면 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있습니다. ES6 모듈은 표준화된 문법을 제공하여 다양한 환경에서 모듈을 쉽게 사용할 수 있게 해줍니다. CommonJS 모듈은 주로 Node.js 환경에서 사용되며, 두 시스템을 이해하고 적절히 활용하는 것이 중요합니다.

다음 글에서는 새로 추가된 빌트인 객체들 (Map, Set 등)에 대해 알아보겠습니다. 다음 글에서 만나요!