자주 묻는 질문
vfunc.js로 React나 Vue를 대체할 수 있나요?
대부분의 업무 화면, 퍼블리싱 페이지에 동작 붙이기, 사내 시스템, 작은 SPA에는 충분합니다. 반대로 수천 행을 자주 갱신하는 화면, 큰 팀의 대규모 앱, 풍부한 생태계가 필요한 경우에는 React·Vue가 더 맞을 수 있습니다. 비교를 참고하세요.
한계는 무엇인가요?
- 큰 목록: 컴포넌트의 render는 안쪽을 통째로 교체합니다(keyed diff 없음). 행이 많고 몇 행만 자주 바뀌는 목록은 공식 플러그인
vf.ext.list로 바뀐 행만 그리세요(1.1.0부터). 바뀌지 않는 영역은data-vf-keep으로 유지합니다. 내장vfGrid는 긴 데이터를 스크롤 대신 페이지로 나누고, 가상 스크롤이 필요하면 그리드 어댑터(vfGridAg,vfGridTabulator)를 씁니다. 수치는 아래 측정을 보세요. - 포커스와 커서: 다시 그린 뒤 같은
id·data-ref·name의 요소로, 없으면 같은data-action의 같은 순서 요소로 포커스와 커서를 복원합니다. 스크롤 위치는 복원하지 않습니다. 입력 중에는 매 키마다 다시 그리지 마세요. - 표의 행:
<tr>을 그리는 컴포넌트는tag: 'table'을 써야 합니다. - 생태계: 컴포넌트 라이브러리와 개발 도구가 아직 적습니다. 서드파티 라이브러리는
onMount+data-vf-keep으로 직접 붙일 수 있습니다.
큰 목록은 얼마나 느린가요?
js-framework-benchmark와 같은 조작을 네 방식으로 재 본 결과입니다. 단순형은 컴포넌트 하나가 화면 전체를 다시 그리고, 권장형은 킷의 안내대로 <tbody>만 다시 그리며 행 선택은 render 없이 속성만 바꿉니다. vfList는 권장형에 공식 list 플러그인을 더해 바뀐 행만 그리고 옮깁니다. vanilla는 바뀐 행만 건드리는 손으로 쓴 코드입니다. 수치는 클릭부터 렌더 뒤 스타일·레이아웃이 끝날 때까지의 시간이고, 괄호 안은 vanilla 대비 배수입니다.
chromium 153.0.8010.12 · Windows_NT 10.0.26200 (win32), Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz, vfunc 1.1.0, 1000행 기준, 예열 5회 + 측정 10회의 중앙값(ms)
| 조작(ms) | vfunc 단순형 | vfunc 권장형 | vfunc + vfList | vanilla |
|---|---|---|---|---|
| 행 만들기 | 51.8 (1.1×) | 56.6 (1.2×) | 51.9 (1.1×) | 45.8 |
| 많은 행 만들기 | 533.6 (0.9×) | 692.0 (1.2×) | 605.6 (1.1×) | 570.2 |
| 행 덧붙이기 | 124.8 (2.3×) | 109.1 (2.0×) | 70.6 (1.3×) | 54.0 |
| 일부 갱신 | 53.8 (3.0×) | 56.2 (3.1×) | 25.3 (1.4×) | 18.0 |
| 행 선택 | 53.1 (265.5×) | 0.3 (1.5×) | 5.3 (26.5×) | 0.2 |
| 행 교환 | 56.1 (9.7×) | 54.6 (9.4×) | 6.9 (1.2×) | 5.8 |
| 행 삭제 | 52.8 (9.1×) | 55.9 (9.6×) | 6.7 (1.2×) | 5.8 |
| 모두 지우기 | 6.7 (1.1×) | 6.0 (1.0×) | 5.8 (0.9×) | 6.2 |
| 시작 | 68.2 | 79.0 | 82.2 | 69.6 |
| 메모리(행 만든 뒤) | 1.3 MB | 1.3 MB | 1.4 MB | 1.4 MB |
| 스크립트 크기(gzip) | 10.39 KB | 10.52 KB | 12.20 KB | 1.26 KB |
- 행을 만들거나 모두 지우는 조작은 네 방식 모두 vanilla와 큰 차이가 없습니다.
- 몇 행만 바뀌는 조작(일부 갱신, 교환, 삭제)은 render로 그리면 목록 전체를 다시 그려 몇 배에서 수십 배 느립니다. keyed diff가 없는 비용입니다. vfList를 쓰면 세 엔진 모두 vanilla의 1.5배 이내로 줄어듭니다.
- 속성만 바뀌는 조작(선택, 펼침)은 행을 다시 그리지 말고 속성을 바꾸세요(권장형). 행 요소를 바꾸면 표 전체의 레이아웃을 다시 계산합니다.
- 수치는 기계와 브라우저에 따라 다릅니다. 측정 방법과 직접 돌리는 법은 저장소의
layer1/bench/README.md에 있습니다. 다른 프레임워크와의 비교는 js-framework-benchmark 결과를 보세요.
서버 렌더링이나 SEO는요?
vfunc는 이미 있는 HTML을 그대로 쓰는 것을 전제로 합니다. 서버(또는 정적 파일)가 HTML을 만들고 vfunc가 동작만 붙이면 검색 엔진은 그 HTML을 읽습니다. 이 사이트도 그렇게 만들었습니다.
보안은 어떻게 보장하나요?
vf.html이 위치별로 이스케이프하고, 위험한 위치의 보간은 막습니다.javascript:주소도 막습니다.opts와vf.el은innerHTML과 문자열 핸들러를 거부합니다.setState와 병합은__proto__같은 위험 키를 무시합니다.- 권한은 서버에서 검사해야 합니다. 클라이언트 코드는 우회할 수 있습니다.
보안 문제를 발견하면 공개 이슈 대신 저장소의 SECURITY.md 안내를 따라 알려 주세요.
TypeScript를 쓸 수 있나요?
타입 선언(types/vfunc.d.ts)이 패키지에 들어 있습니다. 빌드 없이 쓰는 스크립트에서도 // @ts-check와 types/global.d.ts 참조로 에디터 타입 검사를 받을 수 있습니다.
어떤 브라우저를 지원하나요?
| 빌드 | 브라우저 |
|---|---|
vfunc.min.js, ESM | Chrome, Edge, Firefox, Safari 최신 버전(데스크톱·모바일) |
vfunc.legacy.min.js | Internet Explorer 11, Edge IE 모드 |
예제, 스타터, 이 사이트는 변경할 때마다 Chromium, Firefox, WebKit에서 자동으로 테스트합니다.
IE11을 지원하나요?
vfunc.legacy.min.js가 IE11과 Edge IE 모드에서 동작합니다. 앱 코드도 ES5로 써야 합니다. 확장, 플러그인, IE를 보세요.
라이선스는요?
Apache-2.0입니다. 배포 파일에는 서드파티 코드가 들어 있지 않고, 쓰는 도구와 예제의 라이브러리는 라이선스에 모두 적었습니다.