이전에 “JavaScript 모듈 시스템”을 통해 소개했던 ESM(ES Modules)이 등장한 이후 주요 브라우저들은 점진적으로 ESM을 지원하기 시작했습니다. 그렇지만 웹 어플리케이션을 구성하는 JavaScript 코드가 ESM으로만 제공된다면 구버전 브라우저를 이용하는 상당수의 사용자는 사용할 수 없게 될텐데요. 이러한 배경에서 작성한 코드가 구버전 브라우저 호환성을 갖기 위해서는 등장한 것이 module/nomodule 패턴입니다.

module/nomodule 패턴의 module은 ESM을 의미하고, 반대로 nomodule은 ESM을 지원하지 않는 환경을 의미합니다. 두 키워드를 사용해서 두 환경을 구분하게 되는데요. script 태그의 속성을 통해 각 환경에서 실행되어야하는 코드를 나누어 주면되는 아주 간단한 구성을 갖습니다. ESM을 지원하는 브라우저에서만 실행되고자 하는 코드는 type=”module” 속성이 추가된 script 태그를 사용하고, ESM을 지원하지 않는 브라우저에서 실행되는 코드는 nomodule 속성을 추가한 script 태그를 사용하면 ESM을 지원하는 브라우저에서는 해당 script 태그를 실행하지 않기 때문에 구버전 브라우저에서 처리하고자 하는 작업을 수행할 수 있습니다.

<!-- ESM을 지원하는 브라우저에서만 실행되는 코드 -->
<script type="module">
  ...
</script>
 
<!-- ESM을 지원하지 않는 브라우저에서만 실행되는 코드 -->
<script nomodule>
  ...
</script>

Note

WHATWG 에서 설명하는 nomodule 속성

“nomodule 속성은 ESM를 지원하는 사용자 에이전트에서 스크립트가 실행되지 않도록 하는 부울 속성입니다. 이를 통해 최신 사용자 에이전트에서 모듈 스크립트를 선택적으로 실행하고 이전 사용자 에이전트에서 클래식 스크립트를 실행할 수 있습니다. nomodule 속성은 모듈 스크립트에 지정해서는 안 됩니다(지정한 경우 무시됩니다).”

최근 각광받고 있는 빌드 도구 vite는 import.meta 를 통해 HMR(Hot Module Reload)기능을 제공하는 등 ESM의 기능을 적극 활용하고 있습니다. 이러한 이유로 vite는 최소 브라우저 버전을 ESM을 지원하는 버전으로 설정하고 있는데요. ESM을 지원하지 않는 구형 브라우저를 위해 vite는 자체적으로 개발한 plugin-legacy 을 제공하고있습니다. plugin-legacy를 vite 설정에 추가한 다음 프로젝트를 빌드하면 구형 브라우저를 위한 코드가 module/nomodule 패턴을 통해 구성되는 것을 확인할 수 있습니다.

Note

plugin-legacy는 module/nomodule 패턴으로 ESM을 지원하지 않는 구버전 브라우저를 판단한 뒤, 내부적으로 SystemJS 를 사용하여 ESM을 사용할 수 있도록 도와줍니다.

지금까지 module/nomodule 패턴에 대해 알아보고 실제로 어떻게 활용되고 있는지 알아보았습니다.