TypeScript에서의 모듈과 네임스페이스 개념 이해
TypeScript 모듈(Modules)과 네임스페이스(Namespaces)는 코드의 구조화와 재사용성을 높이는 데 중요한 역할을 합니다. ES6 이후에는 모듈 기반 개발이 주를 이루지만, 과거에는 네임스페이스가 주로 사용되었습니다.
TypeScript에서는 모듈이 기본 권장 방식이며, 네임스페이스는 특정 상황에서만 사용됩니다. 두 개념은 비슷하지만 적용 방식과 목적이 다릅니다.
1. 모듈(Modules)이란?
모듈은 파일 단위로 코드를 분리하여 독립된 스코프를 가지게 하는 시스템입니다. 각 모듈은 import와 export를 통해 서로 필요한 코드를 주고받을 수 있습니다.
// math.ts
export function add(a: number, b: number): number {
return a + b;
}
// main.ts
import { add } from './math';
console.log(add(2, 3)); // 5
이처럼 모듈은 명확한 의존 관계를 만들고, 코드 재사용성과 유지보수성을 높여줍니다.
2. export 방식 종류
TypeScript는 export를 통해 다양한 방식으로 외부에 코드를 공개할 수 있습니다.
// 개별 export
export const PI = 3.14;
export function multiply(x: number, y: number) { return x * y; }
// default export
export default function divide(a: number, b: number) {
return a / b;
}
// import 예시
import divide from './math';
import { PI, multiply } from './math';
default export는 한 파일당 하나만 가능하며, 이름 없이 가져올 수 있는 점이 특징입니다.
3. 모듈의 장점
- 코드 분리 및 조직화가 쉬움
- 전역 스코프 오염 방지
- 다른 파일과 명확한 의존성 관계 유지
- ES6 표준에 기반한 현대적 방식
4. 네임스페이스(Namespaces)란?
네임스페이스는 여러 변수나 함수, 클래스를 그룹으로 묶어 이름 충돌을 방지하는 방식입니다. JavaScript에서는 ES6 이전에 전역 스코프 오염을 피하기 위해 사용되었으며, TypeScript에서도 지원되지만 점점 사용 빈도가 줄어들고 있습니다.
namespace Geometry {
export function getArea(width: number, height: number): number {
return width * height;
}
}
console.log(Geometry.getArea(5, 4)); // 20
내부 모듈이라고도 불리는 네임스페이스는 파일 단위가 아닌 코드 블록 단위로 구분합니다.
5. 네임스페이스의 특징과 단점
- 전역 스코프를 보호할 수 있음
- 복잡한 프로젝트에서 명명 충돌 방지
- 모듈 시스템과는 다르게 파일 간 분리가 제한적
- import/export 문법과는 호환이 제한됨
6. 모듈 vs 네임스페이스 비교
| 항목 | 모듈 (Module) | 네임스페이스 (Namespace) |
|---|---|---|
| 기반 | ES6 표준 | TypeScript 자체 문법 |
| 스코프 | 파일 단위 | 코드 블록 단위 |
| 사용 문법 | import/export | namespace 키워드 |
| 추천 여부 | 권장 | 특정 상황에서만 |
7. 언제 네임스페이스를 사용할까?
네임스페이스는 브라우저 환경에서 여러 스크립트 파일을 한 번에 로드하거나, 모듈 시스템을 사용할 수 없는 환경에서 유용할 수 있습니다. 하지만 대부분의 프로젝트는 모듈 기반 구조를 사용합니다.
// 여러 스크립트 파일에서 전역 네임스페이스 공유
namespace App {
export const version = "1.0";
}
namespace App {
export function greet(name: string) {
console.log(`Hello, ${name}`);
}
}
App.greet("TypeScript");
8. 모듈 결합 설정 (tsconfig)
모듈을 사용할 경우 tsconfig.json에서 module 설정을 적절히 해야 합니다.
{
"compilerOptions": {
"target": "ES6",
"module": "ES6",
"moduleResolution": "node",
"outDir": "./dist"
}
}
Node.js 환경에서는 "module": "CommonJS", 브라우저 환경에서는 "module": "ES6"나 "ESNext"를 사용하는 것이 일반적입니다.
결론: TypeScript에서 모듈이 기본, 네임스페이스는 보조
TypeScript에서 모듈은 코드 구조화의 표준 방식이며, 네임스페이스는 레거시 코드나 특수한 경우에만 사용됩니다. 모듈 시스템을 이용하면 import/export를 통해 명확한 의존성을 유지할 수 있고, 대규모 프로젝트에서도 유지보수가 쉬워집니다.
현대적인 TypeScript 개발 환경에서는 네임스페이스보다 모듈을 중심으로 설계를 진행하는 것이 가장 바람직합니다.