HTML/태그/script 편집하기

{{틀:html_태그}}<br/>

==개요==
[[HTML]]의 <script> 태그는 웹 페이지에 스크립트를 삽입하는 데 사용되는 핵심 요소이다. 주로 [[자바스크립트]]를 사용하며, 웹 페이지에 동적 기능을 추가하고 사용자 상호작용을 구현하는 데 필수적이다. HTML5 이후 더욱 다양한 기능과 옵션을 제공하여 현대 웹 개발의 기반이 되고 있다.

==기본 문법==
===기본 구조===
<syntaxhighlight lang="HTML">
<script>
    // 자바스크립트 코드
</script>
</syntaxhighlight>

===타입 지정===
script 태그의 기본 type 속성은 "text/javascript"이다.<ref>HTML5 이전에는 반드시 타입 지정을 해야 했지만, HTML5에서는 기본값이 "text/javascript"가 되어 자바스크립트 사용 시 생략 가능하다.</ref>

<syntaxhighlight lang="HTML">
<script type="text/javascript">
    console.log("Hello, World!");
</script>
</syntaxhighlight>

==모듈 시스템==
===ES 모듈===
====기본 사용법====
ES6부터 도입된 모듈 시스템을 사용하려면 type="module" 속성을 지정해야 한다.

<syntaxhighlight lang="HTML">
<script type="module">
    import { someFunction } from './module.js';
    someFunction();
</script>
</syntaxhighlight>

===.mjs 확장자===
.mjs 확장자는 자바스크립트 모듈 파일임을 명시적으로 나타낸다.

<syntaxhighlight lang="HTML">
<!-- .mjs 파일 import -->
<script type="module" src="module.mjs"></script>
</syntaxhighlight>

====주요 특징====
* .mjs 파일은 자동으로 strict mode로 실행된다.
* 모듈 스코프를 가진다 (전역 스코프 오염 방지).
* import/export 구문을 사용할 수 있다.
* 비동기로 로드된다 (기본적으로 defer 속성과 같은 효과).

===모듈 import/export 예시===
<syntaxhighlight lang="JavaScript">
// module.mjs
export const add = (a, b) => a + b;
export default class Calculator {
    // 클래스 구현
}

// main.mjs
import Calculator, { add } from './module.mjs';
import * as utils from './utils.mjs';
</syntaxhighlight>

==타입스크립트 사용==
===기본 설정===
타입스크립트를 사용하기 위해서는 추가 설정이 필요하다.

====트랜스파일러 사용====
<syntaxhighlight lang="HTML">
<!-- tsc로 컴파일된 JS 파일 사용 -->
<script src="compiled.js"></script>

<!-- 또는 타입스크립트 컴파일러 직접 사용 -->
<script src="https://unpkg.com/typescript@latest/lib/typescriptServices.js"></script>
<script type="text/typescript">
    interface Person {
        name: string;
        age: number;
    }
    
    const person: Person = {
        name: "홍길동",
        age: 30
    };
</script>
</syntaxhighlight>

====개발 환경 설정====
* tsconfig.json 설정 필요
* 모듈 번들러(webpack, rollup 등) 설정
* 소스맵 생성 여부 결정

==스크립트 로딩 최적화==
===로딩 전략===
====async vs defer====
{| class="wikitable"
|+ 스크립트 로딩 속성 비교
|-
! 속성 !! 특징 !! 사용 시기
|-
| async || * HTML 파싱과 병렬로 로드<br/>* 로드 완료 즉시 실행<br/>* 실행 순서 보장 안 됨 || * 독립적인 스크립트<br/>* 다른 스크립트에 의존성 없는 경우
|-
| defer || * HTML 파싱과 병렬로 로드<br/>* DOM 생성 후 실행<br/>* 실행 순서 보장 || * DOM 조작이 필요한 스크립트<br/>* 실행 순서가 중요한 경우
|}

===동적 임포트===
필요한 시점에 스크립트를 로드할 수 있다.

<syntaxhighlight lang="JavaScript">
// 동적 임포트 예시
button.addEventListener('click', async () => {
    const module = await import('./feature.js');
    module.doSomething();
});
</syntaxhighlight>

==보안 고려사항==
===CSP(Content Security Policy)===
다양한 CSP 설정으로 스크립트 실행을 제어할 수 있다.

<syntaxhighlight lang="HTML">
<!-- 기본적인 CSP 설정 -->
<meta http-equiv="Content-Security-Policy" 
    content="script-src 'self' https://trusted-cdn.com">

<!-- nonce 사용 -->
<meta http-equiv="Content-Security-Policy" 
    content="script-src 'nonce-랜덤값'">
<script nonce="랜덤값">
    // 스크립트 코드
</script>
</syntaxhighlight>

===XSS 방지===
* innerHTML 대신 textContent 사용<ref>innerHTML은 HTML 코드를 직접 삽입할 수 있어 XSS 공격에 취약하므로, 단순히 텍스트를 삽입할 때는 textContent를 사용해야 한다.</ref>
* 사용자 입력 데이터 이스케이프 처리<ref>사용자로부터 입력받은 데이터는 신뢰할 수 없으므로, 이를 렌더링하기 전에 특수 문자를 적절히 이스케이프 처리해야 한다.</ref>
* [[eval 함수|eval()]] 사용 자제<ref>eval() 함수는 문자열을 코드로 실행하는 기능을 제공하지만, 이는 실행 환경에 따라 예상치 못한 취약점을 유발할 수 있으므로, 보안을 위해 사용을 금지해야 한다.자세한 내용은 해당 문서를 참고하자.</ref>

==최신 기능 활용==
===웹 워커===
별도의 스레드에서 스크립트를 실행할 수 있다.

<syntaxhighlight lang="HTML">
<script>
    const worker = new Worker('worker.js');
    worker.postMessage({data: 'some data'});
</script>
</syntaxhighlight>

===모듈 워커===
ES 모듈을 웹 워커에서 사용할 수 있다.

<syntaxhighlight lang="HTML">
<script>
    const worker = new Worker('worker.mjs', {
        type: 'module'
    });
</script>
</syntaxhighlight>

==브라우저 호환성==
{| class="wikitable"
|+ 주요 기능 브라우저 지원 현황
|-
! 기능 !! Chrome !! Firefox !! Safari !! Edge !! IE
|-
| ES Modules || 61+ || 60+ || 11+ || 16+ || 미지원
|-
| Dynamic Import || 63+ || 67+ || 11.1+ || 79+ || 미지원
|-
| Module Workers || 80+ || 68+ || 15+ || 80+ || 미지원
|-
| TypeScript || 지원(컴파일 필요) || 지원(컴파일 필요) || 지원(컴파일 필요) || 지원(컴파일 필요) || 부분 지원
|}

==디버깅 및 개발==
===소스맵 사용===
트랜스파일된 코드의 디버깅을 위해 소스맵을 활용할 수 있다.

<syntaxhighlight lang="HTML">
<script src="app.min.js"></script>
<!-- 소스맵 지정 -->
//# sourceMappingURL=app.min.js.map
</syntaxhighlight>

===개발 도구 활용===
브라우저 개발자 도구를 통해 브레이크포인트 설정이나 네트워크 요청 모니터링 등 디버깅이 가능하다.

== 기타 ==
[[깃허브]]나 [[가온 위키]] 등에서 사용하는 [[미디어위키]] 등 거의 대부분의 서비스나 [[Contents Management System|CMS]]에서는 보안상의 이유로 <code><nowiki><script></nowiki></code> 실행을 제한한다. 가령 깃허브는 <code><nowiki><script></nowiki></code> 부문을 제거한다. 이는 [[XSS]] 등의 보안을 위해 제한하는 것이다.

===src 속성과 내용이 동시에 있을 경우===
다음과 같은 코드가 있을 때:
<syntaxhighlight lang="HTML">
<script src="a.js">console.log("Hello world!")</script>
</syntaxhighlight>
`a.js` 파일만 로드되고, 내부의 `console.log("Hello world!")`는 무시된다.  
이는 HTML 명세서에 명시되어 있으며, `src` 속성이 존재하는 경우 태그 내부의 스크립트는 fallback 콘텐츠로 간주되며 **실행되지 않는다**.<ref>[HTML Living Standard - Script elements](https://html.spec.whatwg.org/multipage/scripting.html#the-script-element)</ref>

즉, `<script>` 태그에는 다음 두 형태 중 하나만 사용할 수 있다:
* 외부 스크립트만 로드: `<script src="..."></script>`
* 인라인 스크립트만 포함: `<script>...</script>`

동시에 사용할 경우, 브라우저는 **외부 스크립트만 처리하고 내부 내용은 무시**하므로 주의가 필요하다.

===HTML 명세서 상 script 태그의 주요 사항===
* `script` 요소는 문서 내 어디에나 위치할 수 있으나, 보통 `<head>` 또는 `<body>`의 끝부분에 위치한다.
* `src`, `type`, `async`, `defer`, `crossorigin`, `integrity`, `nomodule`, `nonce`, `referrerpolicy` 등 다양한 속성을 지원한다.
* `type` 속성이 없거나 `text/javascript`일 경우, 자바스크립트로 해석된다.
* `defer` 속성이 있으면 DOMContentLoaded 전에 스크립트가 실행된다.
* `async`는 로드된 시점에서 즉시 실행되므로, 실행 순서를 보장하지 않는다.
* `nomodule` 속성은 모듈을 지원하지 않는 브라우저에서만 실행된다.

<syntaxhighlight lang="HTML">
<!-- nomodule 예시 -->
<script nomodule src="legacy.js"></script>
</syntaxhighlight>

<syntaxhighlight lang="HTML">
<!-- defer 예시 -->
<script defer src="main.js"></script>
</syntaxhighlight>

<syntaxhighlight lang="HTML">
<!-- integrity + crossorigin 예시 -->
<script src="https://example.com/app.js"
        integrity="sha384-..."
        crossorigin="anonymous"></script>
</syntaxhighlight>

이러한 속성들을 적절히 사용하면 보안, 성능, 호환성을 개선할 수 있다.

==각주==
<references />

<!-- 분류 -->
[[분류:HTML]] [[분류:자바스크립트]]