반응형
웹 개발에서 <script> 태그는 필수적인 요소로, 자바스크립트 코드를 HTML 문서에 추가할 때 사용됩니다. 이 글에서는 <script> 태그의 기본 사용법부터 모던 마크업 속성, 외부 스크립트 관리, 그리고 주의사항까지 초보자도 쉽게 이해할 수 있도록 설명합니다.
1. <script> 태그란 무엇인가요?
<script> 태그는 HTML 문서에 자바스크립트 코드를 삽입하는 데 사용됩니다. 브라우저는 이 태그를 만나면 내부의 자바스크립트 코드를 자동으로 실행합니다.
예제 코드:
<!DOCTYPE HTML>
<html>
<body>
<p>스크립트 전</p>
<script>
alert('Hello, world!');
</script>
<p>스크립트 후</p>
</body>
</html>위 코드에서 브라우저는 <script> 태그를 실행하며, "Hello, world!"라는 메시지를 경고창으로 띄웁니다.
2. <script> 태그 속성과 모던 마크업
type속성
- HTML4에서는 <script type="text/javascript">처럼 type 속성을 명시해야 했습니다.
- 현대 HTML 표준에서는 기본값이 자바스크립트이므로 생략 가능합니다.
- type 속성은 이제 자바스크립트 모듈을 명시하는 데 사용됩니다:
<script type="module">
import { myFunction } from './module.js';
myFunction();
</script>
참고 :
[Javascript] - 자바스크립트 모듈(type="module")
language 속성
- 예전에는 사용 언어를 나타내기 위해 <script language="JavaScript">처럼 사용했습니다.
- 현대에는 자바스크립트가 기본 언어로 지정되어 있어 더 이상 필요하지 않습니다.
오래된 코드에서의 주석 처리
과거 브라우저 호환성을 위해 <script> 태그 내부에 HTML 주석을 넣는 트릭을 사용했습니다:
<script type="text/javascript">
<!--
alert('Hello, world!');
//-->
</script>이 방법은 이제 더 이상 사용되지 않으며, 오래된 코드에서만 볼 수 있습니다.
3. 외부 스크립트 관리 방법
자바스크립트 코드가 길어질 경우, 별도의 파일로 저장해 관리하는 것이 좋습니다. 이렇게 하면 코드의 재사용성이 높아지고 브라우저 캐시를 활용해 성능을 최적화할 수 있습니다.
외부 스크립트 추가 방법
<script src="/path/to/script.js"></script>- src 속성에는 외부 스크립트 파일의 경로를 입력합니다.
- 경로는 상대 경로나 절대 경로, 또는 CDN URL을 사용할 수 있습니다.
예:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>다수의 스크립트 로드 방법
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>주의: <script> 태그에 src 속성이 있으면 태그 내부의 코드는 무시됩니다. 따라서 외부 스크립트를 사용하거나 내부 코드를 작성할지 선택해야 합니다.
성능 최적화 팁
- 캐시 활용: 스크립트를 외부 파일로 저장하면 브라우저는 이를 다운로드 후 캐시에 저장해 페이지 로드 속도를 향상시킵니다.
- 공유 사용: 여러 페이지에서 동일한 스크립트를 사용하면 트래픽이 절약됩니다.
4. <script> 태그의 최적 실행 위치
- <head> 태그 안: 초기 로드 전에 필요한 자바스크립트를 실행합니다. 페이지 로드 속도에 영향을 줄 수 있습니다.
- <body> 태그 끝: 페이지 콘텐츠를 먼저 로드한 후 자바스크립트를 실행합니다. 이 방식이 일반적으로 권장됩니다.
예:
<body>
...
<script src="script.js"></script>
</body>defer와 async 속성
- defer 속성: 스크립트를 비동기적으로 로드하면서 HTML 파싱이 완료된 후 실행합니다.
- async 속성: 스크립트를 비동기적으로 로드하며, HTML 파싱과 병렬로 실행됩니다.
<script src="script.js" defer></script>
<script src="script.js" async></script>속성실행 순서사용 시기
| defer | HTML 파싱 완료 후 | 기본적으로 권장 |
| async | 다운로드 후 즉시 실행 | 독립적인 스크립트 |
5. <script> 태그 사용 요약
- <script> 태그는 자바스크립트를 HTML에 삽입하는 기본 도구입니다.
- type과 language 속성은 현대 HTML에서는 더 이상 필수가 아닙니다.
- 외부 스크립트를 사용하면 코드 관리와 성능 최적화에 유리합니다.
- defer와 async 속성을 사용해 스크립트 로딩 방식을 제어할 수 있습니다.
6. 추가 학습 자료
반응형
'개발' 카테고리의 다른 글
| 가상 메모리란? (0) | 2025.01.22 |
|---|---|
| 스프링 프레임워크의 특징: 개발자가 알아야 할 핵심 포인트 (0) | 2025.01.21 |
| 자바스크립트 모듈(type="module") (0) | 2025.01.21 |
| 디바운싱(Debouncing)과 쓰로틀링(Throttling): 개념과 활용 방법 (0) | 2025.01.21 |
| 코테 연습 (0) | 2021.11.09 |