document.currentScript

Published at 2025-06-12

TIL - document.currentScript

날짜: 2025년 6월 12일

document.currentScript

  • 현재 실행 중인 <script> 요소를 참조할 때 사용하는 브라우저의 DOM API

사용처

  • 위젯 스크립트
    • 다른 사이트에 embed할 수 있는 JS 위젯을 만들 때, 자기 자신의 script 태그에서 설정값을 읽는 방식 예시 <html> 
      <script src="widget.js" data-user-id="1234"></script>
      <js> 
      const currentScript = document.currentScript;
const userId = currentScript.dataset.userId;
console.log('User ID:', userId);
  • 동적 로딩
    • 자기 자신의 src 경로를 기준으로 다른 리소스 로드
  • 자기참조
    • 실행 중인 스크립트 파일의 위치를 알아내기

*주의할 점

  • 실행 중이 아닐 땐 null 반환
  • 모듈 스크립트 (type=“module”)에서는 import.meta.url을 쓰는 게 더 적합한 경우도 많음
    • type=“module” 스크립트는 기본적으로 비동기 실행이라, 브라우저가 <script> 태그를 파싱하고 실행은 따로하기 때문에 실행 시점에 document.currentScript는 이미 null일 수 있다.
  • 번들링 되어 실행되고 가상 DOM에서 실행되는 React에서는 사용하기 어렵다.