You don't know JS module
자바스크립트 개발을 하다 보면 다양한 모듈 정의 방법을 마주치게 된다. ES 모듈, CommonJS 모듈, AMD 모듈 등 자바스크립트에는 다양한 모듈 시스템이 공존하는데, 각 모듈은 모두 다른 방식으로 모듈을 정의하며 객체를 내보내고 가져오도록 설계되어있다. 그러나 React, Vue 등의 프레임워크로 애플리케이션을 개발해 본 독자라면, 모듈을 가져올 때 이러한 다양한 모듈 포멧을 신경쓰면서 사용해 본 기억이 없을 것이다. 그동안 번들러를 사용해서 ES6 환경으로 개발을 할 때 CommonJS 모듈을 ES6의 'import' 문법으로 가져오더라도 에러가 발생하지 않는 게 의심스럽지는 않았는가? ES 모듈의 'import ~ from ~;' 문법을 통해서 가져와도 잘 동작하니까 "그냥" 사용하지는 않았는가? 이제 슬슬 마음속에 "번들러나 타입스크립트 컴파일러 안에서 도대체 무슨 일이 일어나고 있는 걸까?"라는 질문이 떠오르길 바란다. 그렇다면 이 글을 통해 ES 모듈에만 있는 방법인 default import(이하 기본값 가져오기)를 이용해서 다른 방식의 모듈을 가져와 사용할 수 있는 이유, 그리고 번들러와 트랜스파일러 그리고 타입스크립트는 어떤 방법으로 서로 다른 모듈끼리 가져오기를 지원하는지 알아보도록 하자.
