9장: 모듈과 네임스페이스 사용하기

공개 노트 검색

TypeScript 정복하기: 초심자에서 전문가로

모듈과 네임스페이스란 무엇인가?

TypeScript에서는 규모가 커진 프로젝트와 여러 개발자가 오가는 협업 환경에서 코드 관리가 중요합니다. 코드를 논리적 단위로 나누고, 불필요한 충돌을 막으려면 두 가지 개념이 중심에 있습니다. 바로 "모듈(Modules)"과 "네임스페이스(Namespaces)"입니다.

모듈은 파일 단위로 코드를 분리해, 각 파일은 독립된 스코프를 가집니다. ES6부터 표준으로 자리 잡은 방식이며, import와 export 키워드를 사용해 필요한 부분만 다른 파일에서 불러올 수 있죠. 다음은 간단한 모듈 예시입니다.

// math.ts
export function add(a: number, b: number) {
    return a + b;
}

// main.ts
import { add } from './math';
console.log(add(2, 3)); // 5

네임스페이스는 단일 파일(혹은 여러 파일을 병합)에서 관련 있는 기능을 묶어주는 구식 방식입니다. 네임스페이스로 감싸면 전역 공간에 영향을 주지 않고, 설계한 범위 내에서만 사용할 수 있습니다.

namespace MyUtil {
    export function greet(name: string) {
        return `안녕하세요, ${name}`;
    }
}

console.log(MyUtil.greet('철수'));

모듈과 네임스페이스의 차이와 선택 기준

과거엔 네임스페이스가 널리 쓰였지만, 이제 모듈 표준이 자리 잡으며 주요 선택지는 모듈이 되었습니다. ES6 모듈 시스템을 활용하면 프로젝트가 커져도 의존성과 구성 파악이 쉬워지며, 번들러(Webpack, Rollup 등)와 함께 최적화 효과도 누릴 수 있습니다.

반면, 브라우저 환경과 파일 로더가 마련되지 않던 시절, 전역 스코프 오염을 막거나 빠르게 관련 기능을 묶고 싶을 때 네임스페이스가 유용했습니다. 현재는 모듈을 사용하는 것이 보편적이며, 네임스페이스는 구형 프로젝트나 특수한 상황(최소한의 환경, 빠른 프로토타입)에만 권장됩니다.

ES 모듈의 구조와 실제 활용 방법

TypeScript에서 모듈을 사용할 때는 각 파일이 하나의 모듈이 됩니다. 변수, 함수, 클래스 등 내보내고 싶은 코드에 export를 붙입니다. 바깥에선 import를 이용해 명확하게 필요한 것만 들여옵니다. 다음처럼 사용할 수 있습니다.

// user.ts
export interface User {
    name: string;
    age: number;
}
export function introduce(user: User) {
    return `${user.name}(${user.age})`;
}

// app.ts
import { User, introduce } from './user';
const me: User = { name: '영수', age: 30 };
console.log(introduce(me));

이를 통해 의존성, 사용 범위를 명확히 하고 불필요한 코드 노출을 막습니다. 상황에 따라 export default로 모듈 전체를 특정 값에 할당해 내보내는 방식도 있습니다.

네임스페이스: 과거 방식 이해와 병행 시 주의점

네임스페이스는 파일 내에서 namespace 블록 안에 코드를 묶어 외부와 구분합니다. 네임스페이스 안에서 외부에 노출할 요소에만 export를 붙여야 하며, 외부 코드가 접근할 땐 네임스페이스.이름 형태로 사용합니다. 하지만 ES 모듈과 네임스페이스를 혼합하는 것은 지양해야 합니다. 파일 기반 모듈에서는 이미 분리와 스코프 관리가 가능하므로, 네임스페이스는 오히려 복잡성만 더할 수 있습니다.

알아두면 좋은 모듈과 네임스페이스의 모범 사례

새로운 프로젝트라면 무조건 ES6 모듈 방식을 적용하세요.
네임스페이스는 레거시 혹은 매우 단순한 환경에서만 사용합니다.
import와 export는 명확히 작성해, 불필요한 전역 오염과 의존성 오류를 방지하세요.
모듈 경로 관리에는 상대경로와 절대경로 중 일관성 있게 선택합니다.

마치며

코드가 커질수록 체계적인 구성은 필수가 됩니다. TypeScript의 강력함은 모듈 시스템과 함께 극대화될 수 있습니다. 이제 본격적으로, 코드 구조를 논리적으로 관리하는 모듈과 네임스페이스의 원리부터 실제 적용까지 내 것으로 만들어보세요.