타입스크립트에서 모듈을 가져오는 방법은 무엇인가요?

Q1: 타입스크립트에서 모듈을 가져오는 기본 문법은 무엇인가요?
A1: 타입스크립트에서는 ES6 표준 모듈 문법을 사용합니다. 가장 기본적인 가져오기 문법은 `import { 함수명, 변수명 } from '모듈경로';` 형식입니다. 예를 들어,
```typescript
import { foo, bar } from './module';
```
이와 같이 사용합니다.

---

Q2: 모듈의 전체 내용을 한 번에 가져오려면 어떻게 하나요?
A2: 모듈 전체의 내용을 특정 이름 공간(namespace)로 묶어 가져올 때는 `import * as 이름 from '모듈경로';`를 사용합니다. 예:
```typescript
import * as utils from './utils';
utils.someFunction();
```

---

Q3: 모듈에서 기본 내보내기(default export)를 가져올 때는 어떻게 하나요?
A3: 기본 내보내기된(export default) 모듈은 중괄호 없이 이름만 지정하여 가져옵니다. 예:
```typescript
import MyDefault from './MyDefaultModule';
MyDefault();
```

---

Q4: 기본 내보내기와 일반 내보내기를 동시에 가져오려면?
A4: 기본 내보내기와 일반 내보내기를 혼합해서 다음과 같이 가져올 수 있습니다.
```typescript
import MyDefault, { foo, bar } from './MyModule';
```

---

Q5: 타입스크립트에서 타입만 가져올 때는 어떤 문법을 쓰나요?
A5: 타입 전용 임포트는 `import type`을 사용하여 컴파일 시 코드 삭제를 보장합니다. 예:
```typescript
import type { User } from './types';
```

---

Q6: 상대 경로 대신 절대 경로나 별칭을 사용하려면? A6: `tsconfig.json`의 `paths` 옵션을 설정하여 별칭을 만들 수 있습니다. 예:
```json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"]
}
}
}
```
코드에서 사용:
```typescript
import { helper } from '@utils/helper';
```

---

Q7: CommonJS 모듈을 가져올 때는 어떻게 하나요?
A7: CommonJS 모듈을 가져올 경우에도 ES6 import 문을 사용할 수 있으나, 모듈 설정에 따라 `allowSyntheticDefaultImports` 옵션을 켜야 할 수도 있습니다.
```typescript
import someLib from 'some-commonjs-lib';
```

---

Q8: 동적 임포트는 어떻게 사용하나요?
A8: `import()` 함수 형태로 모듈을 동적으로 비동기 가져올 수 있습니다.
```typescript
async function loadModule() {
const module = await import('./module');
module.doSomething();
}
```

---

Q9: 모듈 가져오기 시 파일 확장자를 꼭 붙여야 하나요?
A9: 타입스크립트 컴파일 시점에는 확장자를 빼도 되지만, ES 모듈을 브라우저에서 직접 사용할 경우 확장자가 필요할 수 있습니다. 대체로 `.ts` 확장자는 생략하고 `.js`로 변환된 파일을 참조합니다.

---

Q10: 타입스크립트에서 모듈을 임포트 할 때 주의할 점은?
A10: 모듈 경로가 올바른지, `tsconfig.json`의 모듈 해석 설정과 일치하는지 확인해야 하며, 타입만 임포트할 경우 `import type`을 사용해 코드 번들 크기를 줄이는 것이 좋습니다. 또한 기본 export와 명명 export를 혼동하지 말아야 합니다.

타입스크립트(TypeScript)에서 모듈을 가져오는 방법은 JavaScript의 모듈 시스템을 기반으로 하며, ES6(ECMAScript 2015) 모듈 시스템을 사용합니다.

타입스크립트는 ES6 모듈을 지원하며, CommonJS, AMD, UMD 등 다양한 모듈 시스템과의 호환성도 제공합니다.

여기서는 ES6 모듈 시스템을 중심으로 설명하겠습니다.

1. 모듈의 기본 개념 모듈은 코드의 재사용성을 높이고, 네임스페이스 충돌을 방지하기 위해 코드의 일부를 독립적으로 관리할 수 있게 해줍니다.

타입스크립트에서 모듈은 파일 단위로 구분되며, 각 파일은 기본적으로 모듈로 간주됩니다.



2. 모듈 내보내기 (Export) 타입스크립트에서 모듈을 사용하려면 먼저 해당 모듈에서 사용할 기능(변수, 함수, 클래스 등)을 내보내야 합니다.

내보내는 방법은 두 가지가 있습니다.



2.1. Named Exports (이름 있는 내보내기) 이 방법은 여러 개의 기능을 내보낼 수 있으며, 각 기능은 이름으로 식별됩니다.

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

3.14; export function add(x: number, y: number): number { return x + y; } export class Calculator { static multiply(x: number, y: number): number { return x * y; } } ```

2.2. Default Export (기본 내보내기) 모듈에서 하나의 기능만을 기본으로 내보낼 때 사용합니다.

기본 내보내기는 이름을 지정하지 않고 가져올 수 있습니다.

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

3. 모듈 가져오기 (Import) 내보낸 모듈을 다른 파일에서 사용할 때는 `import` 문을 사용합니다.



3.1. Named Imports (이름 있는 가져오기) 이름 있는 내보내기로 내보낸 기능을 가져올 때는 중괄호 `{}`를 사용합니다.

```typescript // app.ts import { PI, add, Calculator } from './math'; console.log(PI); //

3.14 console.log(add(2,

3)); // 5 console.log(Calculator.multiply(2,

3)); // 6 ```

3.2. Default Import (기본 가져오기) 기본 내보내기로 내보낸 기능은 중괄호 없이 가져옵니다.

```typescript // app.ts import greet from './greeter'; console.log(greet('Alice')); // Hello, Alice! ```

3.3. Alias 사용하기 가져온 모듈에 별칭을 붙일 수도 있습니다.

```typescript import { add as addition } from './math'; console.log(addition(5,

10)); // 15 ```

4. 전체 모듈 가져오기 모듈의 모든 내보내기를 하나의 객체로 가져올 수도 있습니다.

```typescript import * as math from './math'; console.log(math.PI); //

3.14 console.log(math.add(2,

3)); // 5 console.log(math.Calculator.multiply(2,

3)); // 6 ```

5. 모듈 경로 모듈을 가져올 때 경로를 지정해야 합니다.

상대 경로(`./`, `../`) 또는 절대 경로를 사용할 수 있으며, Node.js의 모듈 시스템을 사용할 경우 `node_modules` 폴더에 있는 패키지도 가져올 수 있습니다.



6. tsconfig.json 설정 타입스크립트 프로젝트에서 모듈 시스템을 설정하려면 `tsconfig.json` 파일에서 `module` 옵션을 설정해야 합니다.

예를 들어, ES6 모듈을 사용하려면 다음과 같이 설정합니다.

```json { "compilerOptions": { "module": "ES6", "target": "ES6", "moduleResolution": "node" } } ```

7. CommonJS 및 다른 모듈 시스템 타입스크립트는 CommonJS와 AMD 같은 다른 모듈 시스템도 지원합니다.

CommonJS를 사용할 경우 `require`와 `module.exports`를 사용하여 모듈을 가져오고 내보낼 수 있습니다.

그러나 ES6 모듈이 더 현대적이고 표준화된 방법이므로, 가능하면 ES6 모듈을 사용하는 것이 좋습니다.

결론 타입스크립트에서 모듈을 가져오는 방법은 매우 직관적이며, 코드의 구조를 명확하게 하고 재사용성을 높이는 데 큰 도움이 됩니다.

ES6 모듈 시스템을 활용하여 다양한 기능을 효율적으로 관리하고, 필요에 따라 다른 모듈 시스템과의 호환성도 고려할 수 있습니다.