Javascript - 웹에서 script 태그 개념 설명 🚀

안녕하세요, 블로거입니다!
오늘은 웹 개발의 핵심 요소인 JavaScript <script> 태그에 대해 깊이 알아보겠습니다.

TL;DR (핵심 요약)

• <script> 태그는 HTML 문서에 JavaScript 코드를 삽입하거나 외부 스크립트 파일을 연결하는 기본 수단입니다.
• 다양한 속성(src, type, async, defer, integrity 등)을 통해 로딩 방식 제어와 보안 강화가 가능합니다.
• 외부 파일 연결 방식은 코드 재사용, 캐싱을 통한 성능 최적화, 유지보수성 향상에 도움이 됩니다.
• 최신 웹 개발에서는 async/defer 속성을 통한 비동기 로딩으로 페이지 렌더링 속도를 개선할 수 있습니다.

목차 📑

1. 개념 소개: <script> 태그란 무엇인가?
2. 왜 필요한가?: <script> 태그의 역할과 중요성
3. 기본 원리: <script> 태그의 주요 속성 이해하기
4. 실제 예제: 다양한 시나리오별 활용법
5. 주의사항 및 팁: 성능과 보안을 위한 모범 사례
6. 마치며
7. 참고 자료

1. 개념 소개 💬

<script> 태그란?

<script> 태그는 HTML 문서에 JavaScript 코드를 포함시키는 표준 방법입니다. 웹 페이지를 정적인 문서에서 동적인 애플리케이션으로 변화시키는 핵심 요소죠!

쉽게 생각해보세요. HTML은 건물의 구조, CSS는 건물의 디자인, 그리고 JavaScript는 건물의 기능을 담당합니다. <script> 태그는 이 기능을 HTML 문서에 연결하는 다리 역할을 하는 것입니다.

<script>
  // 여기에 JavaScript 코드를 작성합니다
  alert("안녕하세요!");
</script>

역사적 배경

<script> 태그는 1995년 Netscape Navigator 2.0에서 JavaScript가 처음 도입될 때 함께 등장했습니다. 초기에는 간단한 기능만 수행했지만, 웹의 발전과 함께 점점 더 강력하고 다양한 기능을 지원하게 되었습니다[^1].

2. 왜 필요한가?

<script> 태그는 다음과 같은 이유로 현대 웹 개발에서 필수적입니다:

1. 동적 콘텐츠 생성: 사용자 상호작용에 따라 페이지 내용을 동적으로 변경할 수 있습니다.

    document.getElementById("greeting").textContent = "안녕하세요, " + userName + "님!";

2. 사용자 입력 검증: 서버로 데이터를 보내기 전에 클라이언트 측에서 검증할 수 있습니다.

    if (email.indexOf("@") === -1) {
      alert("유효한 이메일 주소를 입력해주세요");
      return false;
    }

3. 비동기 데이터 처리: API와 통신하여 페이지 새로고침 없이 데이터를 가져올 수 있습니다.

    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data));

4. 복잡한 웹 애플리케이션 구현: SPA(Single Page Application)와 같은 현대적 웹 애플리케이션을 구축할 수 있습니다.

3. 기본 원리

3.1 <script> 태그의 기본 구문

가장 기본적인 <script> 태그는 다음과 같이 사용합니다:

<script>
  // JavaScript 코드
  console.log("이것은 인라인 스크립트입니다");
</script>

3.2 주요 속성

src 속성

외부 JavaScript 파일을 로드할 때 사용합니다:

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

src 속성에는 다음과 같은 값을 사용할 수 있습니다:

• 상대 경로: src="scripts/app.js"
• 절대 경로: src="/scripts/app.js"
• 전체 URL: src="https://cdn.example.com/scripts/app.js"

중요: src 속성이 있는 경우 태그 내부의 코드는 무시됩니다[^2].

type 속성

원래는 스크립트의 MIME 타입을 지정하는 데 사용되었습니다:

<script type="text/javascript">
  // JavaScript 코드
</script>

하지만 현대 HTML5에서는 JavaScript가 기본값이므로 일반적인 경우 생략합니다.

현대적 용도:

• ES 모듈 지정: type="module"
• 향후 사용을 위한 코드 블록: type="application/json", type="application/ld+json" 등

async와 defer 속성

이 두 속성은 스크립트 로딩과 실행 타이밍을 제어하는 데 중요합니다:

<!-- 비동기 로딩: 다운로드가 완료되는 즉시 실행 -->
<script src="analytics.js" async></script>

<!-- 지연 로딩: HTML 파싱 완료 후 실행 -->
<script src="app.js" defer></script>

각 속성의 동작 방식:

1. 기본 방식 (속성 없음):

   • HTML 파싱이 중단됨
   • 스크립트 다운로드 및 실행
   • 실행 완료 후 HTML 파싱 계속

2. async 방식:

   • HTML 파싱과 병렬로 스크립트 다운로드
   • 다운로드 완료 시 HTML 파싱 중단
   • 스크립트 실행 후 HTML 파싱 계속
   • 실행 순서 보장 없음

3. defer 방식:

   • HTML 파싱과 병렬로 스크립트 다운로드
   • HTML 파싱 완료 후 스크립트 실행
   • 문서 내 순서대로 실행

integrity와 crossorigin 속성

보안 강화를 위한 속성입니다:

<script 
  src="https://cdn.example.com/library.js" 
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" 
  crossorigin="anonymous">
</script>

• integrity: 브라우저가 로드된 스크립트의 해시값을 검증하여 변조 여부를 확인합니다.
• crossorigin: CORS(Cross-Origin Resource Sharing) 요청 시 자격 증명 정보 포함 여부를 지정합니다.

nomodule 속성

ES 모듈을 지원하지 않는 구형 브라우저를 위한 대체 스크립트를 제공합니다:

<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js"></script>

3.3 브라우저의 스크립트 처리 과정

브라우저가 HTML을 파싱하는 중 <script> 태그를 만나면:

1. HTML 파싱을 일시 중지합니다 (async나 defer 속성이 없는 경우).
2. 외부 스크립트인 경우 다운로드합니다.
3. JavaScript 코드를 실행합니다.
4. HTML 파싱을 재개합니다.

이 과정이 웹 페이지 로드 성능에 영향을 미치므로, 최적화가 중요합니다.

4. 실제 예제

4.1 기본 사용법

인라인 스크립트

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('greeting').textContent = '환영합니다!';
  });
</script>

외부 스크립트

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

4.2 실전 활용

비동기 및 지연 로딩

<!-- 중요하지만 DOM에 의존하지 않는 스크립트 -->
<script src="analytics.js" async></script>

<!-- DOM에 의존적인 중요 스크립트 -->
<script src="app.js" defer></script>

<!-- 레거시 브라우저 지원 -->
<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js"></script>

모듈 시스템 활용

<script type="module">
  import { initApp } from './modules/app.js';

  initApp();
</script>

보안 강화

<script 
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" 
  integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" 
  crossorigin="anonymous">
</script>

4.3 로딩 방식 비교

상황	일반적인 방법	최적화된 방법	개선효과
메인 애플리케이션 로직	<script src="app.js"> (body 끝)	<script src="app.js" defer> (head에 배치)	병렬 다운로드로 20-30% 로딩 시간 단축
분석 도구	<script src="analytics.js">	<script src="analytics.js" async>	페이지 렌더링 차단하지 않음
여러 의존성 스크립트	개별 script 태그들	번들러(Webpack) 활용	HTTP 요청 감소, 50% 이상 로딩 시간 단축

5. 주의사항 및 팁 💡

⚠️ 이것만은 주의하세요!

1. 스크립트 위치에 주의하세요

   • 전통적으로 </body> 직전에 배치하는 것이 권장되었습니다.
   • 현대적인 방법은 <head>에 defer 속성과 함께 배치하는 것입니다.
   • 잘못된 위치는 "Uncaught ReferenceError: X is not defined" 오류의 원인이 됩니다.

2. 전역 변수 오염을 방지하세요

   • 모든 인라인 스크립트 변수는 전역 스코프에 노출됩니다.

   • 즉시 실행 함수 표현식(IIFE)이나 모듈을 사용하여 변수를 캡슐화하세요.

     (function() {
     // 지역 스코프에 격리된 코드
     const privateVar = "외부에서 접근 불가";
     })();

3. src 속성 사용 시 주의사항

   • src 속성이 있는 경우 태그 내부 코드는 무시됩니다.
   • 외부 도메인의 스크립트는 보안 위험이 될 수 있으므로 신뢰할 수 있는 소스만 사용하세요.
   • integrity 속성을 사용하여 스크립트 무결성을 확인하세요.

💡 꿀팁

• 성능 최적화를 위해 스크립트를 결합하고 압축하세요

    <!-- 개발 중 -->
    <script src="app.js"></script>
    <script src="utils.js"></script>
  
    <!-- 프로덕션 -->
    <script src="bundle.min.js"></script>

• async와 defer를 적절히 사용하세요

  • async: DOM에 의존하지 않는 독립적인 스크립트(분석 도구, 광고 등)
  • defer: DOM과 상호작용하는 스크립트(애플리케이션 로직)

• 모듈 시스템을 활용하세요

  • ES 모듈(type="module")은 기본적으로 defer 속성처럼 작동합니다.
  • 코드 구조화와 의존성 관리가 용이합니다.

• 콘텐츠 보안 정책(CSP)을 설정하세요

    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://trusted-cdn.com">

6. 마치며

<script> 태그는 단순해 보이지만, 웹 개발에서 가장 중요한 요소 중 하나입니다. 이 글에서 설명한 속성과 기법들을 잘 활용하면 더 빠르고, 안전하고, 유지보수하기 쉬운 웹 애플리케이션을 구축할 수 있습니다.

처음에는 다양한 속성들이 복잡해 보일 수 있지만, 각 속성의 목적과 활용법을 이해하면 상황에 맞게 최적의 선택을 할 수 있을 것입니다. 특히 async와 defer 속성은 현대 웹 개발에서 필수적인 성능 최적화 도구이니 반드시 마스터하세요!

혹시 궁금한 점이 있으시거나, 더 알고 싶은 내용이 있으시면 댓글로 남겨주세요.

7. 참고 자료 🔖

• MDN Web Docs: script 요소[^3]
• JavaScript.info: 스크립트: async, defer[^4]
• 웹 성능 최적화를 위한 스크립트 로딩 전략[^5]
• HTML Living Standard: The script element[^6]

---

#기술블로그 #웹개발 #JavaScript #HTML #성능최적화