[JavaScript] 자바스크립트 실행 환경 설정

<script> 태그 브라우저에 삽입하기

인라인 스크립트

HTML 내부에 직접 코드 작성

<!DOCTYPE html>
<html>
<body>
  	<p>스크립트 실행 전</p>

  	<script>
		document.querySelector('div').textContent = 'Hello World';
  	</script>

  	<p>스크립트 실행 후</p>
	<div></div>
</body>
</html>

브라우저는 <script> 태그를 발견하면 즉시 코드를 실행합니다.
인라인 스크립트는 간단한 로직에만 사용하고, 복잡한 코드는 외부 파일로 분리합니다.

외부 스크립트

별도의 .js 파일을 로드하여 관리

<!DOCTYPE html>
<html>
<script src="app.js"></script>
<body>
</body>
</html>

//app.js
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM이 완전히 로드되었습니다.');
    document.body.style.backgroundColor = '#f0f0f0';
});

페이지 로딩 속도 향상 : 브라우저가 외부 파일을 캐시에 저장해 재사용
유지보수 향상 : 코드 분리로 효율성 증가

절대 경로와 상대 경로

// 절대 경로
<script src="https://a.coxx/a.js"></script>
// 상대 경로
<script src="./app.js"/</script>

스크립트 작성 가이드

불필요한 속성 생략

HTML4에서는 type과 language 속성이 필수였습니다.

<script type="text/javascript" language="javascript"></script>

하지만 현재 자바스크립트에서는 이런 속성은 불필요해서 생략합니다.

<script>
	// type/language 속성 생략 (기본값: text/javascript)
</script>

스크립트 로딩 전략

defer

스크립트를 비동기로 로드하고 DOM이 완전히 파싱된 후에 실행

<script src="script.js" defer>

async

스크립트를 병렬 비동기 로드하고 다운로드 즉시 실행

<script src="script.js" async>

스크립트 태그 주의사항

<script> 태그 동작 특성

src로 불러오는 태그 안에서 내부 코드 무시

// 잘못된 코드
<script src="script.js">
	console.log('이 코드는 무시됩니다.');
</script>

// 올바른 코드
<script src="script.js"></script>
<script>
	console.log('별도의 태그로 작성');
</script>

CDN 스크립트

외부 스크립트를 CDN 스크립트라고 하는데 이를 안전하게 로드할 수 있도록 Subresource Integrity (SRI)를 이용하여 안전을 보장해야 합니다. SRI는 리소스의 해시 값을 이용하여 리소스의 무결성을 검증합니다.

<script 
	src="https://example.com/script.js"
	integrity="sha384-ExampleHash"
	crossorigin="anonymous">
</script>

저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

[JavaScript] 자료형 (0)	2025.02.05
[JavaScript] 변수와 상수 (0)	2025.02.05
[JavaScript] 엄격 모드(Strict Mode) (0)	2025.02.05
[JavaScript] 자바스크립트 코드 구조 (0)	2025.02.05
[JavaScript] JavaScript란 무엇인가? (0)	2025.02.05