TypeScript - 모듈: 초보자 가이드

안녕하세요, 열망하는 프로그래머 여러분! 오늘 우리는 TypeScript 모듈의 세계로 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요; 저는 당신의 친절한 안내자가 되어 단계별로 설명해드리겠습니다. 그麼, 시작해보겠습니다!

TypeScript - Modules

무엇이 모듈인가?

자세한 내용에 들어가기 전에 모듈이 무엇인지 이해해보겠습니다. 대규모의 레고 구조물을 만들고 있다고 상상해보세요. 한 번에 모든 것을 만드는 대신, 더 작은 부분들을 따로 만들고 그后再 조합하는 것이 더 나을 것입니다. 이 precisely programming에서 모듈이 하는 일입니다!

모듈은 우리 코드를 관리 가능하고 재사용 가능한 조각으로 나누는 데 도움을 줍니다. 그들은 우리 코드를 여러 파일로 나누어 유지보수와 이해를 더 쉽게 만들어줍니다. TypeScript에서는 내부 모듈과 외부 모듈 두 가지 유형을 가집니다.

내부 모듈

내부 모듈, 또는 네임스페이스로 알려져 있는 것은 TypeScript가 코드를 조직하는 원래 방법이었습니다. 지금은 덜 일반적지만, 이해하는 것이 도움이 될 수 있습니다.

내부 모듈 생성

우리의 첫 번째 내부 모듈을 만들어보겠습니다:

namespace MathOperations {
export function add(x: number, y: number): number {
return x + y;
}

export function subtract(x: number, y: number): number {
return x - y;
}
}

console.log(MathOperations.add(5, 3));      // Output: 8
console.log(MathOperations.subtract(10, 4)); // Output: 6

이 예제에서 우리는 MathOperations 네임스페이스를 생성했습니다. 그 안에 add와 subtract 두 개의 함수가 있습니다. export 키워드는 이 함수들을 네임스페이스 외부에서 접근할 수 있게 합니다.

내부 모듈 사용

네임스페이스의 함수를 사용하려면 네임스페이스 이름을 접두사로 붙입니다:

let sum = MathOperations.add(10, 20);
console.log(sum); // Output: 30

중첩 네임스페이스

우리는 네임스페이스를 서로 중첩할 수도 있습니다:

namespace Geometry {
export namespace Circle {
export function calculateArea(radius: number): number {
return Math.PI * radius * radius;
}
}
}

console.log(Geometry.Circle.calculateArea(5)); // Output: 78.53981633974483

여기서 우리는 Geometry 네임스페이스 내에 Circle 네임스페이스를 중첩하고 있습니다.

외부 모듈

외부 모듈은 TypeScript 코드를 조직하는 더 현대적이고 선호되는 방법입니다. 이들은 ECMAScript 2015(ES6) 모듈과 호환됩니다.

외부 모듈 생성

mathOperations.ts라는 파일을 만들어보겠습니다:

// mathOperations.ts
export function add(x: number, y: number): number {
return x + y;
}

export function multiply(x: number, y: number): number {
return x * y;
}

이 파일에서 우리는 두 개의 함수 add와 multiply를 내보내고 있습니다.

외부 모듈 가져오고 사용하기

이제 이 함수들을 사용하기 위해 다른 파일을 만들어보겠습니다:

// app.ts
import { add, multiply } from './mathOperations';

console.log(add(5, 3));      // Output: 8
console.log(multiply(4, 2)); // Output: 8

여기서 우리는 mathOperations 모듈에서 특정 함수를 가져오고 있습니다.

기본 내보내기

때로는 모듈에서 단일 주요 것을 내보내고 싶을 수 있습니다. 이때 기본 내보내기가 사용됩니다:

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

기본 내보내기를 가져오기 위해:

// app.ts
import greet from './greet';

console.log(greet('Alice')); // Output: Hello, Alice!

가져오기 이름 변경

이름 충돌을 피하고 싶다면 가져오기 이름을 변경할 수 있습니다:

import { add as sum } from './mathOperations';

console.log(sum(5, 3)); // Output: 8

모듈을 사용하는 이유

조직성: 모듈은 코드를 조직하고 유지보수 가능하게 만들어줍니다.
캡슐화: 그들은 코드의 복잡성을 숨기는 방법을 제공합니다.
재사용성: 코드를 애플리케이션의 다른 부분에서 쉽게 재사용할 수 있습니다.
네임스페이스: 코드에서 이름 충돌을 피하는 데 도움을 줍니다.

모듈 해결 전략

TypeScript는 모듈을 해결하는 다른 전략을 사용합니다:

전략	설명
클래식	간단한 알고리즘을 사용하여 모듈을 찾습니다
노드	Node.js 모듈 해결 메커니즘을 흉내냅니다
경로 매핑	TypeScript가 가져온 내용을 어떻게 해결해야 할지 지정하도록 합니다

결론

축하합니다! TypeScript 모듈의 세계로 첫 걸음을 뗐습니다. 자전거 타기 배우는 것처럼,처음에는 조금 흔들릴 수 있지만, 연습을 하면 얼마든지 잘할 수 있습니다.

모듈은 당신의 프로그래밍 도구 중 강력한 도구입니다. 그들은 깨끗하고 조직적이고 재사용 가능한 코드를 작성하는 데 도움을 줍니다. TypeScript 여정을 계속하면서, 모듈을 점점 더 많이 사용하게 될 것입니다.

계속 코딩하고, 계속 배우고, 가장 중요한 것은 즐겁게 하세요! 누가 알겠는가? 다음 위대한 앱은 단지 모듈 거리에 있을 수도 있습니다. 행복하게 코딩하세요!

Credits: Image by storyset

이전 튜토리얼:

TypeScript - 네임스페이스

다음 튜토리얼:

TypeScript - Ambients