HTML Script 태그 type 속성이 필요한 이유?

Vanilla JavaScript로 처음 학습을 시작했을 때, 파일 간 의존성을 관리하기 위해 여러 개의 <script> 태그를 추가하거나, 별도의 번들러 도구를 사용하는 번거로움을 경험한 적이 있습니다. 이러한 문제는 ECMAScript 2015(ES6)에서 import와 export 구문이 도입되면서 크게 개선되었습니다. 브라우저가 ES6 모듈을 직접 지원하기 시작하면서, 이를 활성화하기 위해 HTML의 <script> 태그에 type="module" 속성이 등장했습니다. 이 속성은 브라우저에게 해당 스크립트가 모듈화된 코드임을 알려주며, 모듈의 독립적인 스코프와 종속성 관리를 가능하게 합니다. 덕분에 React와 같은 프레임워크를 포함한 모던 JavaScript 라이브러리들이 더 간편하게 모듈화되어 사용될 수 있게 되었습니다. 또한, 브라우저에서 번들링 없이도 모듈 기반 코드를 바로 실행할 수 있어 개발 환경 설정이 단순해졌습니다. 이 글에서는 type="module"을 사용하는 이유와 함께, <script> 태그에서 사용할 수 있는 다양한 type 속성들에 대해 간단히 정리하였습니다.

type="module" 사용 이유

type="module"을 사용하지 않으면 브라우저는 해당 파일을 일반 스크립트로 간주하여 ES6 문법인 import, export 문을 처리하지 못하고 에러를 발생시킵니다. 따라서 ES6 작성된 JavaScript파일을 html파일에 연결시키기위해 <script>태그에 type="module"속성이 필요합니다.

1. ES 모듈 사용

• type="module"은 브라우저에게 해당 스크립트가 ES6 모듈이라는 것을 알려줍니다. ES 모듈은 자바스크립트의 모듈화된 코드를 지원하며, 파일 간에 import와 export를 사용하여 종속성을 처리할 수 있습니다. 우리가 React 프로젝트에서 main.tsx 파일 내부에서 다른 모듈을 import하거나 export하려면 반드시 type="module"을 지정해야 합니다.

2. 모듈 스코프

• 모듈은 각 파일이 자체적인 스코프를 가지며 전역 스코프를 오염시키지 않습니다. type="module"로 지정된 스크립트는 자동으로 모듈화되어 다른 스크립트와의 충돌을 방지합니다.

3. ECMAScript 표준 준수

• 브라우저는 기본적으로 ES6 이전의 방식(즉, 전역 스코프를 사용하는 스크립트)을 사용합니다. 하지만 type="module"로 명시하면 최신 자바스크립트 표준을 따르며, 브라우저는 이를 모듈로 처리하게 됩니다.

4. 엄격 모드 적용

• 모든 ES 모듈은 기본적으로 use strict;가 적용됩니다.

5. 경로 해석 방식

• type="module"을 지정하면 브라우저는 상대 경로(./src/main.tsx)를 모듈 경로로 정확히 해석합니다. 반면, type 속성이 없으면 브라우저는 이를 일반 스크립트로 처리하며 모듈 경로를 제대로 인식하지 못할 수 있습니다.

<script type="module" src="app.js"></script>

---

 

가볍게 알아보는 <script> 태그 type 속성 종류

 

브라우저는 type의 종류를 보고 스크립트를 어떻게 처리해야 할지를 결정합니다.

1. module

• 설명: 스크립트를 ECMAScript 모듈(ESM)로 처리합니다.
• 용도: 최신 브라우저에서 import와 export를 사용하는 모듈 방식의 스크립트를 실행.
• 특징
  • 각 모듈은 고유한 스코프를 가집니다.
  • import와 export를 지원합니다.
  • HTML 문서에 자동으로 지연 로드(defer) 됩니다.

2. text/javascript

• 설명: 기본 자바스크립트 스크립트를 지정하는 값(현재는 기본값이므로 명시하지 않아도 됨).
• 용도: ES6 이전의 전통적인 자바스크립트 실행.
• 특징:
  • HTML 표준에서는 기본값으로 처리됩니다.

3. text/ecmascript

• 설명: ECMAScript의 초기 버전(ES3~5)을 실행하기 위해 사용되었으나, 현재는 거의 사용되지 않음.
• 용도: 과거의 특정 브라우저와의 호환성을 위한 경우.

4. application/javascript

• 설명: MIME 타입으로 자바스크립트를 실행. text/javascript와 거의 동일.
• 용도: 특별한 경우 외에는 사용되지 않음(대체로 type="text/javascript"와 동일하게 취급).

5. application/json

• 설명: JSON 데이터를 포함하는 스크립트를 정의.
• 용도: 자바스크립트 코드가 아닌 JSON 데이터를 포함할 때 사용.
• 특징:
  • 브라우저는 스크립트를 실행하지 않습니다.
  • JSON 데이터를 자바스크립트 코드에서 읽어들여 사용.

{
  "apiUrl": "<a href=https://api.example.com>https://api.example.com</a>",
  "timeout": 5000
}

6. application/ld+json

• 설명: JSON-LD(Linked Data) 데이터를 포함.
• 용도: 검색 엔진에서 구조화된 데이터를 읽을 수 있도록 제공.
• 특징:
  • 브라우저는 실행하지 않고, 구조화된 데이터로 인식.

{
   "@context": "<a href=https://schema.org>https://schema.org</a>",
   "@type": "Person",
   "name": "John Doe",
   "jobTitle": "Software Engineer"
}

7. text/plain

• 설명: 텍스트 데이터를 포함. 실행되지 않습니다.
• 용도: 브라우저에서 실행하지 않는 자바스크립트 코드나 데이터를 포함할 때.

<script type="text/plain">
console.log("Hello World");
</script>

8. text/babel 또는 application/babel

• 설명: Babel을 통해 트랜스파일링할 자바스크립트 코드를 포함.
• 용도: ES6+ 문법을 ES5로 변환하여 실행할 때.
• 특징:
  • 브라우저에서 실행하기 전에 Babel 트랜스파일러가 필요.

<script type="text/babel">
    const hello = () => console.log("Hello, ES6!");
</script>

9. type 속성을 생략한 경우

• 설명: 기본값은 text/javascript로 처리됩니다.
• 용도: 일반적인 자바스크립트 실행.

마무리

• 모던 웹 개발에서는 주로 type="module"을 사용하여 모듈화를 지원합니다.
• 데이터 처리를 위해 application/json 또는 application/ld+json과 같은 MIME 타입이 유용합니다.
• type 속성은 브라우저가 스크립트를 처리하는 방식을 제어하므로, 사용 목적에 맞게 적절히 지정해야 합니다.