[Typescript] 02. 모듈

 

Typescript에서의 모듈과 그 사용법에 대해 알아봅니다.

 

 

 

1. 모듈(Module)

 

타입스크립트에서 index.ts와 같은 소스파일을 모듈이라고 합니다. 앞선 글에서 우리는 index.ts와 makePerson.ts파일 두 개를 만들었으므로 두 개의 모듈을 만든 셈입니다.

 

물론 하나의 소스코드에 모두 다 구현해도 됩니다. 하지만 유지보수 등 소스 코드 관리를 위해서 모듈마다 특정 기능을 구현하는 방식으로 소스코드를 분할하는 게 일반적인 방식입니다. 이러한 작업을 모듈화라고도 합니다.

 

index.ts 모듈에서 어떻게 makePerson.ts 모듈의 정보를 알고 가져다 쓸 수 있는 걸까요? 앞서 작성한 코드를 보면 아시겠지만 한 모듈이 다른 모듈에 어떤 내용이 있는지 서로 알게 해 주기 위해 타입스크립트에서는 export와 import라는 키워드를 제공합니다.

기능을 제공하는 모듈에서 export를, 기능을 사용하는 모듈에서 import를 사용해 다른 모듈의 기능을 가져다 쓸 수 있습니다.

 

 

 

2. 모듈화 예시

 

이제 실제 하나의 index.ts 모듈이 어떻게 모듈화가 이루어지는지 보도록 합니다. 이전 글을 참고하여 타입스크립트 프로젝트를 생성합니다.

 

다음처럼 index.ts파일에 모든 기능을 다 넣어두게 코딩합니다.

 

//// ./src/index.ts

let MAX_AGE = 100;

interface IPerson{
    name: string,
    age: number,
};

class Person implements IPerson{
    constructor(public name: string, public age: number){

    }
};

function makeRandomNumber(max: number = MAX_AGE): number{
    return Math.ceil((Math.random() * max));
};

const makePerson = (name: string, age = makeRandomNumber()) => ({name, age});

const testMakePerson = ():void => {
    let jane: IPerson = makePerson('Jane');
    let jack: IPerson = makePerson('Jack');
    console.log(jane, jack);
};

testMakePerson();

 

위와 같이 코딩했으면 다음 명령어를 통해 한번 실행해 봅시다.

 

> npm run dev

 

 

정상적으로 실행이 되시나요? 이제 이 모듈을 몇 가지 내용에 맞춰 모듈화 작업을 진행해 보겠습니다. 

 

우선 위에 작성한 코드를./src/person/Person.ts로 먼저 한번 나눠보겠습니다.

 

//// ./src/person/Person.ts

let MAX_AGE = 100;

export interface IPerson{
    name: string,
    age: number,
};

class Person implements IPerson{
    constructor(public name: string, public age: number){

    }
};

function makeRandomNumber(max: number = MAX_AGE): number{
    return Math.ceil((Math.random() * max));
};

export const makePerson = (name: string, age = makeRandomNumber()) => ({name, age});

 

//// ./src/index.ts

import {IPerson, makePerson} from './person/Person';

const testMakePerson = ():void => {
    let jane: IPerson = makePerson('Jane');
    let jack: IPerson = makePerson('Jack');
    console.log(jane, jack);
};

testMakePerson();

 

이전 코드와 달라진 점이 보이시나요? 앞서 설명한 것처럼 한 모듈에서 다른 모듈을 사용하기 위해선 위처럼 export와 import를 사용해 어떤 기능을 내보내고 가져와 쓸지 명시해 줘야 합니다.

 

 

 

3. export default

 

타입스크립트는 자바스크립트와의 호환성을 위해 export default 키워드를 제공합니다. 이 키워드는 한 모듈에서 단 하나의 기능에 붙일 수 있습니다. 이렇게 내보내진 기능은 import문으로 불러올 때 중괄호 없이 사용 가능하며 export 키워드와 함께 사용될 수 있습니다.

 

위의 코드를 아래와 같이 수정해 줍니다.

 

//// ./src/person/IPerson.tx

export default interface IPerson{
    name: string,
    age: number,
};

 

//// ./src/utils/makeRandomNumber.ts

let MAX_AGE = 100;

export function makeRandomNumber(max: number = MAX_AGE): number{
    return Math.ceil((Math.random() * max));
};

 

//// ./src/person/Person.ts

import IPerson from './IPerson';
import {makeRandomNumber} from '../utils/makeRandomNumber';


export default class Person implements IPerson{
    constructor(public name: string, public age: number){

    }
};

export const makePerson = (name: string, age = makeRandomNumber()) => ({name, age});

 

//// ./src/index.ts

import IPerson from './person/IPerson';
import Person, {makePerson} from './person/Person';

const testMakePerson = ():void => {
    let jane: IPerson = makePerson('Jane');
    let jack: IPerson = makePerson('Jack');
    console.log(jane, jack);
};

testMakePerson();

 

IPerson은 export default를 사용해 가져올 때 중괄호가 생략된 것을 확인할 수 있습니다. Person.ts에서는 export와 export default가 동시에 사용되어 index.ts에서 Person을 가져올 때 Person은 중괄호가 없고 makePerson은 중괄호가 있는 모습을 확인할 수 있습니다.

 

위의 파일을 실행해보세요.

 

 

모듈화를 통해 파일이 쪼개졌지만 여전히 잘 동작하는 것을 확인할 수 있습니다.