TypeScript에서 왜 import * as $ from '' 을 사용할까?

TypeScript에서 왜 import * as $ from '' 을 사용할까?

TypeScript로 개발을 해보면 import * as $ from ''을 많이 사용하는 것을 볼 수 있습니다.
보통 그냥 CommonJS를 ESModule 같이 보이게 하기 위해 사용한다.라고 간단하게만 알고 있으며 다른 import를 사용할 때 해당 구문을 이해하지 못하고 사용하고 있습니다.

👣 설명

Module은 왜 만들어졌을까요?

Module을 정의하면 다른 파일에서 호출하고 사용할 수 있는 파일의 코드 조각입니다.
이 Module은 큰 프로젝트에 매우 유용합니다.
프로젝트가 커지면 커질수록 여러 기능, 공통된 변수등을 쉽게 파악하기 어렵습니다. 이런 문제를 해결하기 위해 생겨난 것입니다. 즉, 코드 관리를 잘하기 위해 발생한 것입니다.

사실 많은 Module이 있지만 많이 사용되는 CommonJS, ESModule을 알아보도록 하겠습니다.

CommonJS

CommonJS를 제작한 의도는 다음과 같습니다.

The intention is that an application developer will be able to write an application using the CommonJS APIs and then run that application across different JavaScript interpreters and host environments.

조금 이해되기 쉽게 설명하면,

JavaScript를 모듈화 하기 위해 브라우저뿐만 아니라, 서버사이드, 데스크톱등 광범위한 애플리케이션에서 사용하기 위해 Common이라는 이름을 가지고 발생하였습니다.

그럼 CommonJS에서 export, import를 어떻게 사용하는지 보겠습니다.

CommonJS export

module.exports = ''
export = ''

CommonJS import

const $ = require('')
import $ = require('')
import * as $ from ''

ESModule(ECMAScript)

ES6(2015)에서 도입된 것으로 JS모듈이 작동한는 방식을 표준화하고자 만든 것입니다.
ESModule에서 export, import를 어떻게 사용하는지 알아보도록 하겠습니다.

ESModule export

export default ''

ESModule import

import $, {$} from ''

👣 결론

다음과 같이 각 Module당 export마다 import 짝이 있는 것을 알 수 있습니다.
그런데 서버리스 함수제작등 Node.js를 사용하게 되면 CommonJS를 기본으로 사용하기 때문에 섞어서 사용할 가능성이 커집니다.

그래서
CommonJS에서 import하는 것을 ESModule과 비슷하게 보이기 위해 import * as $ from ''를 사용한 것입니다.

또한, TypeScript의 tsconfig.json파일을 보면 esModuleInterop 옵션을 볼 수 있습니다.
이 기능은 import * as $ from ''의 부분을 완전 ESModule의 import $ from ''처럼 가져오기 위한 옵션입니다.

코드마다 다양한 Modul 시스템을 사용할 수 있으니 파일의 export, import를 잘 보고 파악하면 좋습니다. :) 

👣 REF

https://www.typescriptlang.org/docs/handbook/2/modules.html
https://d2.naver.com/helloworld/12864
https://blog.logrocket.com/commonjs-vs-es-modules-node-js/
https://www.commonjs.org/
https://michaelcurrin.github.io/dev-cheatsheets/cheatsheets/javascript/general/modules/es-modules.html