TypeScript 모듈: 자세한 설명과 예시를 통한 가이드

소개

TypeScript에서 모듈은 코드를 논리적인 단위로 분리하여 관리하고 재사용성을 높이는 중요한 개념입니다. 이를 통해 코드의 복잡성을 줄이고 유지보수를 용이하게 만들 수 있습니다. 이 글에서는 TypeScript 모듈의 기본 개념부터 컴파일러 옵션 선택까지 자세히 알아보고, 실제 예시를 통해 이해를 돕겠습니다.

이론

모듈이란 무엇일까요?

모듈은 코드의 특정 기능이나 관련된 코드들을 묶어놓은 일종의 컨테이너입니다. 각 모듈은 독립적인 스코프를 가지며, 다른 모듈과의 의존성을 명확하게 관리할 수 있습니다. 이는 코드의 재사용성을 높이고, 이름 충돌을 방지하며, 대규모 프로젝트에서 코드를 효율적으로 관리할 수 있도록 도와줍니다.

TypeScript에서 모듈을 사용하는 이유는 무엇일까요?

• 코드 재사용성: 한 번 작성한 모듈을 여러 곳에서 재사용할 수 있습니다.
• 명확한 의존성 관리: 각 모듈의 의존성을 명확하게 설정하여 코드의 유지보수를 용이하게 합니다.
• 네임스페이스 관리: 모듈을 통해 이름 충돌을 방지하고 코드를 더욱 체계적으로 관리할 수 있습니다.
• 모듈 번들러와의 연동: Webpack, Rollup 등의 모듈 번들러와 함께 사용하여 최종적으로 브라우저에서 실행 가능한 JavaScript 파일로 번들링할 수 있습니다.

모듈 종류

• 내부 모듈: 동일한 파일 내에서 사용되는 모듈입니다. 주로 네임스페이스를 정의하는 데 사용됩니다.
• 외부 모듈: 다른 파일에서 가져와 사용하는 모듈입니다. Node.js 스타일의 모듈 시스템을 따릅니다.

모듈 사용 방법

• import: 다른 모듈에서 필요한 요소를 가져올 때 사용합니다.
• export: 모듈 외부로 공개할 요소를 지정할 때 사용합니다.

컴파일러 옵션 선택

TypeScript 컴파일러 옵션은 모듈 시스템을 설정하는 데 중요한 역할을 합니다.

• --module: 모듈 시스템 종류를 지정합니다. (commonjs, amd, system, umd, es2015, esnext)
• --outDir: 컴파일된 JavaScript 파일을 저장할 디렉토리를 지정합니다.
• --rootDir: 소스 코드의 루트 디렉토리를 지정합니다.
• --baseUrl: 상대 경로를 해석하기 위한 기준 경로를 지정합니다.
• --paths: 타입 정의 파일의 위치를 지정합니다.

예시

// moduleA.ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

// moduleB.ts
import { greet } from './moduleA';

console.log(greet('world'));

위 예시에서 moduleA는 greet 함수를 export하고, moduleB는 moduleA에서 greet 함수를 import하여 사용합니다.

참고:

• TypeScript 공식 문서: https://www.typescriptlang.org/docs/handbook/modules.html
• Webpack 공식 문서: https://webpack.js.org/concepts/modules/
• Rollup 공식 문서: https://rollupjs.org/guide/en/

추가적으로 다룰 수 있는 내용:

• TypeScript 모듈 해결 방식 (resolution)
• 모듈 번들러와 TypeScript 모듈의 연동
• TypeScript에서의 네임스페이스와 모듈의 차이점
• TypeScript 모듈 시스템의 최신 동향