document.currentScript를 이용한 인라인 렌더링
요약
이 글은 JavaScript의 `document.currentScript` 속성을 활용하여 페이지 로드 시 자체적으로 대체되는 인라인 `<script>` 요소를 삽입하는 방법을 설명합니다. 이를 통해 간단한 템플릿 언어와 유사하게 동적인 콘텐츠를 구현할 수 있는 트릭을 소개하고 있습니다.
핵심 포인트
- document.currentScript 속성을 활용하여 스크립트 자체를 대체 가능
- 인라인 `<script>` 요소에 JavaScript 코드를 삽입하는 방법 제시
- 단축 함수 정의를 통해 간결한 템플릿 언어 구현 가능
document.currentScript를 이용한 인라인 렌더링. Lean Rada는 document.currentScript 속성을 활용하는 깔끔한 트릭을 설명합니다. 이를 사용하여 페이지 로드 시 자체적으로 대체되는 작은 인라인 <script> 요소를 삽입할 수 있습니다:
The year is <script>
document.currentScript.replaceWith(
new Date().getFullYear())</script>
만약 다음과 같이 단축 함수를 정의한다면:
$=(...n)=>document.currentScript.replaceWith(...n)
작은 템플릿 언어를 얻게 됩니다:
The year is <script>$(new Date().getFullYear())</script>
최근 기사
- Hello Python 3.15, goodbye 3.10, and now I can use 3.11 - 2026년 10월 12일
- A new feature for my blog, built using my voice - 2026년 10월 9일
- Claude Haiku 5.5 - 2026년 10월 7일
- We're going to need default hard budget caps on pretty much everything - 2026년 10월 3일
AI 자동 생성 콘텐츠
본 콘텐츠는 Simon Willison Blog의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기0