타입스크립트 | 모듈 이란?, 모듈 모맷, import와 export

모듈 이란?

타입 스크립트의 모듈을 이용하면 코드를 잘 정리하고 재사용 가능한 코드 작성에 도움을 줍니다. 모듈은 기능 단위 혹은 교환 가능한 구성의 코드의 집합을 의미합니다.

앱에 모듈성을 도입하는 기술은 TypeScript에서 시간이 지남에 따라 발전해 왔습니다. TypeScript의 초기 버전에서는 모듈식 코드 개발을 이용하기 위해 네임스페이스를 이용해 왔습니다. 이제는 공식 TypeScript 문서는 네임스페이스 사용을 금지하고 대신 개발자가 ES 2015 모듈을 사용하는 권하고 있습니다.

자바스크립트의 ES2015 버전은 모듈에 대한 네이티브 지원을 추가했습니다. 그리고 모듈 구문과 모듈 컴파일러 플래그를 사용하여 모든 최신 브라우저와 Node.js용 앱을 만들 수 있습니다.

TypeScript 앱에서 모듈을 사용하는 가장 큰 이유는 모듈식으로 코드를 작성한다는 점입니다.  우리 개발자들은 항상 더 많은 모듈화를 추구해야 합니다. 왜냐하면 모듈로 코드를 작성하게 되면 코드의 유지보수가 쉬워지고 재사용이 용이해지기 때문입니다.

---

모듈 포맷(Module Formats)

TypeScript에서 코드를 작성할 때 ES 2015 모듈 구문을 사용합니다. 그러나 코드가 다른 모듈 형식을 필요로 하는 환경에서 실행될 경우 모듈 컴파일러 플래그를 사용하여 컴파일러 출력 코드를 해당 형식으로 만들 수 있습니다. 어떠한 포맷이 있는지 살펴보겠습니다.

 

 

1. CommonJS

Node는 CommonJS 모듈 형식을 사용합니다. 위 설정 화면에서는 tsconfig.json 파일 내에서 모듈 컴파일 플래그를 CommonJS로 설정하고 있습니다. 이와 같이 ES 2015 모듈을 아직 지원하지 않는 오래된 브라우저를 대상으로 하는 경우 TypeScript 컴파일러가 다른 형식을 출력하도록 설정할 수 있습니다.

2. AMD(Asynchronous Module Definition)

일반적으로 AMD로 약칭되는 비동기 모듈 정의 포멧은 브라우저 앱에서 인기가 있습니다. 이 형식은 필수 JS 모듈 로더와 함께 자주 사용됩니다.

3. Universal Module Definition(UMD)

TypeScript는 UMD 형식으로 출력할 수도 있습니다. 이 포맷은 CommonJS와 AMD 형식을 결합합니다. UMD 포맷으로 생성된 자바스크립트는 AMD 포맷을 지원하는 로더에서 모두 로드할 수 있습니다.

4. System

SystemJS는 시스템 포맷을 지원하는 인기 있는 모듈 로더입니다.

5. ES2015, ES2020 등

당연하게 느껴질지도 있지만 타입스크립트는 모든 최신 Javascript 모듈 포맷도 지원합니다.

 

여기서 기억할 것은 이러한 포맷들은 코드를 작성하고 빌드를 통해서 TypeScript 컴파일러가 변경해주는 자바스크립트 모듈 포맷이라는 점입니다. 실제로 코드에서 TypeScript 모듈의 작성은 TypeScript에서 채택한 ES2015 구문을 사용하게 됩니다. 이제 어떻게 모듈을 작성하고 사용하지 알아보도록 하겠습니다.

---

모듈 내보내기( Module Export)

아래에 Person.ts라는 파일의 코드가 있습니다.

이 파일을 모듈로 만들기 위해 해야 할 일은 파일에서 무언가를 export 하는 것뿐입니다. 모듈의 항목은 현재 모듈에서 export 한 경우에만 다른 모듈에서 사용할 수 있습니다. 위 예에서는 export선언을 사용하여 인터페이스, 클래스 및 함수를 내보내고 있습니다.  export 선언은 모듈에서 내보내는 가장 간단한 방법입니다. 클래스나 인터페이스 선언문 앞에 export 키워드를 추가하기만 하면 됩니다.

 

모듈에서 항목을 내보내는 또 다른 방법은 export 문(statement)을 사용하는 것입니다.

위 예에서 export 문을 사용하여 모두 내보내고 있습니다. 그리고 인터페이스, 클래스 및 함수 앞에있는 export 키워드를 제거했습니다. export 키워드를 쓰고 중괄호 안에 내보낼 목록을 추가하기만 하면 됩니다. 이러한 방식은 export 할 항목이 여러 개 있을 때 편리합니다. 파일 전체를 읽어서 파악할 필요 없이 파일 끝으로 이동해서 어떤 항목을 export 하고 있는지 파악하기 편리합니다.

export 문을 사용하는 또 다른 이점은 as를 사용해서 다른 이름으로 내보낼 수 있다는 것입니다. GetName 이제 다른 모듈에서 사용할 때 GetPersonName으로 사용되어집니다.

---

모듈 가져오기 (Module import)

위에서 만든 모듈을 다른 파일에서 가져와서 사용해 보겠습니다.

위 코드는 mtest.ts파일에서 작성한 코드입니다.  import 키워드 다음에 중괄호를 하고 import 하고 은 목록을 입력해서 person모듈에서 항목을 현재 파일로 가져올 수 있습니다. 모듈이 export 하고 있는 모든 것을 가져올 필요는 없습니다. person 모듈에서는 Person이라는 인터페이스도 포함되어 있지만 필요하지 않으므로 import에서 추가하지 않았습니다. 가져올 때 as 키워드를 사용하면 특정 항목을 참조하는 데 사용하는 이름을 변경할 수 있습니다. 위 예에서는 GetPersonName을 GetActorName으로 참조하여 사용하게 됩니다.  import문의 마지막 부분은 from을 적어주고 모듈을 찾을 위치를 지정합니다. from 뒤에는 소스 코드에 대한 상대 경로를 적어주면 됩니다.

 

모듈을 import 할 때 사용할 수 있는 또 다른 방법은 전체 모듈을 가져와서 하나의 이름으로 지정하는 것입니다.

mtest2.ts 파일에서는 person의 전체 모듈을 가져오고 있습니다. 전체 모듈을 가져오는 방법은 import 뒤에 별표 문자를 입력한 후 as뒤에 이름을 지정하는 것입니다.  위 예에서는 person 모듈을 전부 가져오고 별칭으로 P를 지정해 주었습니다. 이렇게 한 후 개별 함목을 부여한 별칭인 P로 접근하여 사용할 수 있습니다.