Typescript - Module

사실 모듈과 관련된 내용을 따로 포스팅할 내용이 있을까 싶을 정도로 간단한 내용일 수 있지만, ES5 Javascript만을 사용해온 사람들이나, 관련 내용을 처음 접하는 사람들에게 도움이 되고자 간단하게 설명하려고 한다. 가볍게 쓰-윽 읽고 넘어가면 좋을 내용이다.

 

어떤 내용을 코드로 구현하기 위해서는 한 파일에 코드를 쭉~ 작성해서 필요한 메서드나 변수들을 활용해도 동작하는데 문제는 없을 것이다. (물론 호이스팅 등 신경써야 하는 부분들은 많겠지만..!) 하지만, 프로젝트의 규모가 커짐에 따라 코드의 관리 및 유지보수를 편리하고 안전하게 하기 위해, 일정한 기준을 세워 기준별로 코드를 나누는 방식으로 코드를 분할하는데, 이를 모듈화(modulization)라고 할 수 있다.

**각 스크립트 파일을 하나의 모듈이라고 생각하면 편하다

 

아래의 예시에서 하나의 코드파일로 부터 모듈화 하는 작업 예시를 살펴보도록 하자.

아래의 내용을 index.ts 한 파일에 작성후 실행하면, 결과값을 확인할 수 있다.

const sampleArray = Array(50)

interface ITest {
	name: string,
	num: number
}

class Test implements ITest {
	constructor(public name: string, public num: number) {}
}

const testFunction = (arr:Array<number> = sampleArray):number => { 
	return Math.floor(Math.random() * arr.length);
}

const run = (name:string, num:number = testFunction()) => ({name, num})

const testRun = ():void => {
	let t1: ITest = run('first')
    let t2: ITest = run('second')
    
    console.log(t1, t2)
}

testRun()

/*======================
Result
{name:"first",num:32}
{name:"second",num:44}
======================*/

 

위의 파일을 모듈화 하면 아래와 같이 변경할 수 있다.

// filename: ITest.ts

export default interface ITest {
	name: string,
	num: number
}

// filename: util.ts

const sampleArray = Array(50)

export const testFunction = (arr:Array<number> = sampleArray):number => { 
	return Math.floor(Math.random() * arr.length);
}

// filename: module.ts
import * as U from './util'
import ITest from './ITest'

export default class Test implements ITest {
	constructor(public name: string, public num: number) {}
}

const testFunction = (arr:Array<number> = sampleArray):number => { 
	return Math.floor(Math.random() * arr.length);
}

export const run = (name:string, num:number = U.testFunction()):ITest => ({name, num})

// filename: index.ts

import ITest from './ITest'
import Test, {run} from './module'

const testRun = ():void => {
	let t1: ITest = run('first')
    let t2: ITest = run('second')
    
    console.log(t1, t2)
}

testRun()


/*======================
Result
{name:"first",num:32}
{name:"second",num:44}
======================*/

 

정리

위의 코드내용을 정리하면 아래의 내용으로 정리할 수 있다.

• 코드 내용을 작성하고 모듈화 할 코드의 내용들 앞에 export 키워드를 붙여, 해당 내용을 모듈화 할 수 있다.
• export default 구문을 사용하면, import문으로 불러올 때 중괄호 없이 사용할 수 있다.
  export default의 경우, 한 모듈에 한 번만 사용할 수 있다.
• 모듈화 한 내용들을 받아서 쓰려면 import { 모듈 심볼 } from '파일경로'의 형태로 작성하여 모듈을 사용할 수 있다.
• import 내용에 as 구문을 활용하여 alias를 지정하여 사용할 수 있다.

 

모듈화를 적절하게 잘 해놓으면, 코드의 가독성도 높아지고 유지보수에도 도움을 줄 수 있다. 그렇다고 해서 모듈화를 남발하여 필요 이상으로 자잘하게 쪼개 놓는다면, 코드 트래킹도 어려울 뿐더러 더 지저분한 코드가 될 수 있음에 유의하도록 하자.