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

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

타입스크립트(TypeScript)에서 모듈을 가져오는 방법은 JavaScript의 모듈 시스템을 기반으로 하며, ES6(<a href='https://sangseek.com/sangseeks/ECMAScript 2015/ko'>ECMAScript 2015</a>) 모듈 시스템을 사용합니다. 타입스크립트는 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의 모듈 시스템을 사용할 경우 `<a href='https://sangseek.com/sangseeks/node_modules/ko'>node_modules</a>` 폴더에 있는 패키지도 가져올 수 있습니다.           6. <a href='https://sangseek.com/sangseeks/tsconfig.json/ko'>tsconfig.json</a> 설정    타입스크립트 프로젝트에서 모듈 시스템을 설정하려면 `tsconfig.json` 파일에서 `module` 옵션을 설정해야 합니다. 예를 들어, ES6 모듈을 사용하려면 다음과 같이 설정합니다.    ```json  {      "compilerOptions": {          "module": "ES6",          "target": "ES6",          "moduleResolution": "node"      }  }  ```           7. CommonJS 및 다른 모듈 시스템    타입스크립트는 CommonJS와 AMD 같은 다른 모듈 시스템도 지원합니다. CommonJS를 사용할 경우 `<a href='https://sangseek.com/sangseeks/require/ko'>require</a>`와 `module.exports`를 사용하여 모듈을 가져오고 내보낼 수 있습니다. 그러나 ES6 모듈이 더 현대적이고 표준화된 방법이므로, 가능하면 ES6 모듈을 사용하는 것이 좋습니다.           결론    타입스크립트에서 모듈을 가져오는 방법은 매우 직관적이며, 코드의 구조를 명확하게 하고 재사용성을 높이는 데 큰 도움이 됩니다. ES6 모듈 시스템을 활용하여 다양한 기능을 효율적으로 관리하고, 필요에 따라 다른 모듈 시스템과의 호환성도 고려할 수 있습니다.