🏷️ 관련 기술 태그:#Svelte2HTML#SvelteParser#SvelteStripper#MarkupExtraction#ReactiveStripper#SvelteToStatic
📖

Svelte 컴포넌트 ↔ 정적 HTML 변환기 가이드

Svelte 컴포넌트 구조에서 Svelte 고유의 특수 스크립트, 반응형 바인딩 및 스타일 태그를 필터링하여 깨끗한 정적 HTML 마크업을 추출합니다.

✨ 주요 핵심 기능

  • •Svelte 컴포넌트 내부의 <script>와 <style> 영역을 안전하게 감지하고 삭제합니다.
  • •Svelte 변수 바인딩 중괄호 문법({expression})을 정적 HTML 주석 구조로 완화합니다.
  • •on:click, bind:value 등의 Svelte 전용 이벤트 및 바인딩 지시자를 정리합니다.
  • •가독성을 높인 W3C 호환 정적 HTML 코드로 변환 및 정렬하여 제공합니다.
  • •100% 클라이언트 연산으로 어떠한 네트워크 전송도 수행하지 않습니다.

🚀 빠른 사용 방법

  1. 1Svelte 컴포넌트 소스코드를 복사하여 좌측 소스 입력 창에 넣습니다.
  2. 2변환하기 버튼을 눌러 정적 HTML5 추출 알고리즘을 구동합니다.
  3. 3결과 영역에 포맷팅되어 출력된 정적 HTML 소스를 확인합니다.
  4. 4클립보드에 복사하거나 파일로 다운로드하여 소스코드에 배포합니다.
🔒100% 클라이언트 사이드 보안 아키텍처

스크립트 및 스타일 엘리먼트를 일차적으로 소거한 뒤, 중괄호로 래핑된 Svelte 바인딩 표현식을 `<!-- {expression} -->`과 같은 시각적 주석으로 치환하고, 반응형 문법들을 안전하게 거세하는 파싱 기술을 적용합니다.

💡실무 기술 가이드 & 자주 묻는 질문 (FAQ)

2 개 질문 & 답변 가이드

Q1.{#if} 이나 {#each} 같은 제어 블록은 어떻게 되나요?

Svelte의 특수한 조건문이나 반복문 제어 블록은 정적 마크업에 네이티브로 이식될 수 없으므로 무시되거나 지워지며, 경고 메시지를 통해 사용자에게 안내됩니다.

Q2.Svelte 5 Runes 문법도 필터링을 지원하나요?

네. Svelte 5의 $state()나 $derived() 등은 주로 script 영역에 작성되므로, script 블록 전체를 제거하는 과정에서 안전하게 일괄 제거되어 깨끗한 HTML 결과물을 출력합니다.