프레임워크 없이 순수 자바스크립트로 끝내는 인라인 렌더링 꿀팁

요약 복잡한 템플릿 엔진이나 백엔드 프레임워크 없이 순수 HTML과 자바스크립트만으로 간단한 동적 콘텐츠를 렌더링하는 기법이 개발자 커뮤니티에서 관심을 모았습니다. 핵심은 브라우저 표준 속성인 `document.currentScript`를 활용하는 것입니다. 이 속성을 이용하면 현재 실행 중인 `<script>` 요소를 직접 참조할 수 있어, 별도의 태그 ID나 클래스 지정, 복잡한 querySelector 탐색 없이도 해당 스크립트 태그 자신을 원하는 값으로 즉시 교체(`replaceWith`)할 수 있습니다. 예를 들어 매년 바뀌는 카피라이트 연도를 표시할 때, 흔히 전역 ID를 붙여 나중에 자바스크립트로 DOM을 찾아 값을 밀어 넣는 방식을 씁니다. 하지만 이 기법을 사용하면 `<footer>© <script>document.currentScript.replaceWith(new Date().getFullYear())</script> MyCorp</footer>`처럼 마크업 내에서 즉각 자기 자신을 연도 텍스트로 치환할 수 있습니다. 여기에 `$=(...n)=>document.currentScript.replaceWith(...n)`와 같은 짧은 헬퍼 함수를 선언해두면 마치 템플릿 리터럴을 쓰는 것처럼 간결하게 인라인 코드를 작성할 수 있습니다. 글쓴이는 이를 활용해 방문할 때마다 달라지는 랜덤 인사말을 렌더링하거나, 텍스트를 글자 단위로 쪼개어 애니메이션 효과를 주는 용도, `<title>` 태그의 메타데이터를 본문 제목으로 재사용하는 용도 등 다양한 실전 예시를 공유했습니다. 나아가 부모 요소의 자식들을 직접 제어하는 패턴을 적용하면, 긴 블로그 글 중간에 들어가는 카운터 앱이나 대화형 일러스트레이션 같은 인터랙티브 컴포넌트를 외부 번들 없이 독립된 아일랜드 형태로 구성할 수 있다고 소개했습니다.