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

닉네임

비밀번호

제목

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

타입스크립트(TypeScript)는 자바스크립트의 상위 집합으로, <a href='https://sangseek.com/sangseeks/정적 타입/ko'>정적 타입</a>을 지원하며, 모듈 시스템을 통해 코드의 구조화와 재사용성을 높이는 데 도움을 줍니다. 타입스크립트의 모듈 시스템은 ES6(<a href='https://sangseek.com/sangseeks/ECMAScript 2015/ko'>ECMAScript 2015</a>) 모듈 시스템을 기반으로 하며, 이를 통해 개발자는 코드의 각 부분을 독립적으로 작성하고 관리할 수 있습니다. 아래에서는 타입스크립트의 모듈 시스템이 어떻게 작동하는지에 대해 자세히 설명하겠습니다.           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. 기본 <a href='https://sangseek.com/sangseeks/내보내기/ko'>내보내기</a>와 이름 있는 내보내기    타입스크립트에서는 기본 내보내기(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. 모듈 해석    타입스크립트는 모듈을 해석할 때, 모듈의 경로를 기반으로 파일 시스템에서 해당 모듈을 찾습니다. 상대 경로(`./`, `../`) 또는 절대 경로를 사용할 수 있으며, `<a href='https://sangseek.com/sangseeks/tsconfig.json/ko'>tsconfig.json</a>` 파일에서 `baseUrl` 및 `paths` 설정을 통해 모듈 해석 방식을 조정할 수 있습니다.           5. 네임스페이스와 모듈    타입스크립트에서는 네임스페이스(namespace)라는 개념도 지원하지만, ES6 모듈 시스템을 사용하는 것이 더 권장됩니다. 네임스페이스는 <a href='https://sangseek.com/sangseeks/전역 스코프/ko'>전역 스코프</a>에서 코드를 그룹화하는 데 사용되지만, 모듈 시스템은 각 모듈이 독립적으로 작동하도록 하여 전역 네임 충돌을 방지합니다.           6. 모듈 컴파일    타입스크립트는 모듈을 컴파일할 때, 각 모듈을 별도의 파일로 생성하거나 하나의 파일로 번들링할 수 있습니다. `tsconfig.json` 파일에서 `module` 옵션을 설정하여 CommonJS, ES6, <a href='https://sangseek.com/sangseeks/AMD/ko'>AMD</a> 등 다양한 모듈 시스템으로 컴파일할 수 있습니다.           7. 결론    타입스크립트의 모듈 시스템은 코드의 구조화, 재사용성, 유지보수성을 높이는 데 중요한 역할을 합니다. `export`와 `import`를 통해 모듈 간의 의존성을 명확히 하고, 기본 내보내기와 이름 있는 내보내기를 통해 다양한 방식으로 모듈을 구성할 수 있습니다. 이러한 모듈 시스템은 대규모 <a href='https://sangseek.com/sangseeks/애플/ko'>애플</a>리케이션 개발에 있어 필수적인 요소로 자리 잡고 있습니다.