모듈 시스템

모듈 시스템

ES6 모듈 개념

모듈은 JavaScript 코드를 재사용 가능한 독립적인 파일로 분리하는 방법입니다. 복잡한 애플리케이션을 더 작고 관리하기 쉬운 조각으로 나누어 개발할 수 있게 해줍니다.

모듈의 장점:

• 코드 재사용성 향상
• 이름 충돌 방지 (각 모듈은 자체 스코프를 가짐)
• 코드 구조화 및 유지보수 용이
• 의존성 관리 개선

import와 export

ES6에서는 import와 export 키워드를 사용해 모듈 간에 기능을 공유할 수 있습니다.

export

모듈에서 다른 파일로 내보내고 싶은 변수, 함수, 클래스 등을 지정합니다.

방법 1: 개별 내보내기

// math.js
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export function multiply(a, b) {
  return a * b;
}

방법 2: 한꺼번에 내보내기

// math.js
const PI = 3.14159;
function add(a, b) {
  return a + b;
}
function multiply(a, b) {
  return a * b;
}

export { PI, add, multiply };

방법 3: 기본 내보내기 (default export)

// person.js
export default class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    return `안녕하세요, ${this.name}입니다.`;
  }
}

import

다른 모듈에서 내보낸 기능을 가져와 사용합니다.

방법 1: 개별 가져오기

// app.js
import { PI, add } from './math.js';

console.log(PI);         // 3.14159
console.log(add(5, 3));  // 8

방법 2: 모든 기능 한번에 가져오기

// app.js
import * as Math from './math.js';

console.log(Math.PI);            // 3.14159
console.log(Math.multiply(4, 2)); // 8

방법 3: 기본 내보내기 가져오기

// app.js
import Person from './person.js';

const person = new Person('김철수');
console.log(person.sayHello());  // 안녕하세요, 김철수입니다.

방법 4: 기본 내보내기와 일반 내보내기 함께 가져오기

// module.js
export default function main() { console.log('기본 함수'); }
export function helper() { console.log('도우미 함수'); }

// app.js
import mainFunction, { helper } from './module.js';
mainFunction();  // 기본 함수
helper();        // 도우미 함수

모듈 사용 시 주의사항

• HTML에서 모듈 스크립트 사용 시 type="module" 속성을 지정해야 합니다:

  <script type="module" src="app.js"></script>
  

• 모듈은 항상 엄격 모드('use strict')로 실행됩니다.
• 모듈은 자체 스코프를 가지므로, 전역 변수를 선언해도 다른 모듈에서 접근할 수 없습니다.
• 모듈은 한 번만 평가됩니다(여러 곳에서 import해도 코드는 한 번만 실행).