타입스크립트에서 모듈 시스템은 어떻게 작동하나요?

타입스크립트에서 모듈 시스템은 어떻게 작동하나요?

1. 타입스크립트 모듈이란 무엇인가요?
모듈은 독립적인 코드 단위로, 변수, 함수, 클래스 등을 외부와 구분된 범위(scope)에 캡슐화하여 관리합니다. 타입스크립트 모듈은 기본적으로 파일 단위이며, 한 파일이 하나의 모듈이 됩니다.

2. 모듈과 네임스페이스(namespace)의 차이는 무엇인가요?
모듈은 ES6의 import/export 문법을 사용하여 파일 간 코드 분할과 재사용을 지원합니다. 네임스페이스는 내부적으로 코드 조직을 위해 사용되는 TS 고유 개념이며, 글로벌 스코프 오염을 방지하는데 주로 쓰입니다. 현재 권장되는 것은 모듈 사용 방식입니다.

3. 타입스크립트에서 모듈을 선언하려면 어떻게 해야 하나요?
파일 내에서 `export` 키워드로 변수, 함수, 클래스 등을 내보내고, 다른 파일에서는 `import`를 사용해 불러옵니다. 예:
```typescript
// math.ts
export function add(a: number, b: number): number {
return a + b;
}

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

4. 모듈 해석(module resolution)이란 무엇인가요?
모듈 해석은 `import` 구문에서 지정한 모듈 경로를 어떻게 실제 파일이나 패키지로 해석하는지를 의미합니다. TS는 기본적으로 Node.js 스타일 해석 방식을 따르며, `tsconfig.json`에서 `moduleResolution` 옵션을 통해 조정 가능합니다.

5. 타입스크립트 모듈 시스템은 어떤 모듈 타깃을 지원하나요?
`tsconfig.json`의 `module` 옵션을 통해 `CommonJS`, `ES6`, `AMD`, `UMD`, `System` 등 다양한 모듈 시스템을 지정할 수 있으며, 빌드 환경과 호환되는 모듈 형식을 선택할 수 있습니다.

6. default export와 named export 차이는 무엇인가요?
- default export : 모듈 당 한 개의 기본 내보내기이며, import 시 이름을 자유롭게 지정할 수 있습니다.
- named export : 모듈에서 여러 항목을 내보낼 수 있으며, import 시 반드시 export 된 이름과 일치시켜야 합니다.

예: ```typescript
// default export
export default function foo() {}

// import
import foo from './module';

// named export
export function bar() {}
export const baz = 1;

// import
import { bar, baz } from './module';
```

7. 타입 정의 파일(.d.ts)에서 모듈을 어떻게 선언하나요?
`.d.ts` 파일에서 `declare module 'module-name' {}` 구문으로 외부 모듈의 타입을 선언하거나, ES 모듈 형식 그대로 `export` 구문을 사용하여 유형을 내보낼 수 있습니다.

8. type-only import와 export는 무엇인가요?
`import type`과 `export type`은 타입만 불러오거나 내보내는 구문으로, 런타임에 코드가 제거되어 타입 선언만 사용하는 경우에 활용됩니다.

9. 모듈 경로에 확장자를 반드시 써야 하나요?
ES6 모듈 표준에서는 확장자를 명시하는 것이 권장되지만, 타입스크립트 및 Node.js에서는 설정 및 환경에 따라 확장자를 생략할 수 있습니다.

10. 모듈 시스템을 설정하려면 어떤 `tsconfig.json` 옵션이 중요한가요?
- `module`: 모듈 시스템 형식 지정 (예: "commonjs", "esnext")
- `moduleResolution`: 모듈 해석 방식 설정 (예: "node", "classic")
- `esModuleInterop`: 기본 import 호환성 설정
- `allowSyntheticDefaultImports`: 기본 import 모방 허용

---

요약하자면, 타입스크립트 모듈 시스템은 ES6 모듈 기반이며, 모듈 단위로 코드를 분리하고 `import/export`를 통해 코드 재사용과 캡슐화를 지원합니다. 관련 `tsconfig.json` 설정을 통해 다양한 빌드 환경에 맞게 모듈 형태와 해석 방식을 조정할 수 있습니다.

타입스크립트(TypeScript)는 자바스크립트의 상위 집합으로, 정적 타입을 지원하며, 모듈 시스템을 통해 코드의 구조화와 재사용성을 높이는 데 도움을 줍니다.

타입스크립트의 모듈 시스템은 ES6(ECMAScript 2015) 모듈 시스템을 기반으로 하며, 이를 통해 개발자는 코드의 각 부분을 독립적으로 작성하고 관리할 수 있습니다.

아래에서는 타입스크립트의 모듈 시스템이 어떻게 작동하는지에 대해 자세히 설명하겠습니다.

1. 모듈의 정의 타입스크립트에서 모듈은 파일 단위로 구성됩니다.

각 파일은 기본적으로 하나의 모듈로 간주되며, 다른 파일에서 해당 모듈을 가져오거나 사용할 수 있습니다.

모듈은 `export`와 `import` 키워드를 사용하여 다른 모듈과 상호작용합니다.

예시: ```typescript // math.ts export function add(a: number, b: number): number { return a + b; } export function subtract(a: number, b: number): number { return a - b; } ``` 위의 예시에서 `math.ts` 파일은 두 개의 함수를 `export`하고 있습니다.

이 함수들은 다른 모듈에서 사용할 수 있습니다.



2. 모듈 가져오기 다른 모듈에서 정의된 기능을 사용하려면 `import` 문을 사용하여 해당 모듈을 가져와야 합니다.

예시: ```typescript // main.ts import { add, subtract } from './math'; console.log(add(5,

3)); // 8 console.log(subtract(5,

3)); // 2 ``` 위의 예시에서 `main.ts` 파일은 `math.ts`에서 `add`와 `subtract` 함수를 가져와서 사용하고 있습니다.

이처럼 모듈을 가져오는 것은 코드의 가독성을 높이고, 각 모듈의 책임을 명확히 하여 유지보수를 용이하게 합니다.



3. 기본 내보내기와 이름 있는 내보내기 타입스크립트에서는 기본 내보내기(default export)와 이름 있는 내보내기(named export)를 지원합니다.

- 기본 내보내기 : 모듈에서 하나의 값을 기본으로 내보낼 때 사용합니다.

```typescript // calculator.ts export default function multiply(a: number, b: number): number { return a * b; } ``` 기본 내보내기는 한 모듈에서 하나만 사용할 수 있으며, 가져올 때는 중괄호 없이 가져옵니다.

```typescript // main.ts import multiply from './calculator'; console.log(multiply(5,

3)); // 15 ``` - 이름 있는 내보내기 : 여러 개의 값을 내보낼 수 있으며, 가져올 때는 중괄호를 사용합니다.

```typescript // shapes.ts export const PI =

3.14; export function areaOfCircle(radius: number): number { return PI * radius * radius; } ``` ```typescript // main.ts import { PI, areaOfCircle } from './shapes'; console.log(areaOfCircle(

5)); // 78.5 ```

4. 모듈 해석 타입스크립트는 모듈을 해석할 때, 모듈의 경로를 기반으로 파일 시스템에서 해당 모듈을 찾습니다.

상대 경로(`./`, `../`) 또는 절대 경로를 사용할 수 있으며, `tsconfig.json` 파일에서 `baseUrl` 및 `paths` 설정을 통해 모듈 해석 방식을 조정할 수 있습니다.



5. 네임스페이스와 모듈 타입스크립트에서는 네임스페이스(namespace)라는 개념도 지원하지만, ES6 모듈 시스템을 사용하는 것이 더 권장됩니다.

네임스페이스는 전역 스코프에서 코드를 그룹화하는 데 사용되지만, 모듈 시스템은 각 모듈이 독립적으로 작동하도록 하여 전역 네임 충돌을 방지합니다.



6. 모듈 컴파일 타입스크립트는 모듈을 컴파일할 때, 각 모듈을 별도의 파일로 생성하거나 하나의 파일로 번들링할 수 있습니다.

`tsconfig.json` 파일에서 `module` 옵션을 설정하여 CommonJS, ES6, AMD 등 다양한 모듈 시스템으로 컴파일할 수 있습니다.



7. 타입스크립트의 모듈 시스템은 코드의 구조화, 재사용성, 유지보수성을 높이는 데 중요한 역할을 합니다.

`export`와 `import`를 통해 모듈 간의 의존성을 명확히 하고, 기본 내보내기와 이름 있는 내보내기를 통해 다양한 방식으로 모듈을 구성할 수 있습니다.

이러한 모듈 시스템은 대규모 애플리케이션 개발에 있어 필수적인 요소로 자리 잡고 있습니다.