importmap - type attribute 타입속성

JavaScript에서 type은 <script> 태그에 사용되어 스크립트의 MIME 타입을 정의하거나, 다양한 스크립트 유형을 지정하는 속성입니다. 일반적으로 <script> 태그에서 자주 사용하는 type 속성의 값과 그 용도는 다음과 같습니다.

type="text/javascript" (기본값)

• HTML5에서는 기본값이라 생략할 수 있지만, 구식 표준에서는 명시적으로 지정했습니다. JavaScript 코드를 실행하는 데 사용됩니다.

type="module"

• ECMAScript 모듈을 사용하여 모듈화된 JavaScript 코드를 실행합니다.
• 다른 JavaScript 파일을 import할 수 있고, 스코프가 파일별로 구분됩니다.
• 자동으로 strict 모드로 실행되며, defer 속성이 암시적으로 적용됩니다.

type="application/json"

• JSON 데이터를 <script> 태그 안에 포함할 때 사용합니다. 이 경우 브라우저는 JSON 데이터를 실행하지 않고 DOM에 있는 그대로 남겨둡니다.

type="application/ld+json"

• JSON-LD 형식으로 구조화된 데이터를 포함할 때 사용합니다. 주로 검색 엔진 최적화(SEO)를 위해 웹 페이지의 메타 데이터를 검색 엔진에 제공하는 데 사용됩니다.

type="importmap"

• JavaScript 모듈을 로드할 때, 특정 경로를 별칭으로 매핑하는 데 사용됩니다. 아래의 예에서, 경로를 three, lodash, moment 등으로 간단히 처리 하였음
• import map에서 절대 경로를 사용하여 외부 서버나 CDN(Content Delivery Network)에서 제공하는 라이브러리를 직접 로드할 수 있습니다. CDN 경로는 절대 경로로 제공되며, 이를 통해 라이브러리를 빠르게 로드할 수 있습니다.
• 2023년 3월이후, 이 기능은 최신의 기기 및 브라우저에서 작동되고 있습니다. 오래된 기기나 브라우저에서는 작동 안할 수도 있습니다.

   // index.html
   <script type="importmap">
      {
       "imports": {
		  "three": "https://cdn.jsdelivr.net/npm/three@0.161/build/three.module.js",
          "jsm/": "https://cdn.jsdelivr.net/npm/three@0.161/examples/jsm/"
        }
      }
    </script>
    <script type="module" src="/main.js"></script>
    
    // main.js
    import * as THREE from "three";
    import { OrbitControls } from 'jsm/controls/OrbitControls.js';

또는 

<script type="importmap">
{
  "imports": {
    "lodash": "/js/lodash.min.js",
    "moment": "/js/moment.min.js"
  }
}
</script>

<script type="module">
import _ from 'lodash';
import moment from 'moment';

console.log(_.isEmpty([])); // true
console.log(moment().format('MMMM Do YYYY, h:mm:ss a')); // 현재 날짜/시간 출력
</script>