모듈 및 네임스페이스 소개

TypeScript의 모듈과 네임스페이스는 특히 대규모 프로젝트에서 코드를 구성하고 구조화하는 데 도움이 됩니다.

둘 다 비슷한 목표를 달성하지만 사용하는 방식은 서로 다릅니다. 이 단원에서는 두 방식의 차이점과 사용법을 안내합니다.

모듈이란?

모듈은 변수, 함수 또는 클래스와 같은 기능을 내보내 애플리케이션의 다른 부분에서 재사용할 수 있게 하는 파일 또는 코드 조각입니다.

TypeScript는 가져오기 및 내보내기 기능에 ES 모듈을 사용하며, ES 모듈은 이제 JavaScript의 표준이 되었습니다.

모듈에서 내보내기 및 가져오기

export를 사용하여 모듈에서 코드를 내보내고 import를 사용하여 가져올 수 있습니다:

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

다른 파일에서 가져옵니다:

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

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

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

기본 내보내기

TypeScript에서는 기본 내보내기도 사용할 수 있습니다. 기본 내보내기를 사용하면 모듈에서 하나의 값을 내보낼 수 있습니다:

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

중괄호 없이 가져옵니다:

// app.ts
import add from './math';
console.log(add(2, 3));

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

// app.ts
import add from './math';
console.log(add(2, 3));

네임스페이스란?

TypeScript의 네임스페이스는 관련 코드를 하나의 이름 아래에 그룹화하는 방법으로, 코드를 구성하고 이름 충돌을 방지할 수 있게 해 줍니다.

네임스페이스는 namespace 키워드를 사용하여 정의합니다.

네임스페이스 만들기 및 사용하기

다음은 네임스페이스의 예시입니다:

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

다음과 같이 사용할 수 있습니다:

console.log(MathUtils.add(2, 3));

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

console.log(MathUtils.add(2, 3));

모듈과 네임스페이스 비교

모듈과 네임스페이스의 주요 차이점은 다음과 같습니다:

• 모듈은 파일을 기반으로 하며 ES 모듈 구문을 지원합니다.
• 네임스페이스는 단일 파일에서 코드를 구성하는 데 적합하지만, 현대적인 애플리케이션에서는 오래된 방식으로 간주됩니다.

모범 사례

TypeScript로 작업할 때는 다음 사항을 지키세요:

• 최신 JavaScript 표준에 맞는 모듈을 새 프로젝트에 사용하세요.
• 기존 프로젝트나 소규모 프로젝트에서만 네임스페이스 사용을 고려하세요.
• 항상 코드를 체계적이고 일관되게 유지하세요.

축하합니다!

모듈과 네임스페이스를 사용하여 TypeScript 프로젝트를 구조화하고 구성하는 방법을 배웠습니다. 이러한 중요한 개념을 완전히 익힐 수 있도록 계속 연습해 보세요!