JavaScript는 모듈 시스템을 통해 코드를 구성하고 재사용하는 기능을 제공합니다. 모듈은 독립적이고 재사용 가능한 코드 블록으로, 다른 모듈과 상호작용할 수 있습니다. 이러한 모듈 시스템을 사용하면 코드의 구조를 개선하고 유지 보수성을 향상시킬 수 있습니다.

기본적인 모듈 작성 및 사용 방법

JavaScript에서 기본적인 모듈 작성 및 사용 방법은 다음과 같습니다:

모듈 작성

// 모듈 파일 (example.js)

export const PI = 3.14;

export function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

export default subtract;

위의 예시에서는 export 키워드를 사용하여 모듈에서 외부로 공개할 함수나 변수를 지정하고 있습니다. export default 키워드를 사용하여 모듈에서 기본으로 내보낼 항목을 지정할 수도 있습니다.

모듈 사용

// 다른 파일에서 모듈 사용하기 (index.js)

import { PI, add } from './example.js';
import subtract from './example.js';

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

위의 예시에서는 import 문을 사용하여 다른 모듈에서 원하는 항목을 가져올 수 있습니다. 가져온 항목은 해당 모듈의 변수나 함수처럼 사용할 수 있습니다. import 문 뒤에는 가져올 모듈의 상대 경로를 지정합니다.

고급 모듈 시스템 활용하기

JavaScript 모듈 시스템은 해당 모듈에서 사용할 내용을 선택적으로 가져오는 기능을 제공합니다. 이를 통해 필요한 모듈만 가져와서 번들의 크기를 줄일 수 있습니다. 또한 동적으로 모듈을 가져올 수 있는 기능도 제공됩니다.

선택적으로 모듈 가져오기

// 필요한 항목만 가져오기 (example.js)

export const PI = 3.14;

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

// 필요한 항목만 가져와서 사용하기 (index.js)

import { add } from './example.js';

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

위의 예시에서는 필요한 항목인 add 함수만 example.js 모듈에서 가져오고 있습니다.

동적으로 모듈 가져오기

// 모듈을 동적으로 가져오기 (index.js)

import('./example.js').then(module => {
  console.log(module.PI); // 3.14
  console.log(module.add(2, 3)); // 5
});

위의 예시에서는 import() 함수를 사용하여 모듈을 동적으로 가져오고 있습니다. 이를 통해 특정 조건에 따라 필요한 모듈만 가져와서 사용할 수 있습니다.

결론

JavaScript의 모듈 시스템은 코드 구조의 개선과 재사용성의 증가에 도움을 줍니다. 모듈 시스템을 사용하여 코드를 모듈화하고 재사용 가능한 모듈을 작성하여 개발 효율성을 향상시킬 수 있습니다. 고급 기능인 선택적으로 모듈 가져오기와 동적 모듈 가져오기를 활용하면 간결하고 유연한 코드를 작성할 수 있습니다. 모듈 시스템은 현대적인 JavaScript 개발에서 필수적인 도구입니다.

#JavaScript #모듈시스템