예제

엔진 예제 21종(layer1)과 컴포넌트 예제 7종(layer2)은 모두 빌드 없이 동작하고, 각 폴더의 README에 설명이 있습니다. 모든 예제가 CSP 메타 태그, 외부 스크립트, data-action/data-ref, vf.html, 토큰만 쓰는 CSS 규칙을 지키며, 저장소의 브라우저 테스트가 콘솔 에러·경고 0개와 핵심 동작을 확인합니다.

layer1/examples	보여 주는 것
01-hello	The smallest vfunc.js page: one <script> tag and one component. esm.html shows the same component as an ES module.	source
02-counter	Production: <script src="https://cdn.jsdelivr.net/npm/vfunc@1.2.0/dist/vfunc.min.js" integrity="sha384-yTR0o8US3nk+D1XIBAsv1O/lMFA5tV3V021xPo8yxyqnBNSxi1rqINVvBOykAEkK" crossorigin="anonymous"></script> · ESM: import vf from 'vfunc'	source
03-todo	모든 행을 이벤트 종류마다 위임 하나로 처리하고, 사용자 입력을 이스케이프합니다.	source
04-methods-refs	Production CDN and ESM lines: see [01 hello](../01-hello/README.md).	source
05-composition	Production CDN and ESM lines: see [01 hello](../01-hello/README.md).	source
06-attach-published-html	"Keep your HTML, control only what you need." The page is a publisher's static HTML. vfunc controls two areas and leaves everything else alone.	source
07-form	Production CDN and ESM lines: see [01 hello](../01-hello/README.md).	source
08-fetch-list	Production CDN and ESM lines: see [01 hello](../01-hello/README.md).	source
09-spa-hash-router	With npm: import vf from 'vfunc'. Script tag: see [01 hello](../01-hello/README.md).	source
10-spa-app	index.html <div id="app"> + <script type="module" src="app.js">	source
11-css-tokens-theme		source
12-with-bootstrap	기존 Bootstrap 마크업의 클래스는 그대로 두고 동작만 더합니다.	source
13-with-tailwind		source
14-before-after-conversion	AI 프롬프트 킷의 실제 적용 예입니다.	source
15-with-chartjs	네 가지로 어떤 라이브러리든 붙입니다.	source
16-legacy-ie	같은 엔진의 ES5 배포 파일입니다.	source
17-i18n		source
18-extend-plugin	vfunc를 고치지 않고 확장합니다.	source
19-design-apply	같은 앱, 스킨 세 개, JS 변경 0.	source
20-merge-published	로직은 그대로 두고 render 마크업만 퍼블리싱 마크업으로 바꾸며 기존 훅을 다시 답니다.	source
21-cache-update	앱 웹뷰, 키오스크, PWA, 인앱 브라우저는 스스로 새로고침하지 않습니다.	source

layer2/examples	보여 주는 것
custom-component	앱의 vsPriceTag(vsBadge + vf.fmt)와 vfCartLine(vfNumberInput + vsPriceTag)으로 만든 장바구니. 브랜드 색과 버튼 모양은 CSS에서만 바꿉니다.	source
dashboard	핵심 수치, 주문 그리드, 매출 차트. 스위치 하나로 기본 그리드·차트와 Tabulator·Chart.js 어댑터를 바꿉니다.	source
gallery	layer2의 모든 컴포넌트를 한 페이지에서 한국어·영어로 봅니다. 정적 vs 마크업, vf 인스턴스와 키보드 동작.	source
landing	HTML·CSS로 만든 소개 페이지에 카드, 수치, 캐러셀, FAQ 아코디언, 구독 폼만 컴포넌트로 넣습니다.	source
legacy-ie	vfunc-all.legacy.min.js 위의 ES5 지점 보고서: 수치 카드, 행을 누르면 vfModal이 뜨는 vfGrid, vfChart, 한국어·영어.	source
settings-form	폼 하나에 vs 필드, error prop으로 검증, 초기화 전 vfConfirm, 저장 뒤 vfToast, 한국어·영어.	source
third-party-custom	같은 Leaflet 지도를 L0(컴포넌트에서 직접), L1(앱 래퍼), L2(템플릿에서 만든 계약 어댑터)로 보입니다.	source

layer1의 12·13·15와 layer2의 dashboard·third-party-custom은 Bootstrap·Tailwind·Chart.js·Tabulator·Leaflet을 CDN에서 정확한 버전과 SRI로 불러옵니다(인터넷 필요).
layer1의 16과 layer2의 legacy-ie는 IE11·Edge IE 모드용입니다. Edge에서 IE 모드로 다시 열어 확인해 보세요. legacy-ie는 IE에서도 layer2 인스턴스를 쓰는 대시보드입니다.
layer1의 14는 퍼블리싱 대시보드를 AI 프롬프트로 변환한 결과이며, before/는 전달받은 원본 그대로입니다.
layer2의 custom-component는 공식 컴포넌트를 감싼 내 컴포넌트(확장 수준 C3)입니다.

저장소를 받아 직접 실행하려면 저장소 루트에서 python -m http.server 8080을 실행하고 http://localhost:8080/layer1/examples/와 http://localhost:8080/layer2/examples/를 여세요.