[typescript] 모듈과 네임스페이스를 사용하는 타입스크립트 프로젝트 구조

12 Dec 2023

typescript

타입스크립트(TypeScript)는 JavaScript의 확장된 기능을 제공하는 오픈 소스 프로그래밍 언어입니다. 타입스크립트에서 모듈(module)과 네임스페이스(namespace)는 코드를 구조화하는 데 중요한 역할을 합니다. 이번 블로그 글에서는 이 두 가지 개념을 사용하여 타입스크립트 프로젝트를 구조화하는 방법에 대해 알아보겠습니다.

1. 모듈

모듈은 코드를 논리적으로 그룹화하여 재사용성을 높이는 데 사용됩니다. 타입스크립트에서는 모듈을 사용하여 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있도록 만들 수 있습니다. 모듈은 export 키워드를 사용하여 다른 파일에서 접근할 수 있는 요소를 정의하고, import 키워드를 사용하여 다른 파일에서 모듈을 가져올 수 있습니다.

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

export function subtract(a: number, b: number): number {
  return a - b;
}

2. 네임스페이스

네임스페이스는 전역 범위에서 중첩된 이름을 생성하여 충돌을 방지하는 데 사용됩니다. 모듈과 비슷하게 코드를 구조화할 수 있지만, 모듈은 파일 수준에서 동작하는 반면, 네임스페이스는 전역 범위에서 동작합니다.

// geometry 네임스페이스
namespace Geometry {
  export interface Point {
    x: number;
    y: number;
  }

  export function distance(a: Point, b: Point): number {
    const dx = a.x - b.x;
    const dy = a.y - b.y;
    return Math.sqrt(dx * dx + dy * dy);
  }
}

3. 타입스크립트 프로젝트 구조에 적용하기

타입스크립트 프로젝트에서는 모듈과 네임스페이스를 조합하여 코드를 구조화할 수 있습니다. 예를 들어, 다양한 기능을 갖는 모듈들을 사용하여 더 큰 범위의 네임스페이스를 구성할 수 있습니다.

// geometry 모듈
export interface Point {
  x: number;
  y: number;
}

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

// geometry 네임스페이스에 math 모듈을 추가
namespace Geometry {
  export function distance(a: Point, b: Point): number {
    const dx = a.x - b.x;
    const dy = a.y - b.y;
    return Math.sqrt(dx * dx + dy * dy);
  }
}

4. 결론

모듈과 네임스페이스는 타입스크립트 프로젝트를 구조화하는 강력한 도구입니다. 적절히 활용하면 코드를 재사용하고 유지보수하기 쉽도록 만들 수 있습니다. 모듈과 네임스페이스의 사용은 프로젝트의 규모와 복잡성에 따라 다르므로, 각 상황에 맞게 적절히 활용하는 것이 중요합니다.

위에서 설명한 내용은 타입스크립트 프로젝트 구조를 만드는 데 모듈과 네임스페이스를 활용할 수 있는 방법에 대한 간단한 안내입니다. 이를 토대로 실제 프로젝트에서 이러한 개념을 적용해 보시기 바랍니다.

목차

1. 모듈

2. 네임스페이스

3. 타입스크립트 프로젝트 구조에 적용하기

4. 결론

참고 자료