TypeScript 모듈 , 네임스페이스

김대현·2020년 5월 5일
1

TypeScript 이론 정리

목록 보기
5/5
post-thumbnail
post-custom-banner

TypeScript 모듈

모듈은 독립 가능한 기능의 단위이다. 프로그램은 여러 모듈로 구성돼 있고 모듈을 결합해 하나의 프로그램을 만든다. 모듈을 사용하면 다음과 같은 장점이 있다.

  • 유지보수의 용이성
  • 전역 스코프 오염을 방지
  • 재사용성 향상

모듈러 프로그래밍을 위한 접근

모듈러 프로그래밍은 프로그램의 설계 기술로 모듈의 분리와 모듈의 손쉬운 교체에 관심이 있다.

  • 모듈을 식별함
  • 모듈을 분리해 선언함
  • 모듈을 외부로 공개함
  1. 모듈러 프로그래밍의 첫 번째 과정은 모듈을 식별하는 것이다. 모듈의 식별은 프로젝트 설계와 분석만으로는 어렵다. 공통 기능이 무엇인지는 실제로 구현하는 과정에서 식별될 가능성이 크다.

  2. 두번째 과정은 모듈을 분리하는 것이다. 함수 내부에서 발견되는 공통기능은 모듈을 분리할 수 있다. 모듈로 공통 기능을 분리하면 중복 코드가 줄어들고 각 함수의 역할이 더욱 분명해진다. 또한 모듈 단위로 테스트가 쉬워지므로 에러가 발생할 확률도 줄어든다.

  3. 세번째 과정은 모듈을 외부로 공개하는 것이다. 모듈을 외부로 공개함으로써 프로젝트 내에 존재하는 특정 파일에서 호출해 사용할 수 있게 된다. 모듈을 호출하려면 모듈이 노출(export)되도록 선언해야 한다.

내부 모듈과 외부 모듈

  1. 내부모듈 : 네임스페이스를 의미
  2. 외부모듈 : export라고 선언해 외부로 공개된 모듈을 말한다.

내부 모듈

내부 모듈인 네임스페이스는 전역 이름 공간과 분리된 네임스페이스 단위의 이름 공간이다. 따라서 같은 네임스페이스의 이름 공간이라면 파일 B가 파일 A에 선언된 모듈을 참조(reference)할 수 있는데 참조할 때는 별도의 참조문을 선언하지 않아도 된다.

기억할 점은 파일이 다르더라도 프로젝트 내에서 같은 네임스페이스 내에서는 이름을 중복해 클래스, 함수, 변수 등을 선언하면 안된다. 반대로 네임스페이스가 다르면 이름이 같아도 이름 충돌이 없다.

외부 모듈

흔히 말하는 모듈은 외부 모듈을 가리킨다. export 키워드를 이용해 외부 모듈로 선언할 수 있는 대상은 변수, 함수, 클래스 심지어 네임스페이스도 가능하다. 외부 모듈의 이름 공간은 파일 내부로 제한되는 특징이 있다.

타입스크립트는 module 옵션을 통해 다른 모듈 형식으로 변환할 수 있도록 지원한다.

export class MyCar { ... }
import { MyCar } from './my-car';

모듈 변환을 위한 명령어는 다음 형태와 같다.
[형식]
tsc --module <모듈 형식> <변환할 파일명>

$ tsc --module commonjs main.ts

위 명령어를 입력하면 main.ts 파일을 commonjs 모듈 형식으로 컴파일하고 파일(main.js)을 생성한다. module 옵션에서 사용할 수 있는 모듈 형식에는 다음과 같은 것들이 있다.

  • commonjs
  • amd
  • system
  • umd
  • es2015 or es6

네임스페이스

네임스페이스는 하나의 독립된 이름 공간을 만들고 여러 파일에 걸쳐 하나의 이름 공간을 공유할 수 있다. 네임스페이스는 namespace 키워드를 이용해 다음처럼 선언한다.

namespace Hello { ... }

네임스페이스와 똑같은 역할을 하는 키워드로는 module이 있다. namespace와 module은 키워드는 다르지만, 역할과 기능상 차이가 없다. 네임스페이스는 보통 여러 파일에 걸쳐 하나의 이름 공간을 공유한다.

프로젝트 규모가 커지면 파일 단위로 모듈을 분할해야 한다. 이때 네임스페이스를 이용하면 여러 파일에 걸쳐 하나의 네임스페이스의 이름 공간을 공유할 수 있다.
타입스크립트는 네임스페이스를 이용해 논리적 그룹화를 제공한다. 논리적 그룹화는 네임스페이스의 이름만 같다면 컴파일 시에 하나의 논리적 영역으로 묶어 컴파일 할 수 있게 한다.

tsc 명령어는 프로젝트에 속한 모든 *.ts파일을 대상으로 프로젝트 단위 컴파일을 수행하므로 네임스페이스를 명시적으로 참조하지 않아도 된다.

네임스페이스 모듈

profile
FrontEnd Developer with React, TypeScript
post-custom-banner

0개의 댓글