JavaScript Modules
JavaScript Modules: 모듈의 이해와 활용
- *JavaScript 모듈(Modules)**은 코드의 재사용성을 높이고, 코드의 유지보수성과 가독성을 향상시키는 중요한 개념입니다. 모듈은 하나의 파일이나 코드 블록에서 특정 기능을 캡슐화하고, 이를 다른 파일이나 모듈에서 불러와 사용할 수 있는 구조를 제공합니다. JavaScript에서 모듈은 모듈화된 코드의 정의, 내보내기, 가져오기를 위한 표준 방식입니다.
이 가이드는 JavaScript 모듈 시스템에 대해 설명하고, 모듈 내보내기와 모듈 가져오기의 사용 방법을 다룹니다.
1. JavaScript 모듈의 기본 개념
JavaScript에서 모듈은 코드를 작은 단위로 나누고, 각 단위는 자신만의 스코프를 가집니다. 이를 통해 전역 변수 오염을 방지하고, 코드의 명확성을 높일 수 있습니다.
1.1. 모듈의 특징
- 분리된 코드: 모듈은 독립된 코드로, 각각의 스코프를 가지고 있습니다.
- 내보내기와 가져오기: 다른 파일이나 모듈에서 필요한 기능을 내보내고(
export), 필요한 기능을 **가져오기(import)**할 수 있습니다. - 재사용성: 모듈로 작성된 코드는 여러 프로젝트나 파일에서 재사용이 가능합니다.
2. 모듈 내보내기 (export)
모듈에서 다른 파일이나 모듈로 함수, 변수, 클래스 등의 자원을 내보내기하려면 export
키워드를 사용합니다. export에는 **기본 내보내기(default export)**와 이름 있는
내보내기(named export) 두 가지 방식이 있습니다.
2.1. 기본 내보내기 (default export)
기본 내보내기는 모듈에서 하나의 기본 값을 내보내는 방식입니다. export default 키워드를 사용하며, 다른 모듈에서
특정 이름으로 가져올 수 있습니다.
// math.js
export default function add(a, b) {
return a + b;
}
2.2. 이름 있는 내보내기 (named export)
이름 있는 내보내기는 여러 개의 값을 내보낼 수 있으며, 내보내는 값의 이름을 지정해야 합니다.
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export는 변수, 함수, 클래스 모두에 적용할 수 있습니다.
// person.js
export const name = "Alice";
export function greet() {
console.log("Hello!");
}
3. 모듈 가져오기 (import)
모듈에서 내보낸 자원을 다른 모듈이나 파일에서 사용하려면 import 키워드를 사용해 가져올 수 있습니다. 가져오기 방식은 기본
내보내기와 이름 있는 내보내기에 따라 다릅니다.
3.1. 기본 내보내기 가져오기 (default import)
기본 내보내기를 가져올 때는 특정 이름을 지정해서 가져올 수 있으며, 그 이름은 내보내는 모듈과 상관없습니다.
// app.js
import addFunction from './math.js';
console.log(addFunction(5, 3)); // 출력: 8
3.2. 이름 있는 내보내기 가져오기 (named import)
이름 있는 내보내기는 중괄호를 사용하여 내보낸 이름 그대로 가져와야 합니다.
// app.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 출력: 8
console.log(subtract(5, 3)); // 출력: 2
이름을 변경하려면 as 키워드를 사용하여 별칭을 지정할 수 있습니다.
// app.js
import { add as addition, subtract as subtraction } from './math.js';
console.log(addition(5, 3)); // 출력: 8
console.log(subtraction(5, 3)); // 출력: 2
4. 모두 가져오기 (import *)
모듈에서 내보낸 모든 자원을 한 번에 가져오려면 import * as 구문을 사용할 수 있습니다. 이 방식은
모듈 전체를 하나의 객체로 묶어 가져오는 방식입니다.
// app.js
import * as math from './math.js';
console.log(math.add(5, 3)); // 출력: 8
console.log(math.subtract(5, 3)); // 출력: 2
5. 결합된 내보내기
기본 내보내기와 이름 있는 내보내기를 같은 파일에서 함께 사용할 수 있습니다. 이 경우, 기본 내보내기는 별도로 가져오고, 이름 있는 내보내기는 중괄호로 가져옵니다.
// util.js
export default function greet() {
console.log("Hello!");
}
export const name = "Alice";
// app.js
import greet, { name } from './util.js';
greet(); // 출력: Hello!
console.log(name); // 출력: Alice
6. 동적 모듈 가져오기 (import())
JavaScript에서는 동적으로 모듈을 가져올 수 있는 방법도 있습니다. import() 함수는
Promise를 반환하며, 필요한 시점에 모듈을 비동기로 가져올 수 있습니다. 이 방법은 모듈을 필요할 때만 로드하여
성능을 최적화하는 데 유용합니다.
6.1. 동적 가져오기 예시
// app.js
import('./math.js').then(math => {
console.log(math.add(5, 3)); // 출력: 8
});
7. 모듈 활용 예시
7.1. 유틸리티 모듈
// utility.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export const PI = 3.14159;
7.2. 모듈 가져오기 및 사용
// app.js
import { add, subtract, PI } from './utility.js';
console.log(add(10, 5)); // 출력: 15
console.log(subtract(10, 5)); // 출력: 5
console.log(PI); // 출력: 3.14159
8. 모듈 시스템과 ES6 이전의 모듈 패턴
ES6 이전에는 JavaScript에 공식적인 모듈 시스템이 없었기 때문에, 즉시 실행 함수(IIFE), CommonJS, AMD 같은 패턴이 사용되었습니다. ES6부터는 표준 모듈 시스템이 도입되면서, 코드 모듈화가 더 쉬워졌습니다.
8.1. CommonJS와 ES6 모듈의 차이
CommonJS는 주로 Node.js에서 사용되었으며, **require**와
**module.exports**를 사용하여 모듈을 가져오고 내보냈습니다.
// CommonJS 방식
const math = require('./math');
const result = math.add(2, 3);
module.exports = result;
ES6에서는 **import**와 export 키워드를 사용해 모듈을 처리합니다.
요약
- JavaScript 모듈은 코드를 캡슐화하고 재사용성을 높이기 위해 사용되며, 모듈의 내보내기와 가져오기를 통해 서로 다른 파일 간에 코드 공유가 가능합니다.
- *
export*는 모듈에서 함수, 변수, 클래스를 내보내는 방법이며, 기본 내보내기와 이름 있는 내보내기가 있습니다. - *
import*는 모듈에서 내보낸 자원을 가져오는 방법이며, 기본 가져오기, 이름 있는 가져오기, 모두 가져오기 등을 지원합니다. - 동적 모듈 가져오기는 비동기적으로 모듈을 로드하여 성능을 최적화하는 방법입니다.
- 모듈을 사용하면 코드의 구조화와 **
유지 보수성**이 크게 향상되며, 전역 변수 오염을 방지할 수 있습니다.
JavaScript 모듈을 잘 활용하면, 큰 프로젝트에서도 코드의 관리와 재사용성을 높일 수 있습니다.