모듈(module)

JavaScript 모듈은 재사용 가능한 코드의 조각을 캡슐화하고, 다른 JavaScript 파일에서 임포트하여 사용할 수 있게 하는 기능입니다. 모듈 시스템을 사용하면 큰 프로젝트를 관리하기 쉬운 작은 단위로 나누고, 네임스페이스 충돌을 방지하며, 의존성을 명확하게 관리할 수 있습니다.

ES6 모듈

ES6(ES2015)에서 공식적으로 모듈 시스템이 도입되었습니다. ES6 모듈은 **export**와 import 문을 사용하여 모듈을 내보내고 가져옵니다.

Export

모듈에서 함수, 객체, 변수 등을 외부로 내보낼 때 export 키워드를 사용합니다. 기본 내보내기(default export)와 명명된 내보내기(named export)가 있습니다.

• 기본 내보내기 (Default Export): 모듈당 하나만 존재할 수 있으며, import 시 임의의 이름으로 가져올 수 있습니다.

// message.js
export default function sayHello(name) {
  return `Hello, ${name}!`;
}

• 명명된 내보내기 (Named Export): 한 모듈에서 여러 값을 내보낼 수 있으며, import 시 중괄호 **{}**를 사용하여 명시적으로 이름을 지정해야 합니다.

// utils.js
export function add(x, y) {
  return x + y;
}

export function multiply(x, y) {
  return x * y;
}

Import

다른 모듈에서 내보낸 값을 가져올 때 import 문을 사용합니다.

• 기본 내보내기 가져오기:

// app.js
import sayHello from './message.js';

console.log(sayHello('World')); // "Hello, World!"

• 명명된 내보내기 가져오기:

// app.js
import { add, multiply } from './utils.js';

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

CommonJS 모듈

Node.js 환경에서 주로 사용되는 모듈 시스템입니다. require 함수를 사용하여 모듈을 가져오고, module.exports 또는 exports 객체를 통해 모듈을 내보냅니다.

모듈 내보내기

// calc.js
function add(x, y) {
  return x + y;
}

module.exports = add;

모듈 가져오기

// app.js
const add = require('./calc.js');

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

모듈의 장점

• 코드 재사용성: 모듈은 코드를 재사용 가능한 단위로 나누어, 다른 프로젝트나 파일에서 쉽게 재사용할 수 있습니다.
• 네임스페이스 관리: 각 모듈은 자체 스코프를 가지므로, 전역 네임스페이스를 오염시키지 않습니다.
• 의존성 관리: 모듈은 의존하는 다른 모듈을 명시적으로 선언함으로써 프로젝트의 의존성을 명확하게 관리할 수 있습니다.

모듈은 현대 JavaScript 개발에서 중요한 개념으로, 애플리케이션의 구조를 개선하고 코드의 관리를 용이하게 합니다.