petite-vue - GitLite

KO | EN

gitlite — search

#javascript #python #react #go #machine-learning #linux #macos #nodejs #windows #cli #vue #awesome-list #pytorch #mcp

petite-vue

(★ 9,696)

점진적 향상(progressive enhancement)에 최적화된 6kb 크기의 Vue 서브셋

파일 탐색기

최종 버전 다운로드 (.zip)

- commits.html
- grid.html
- markdown.html
- svg.html
- todomvc.html
- tree.html
- release.js
- - bind.ts
  - effect.ts
  - for.ts
  - html.ts
  - if.ts
  - index.ts
  - model.ts
  - on.ts
  - ref.ts
  - show.ts
  - text.ts
- app.ts
- block.ts
- context.ts
- eval.ts
- index.ts
- scheduler.ts
- utils.ts
- walk.ts
- bind.html
- cloak.html
- component.html
- custom-delimiters.html
- effect.html
- for.html
- html.html
- if.html
- model.html
- multi-mount.html
- on.html
- once.html
- pre.html
- reactive.html
- ref.html
- scope.html
- show.html
- text.html
.gitignore
CHANGELOG.md
index.html
LICENSE
package.json
pnpm-lock.yaml
README.md
tsconfig.json
vite.config.ts

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/vuejs/petite-vue

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd petite-vue

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# petite-vue
`petite-vue`는 [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive\_Enhancement)에 최적화된 [Vue](https://vuejs.org)의 대안 배포판입니다. 표준 Vue와 동일한 템플릿 구문 및 반응형 멘탈 모델을 제공합니다. 하지만 서버 프레임워크로 렌더링된 기존 HTML 페이지에 적은 양의 상호작용을 "가미(sprinkling)"하는 데 특화되어 있습니다. [표준 Vue와의 차이점](#comparison-with-standard-vue)에서 더 자세한 내용을 확인하세요.
- 단 ~6kb
- Vue 호환 템플릿 구문
- DOM 기반, 제자리(in place) 변형
- `@vue/reactivity` 구동
## Status
- 이 프로젝트는 매우 새롭습니다. 버그가 있을 수 있으며 API가 변경될 수도 있으므로 \*\*사용에 따른 책임은 본인에게 있습니다.\*\* 하지만 쓸 만한가요? 매우 그렇습니다. [예제](https://github.com/vuejs/petite-vue/tree/main/examples)를 통해 무엇을 할 수 있는지 확인해 보세요.
- 지금은 더 중요하게 집중해야 할 일들이 있고 산만해지는 것을 원하지 않기 때문에 이슈 목록은 의도적으로 비활성화되어 있습니다. 버그를 발견한 경우, 우회 방법을 찾거나 직접 PR을 제출하여 수정해야 합니다. 그렇기는 하지만, Discussions 탭을 자유롭게 사용하여 서로 도우시기 바랍니다.
- 기능 요청은 현재로서는 수락될 가능성이 낮습니다. 이 프로젝트의 범위는 의도적으로 최소한으로 유지되기 때문입니다.
## Usage
`petite-vue`는 빌드 단계 없이 사용할 수 있습니다. 단순히 CDN에서 불러오기만 하면 됩니다:
```html

{{ count }}
inc

```
- 페이지에서 `petite-vue`가 제어해야 하는 영역을 표시하려면 `v-scope`를 사용하세요.
- `defer` 속성은 HTML 콘텐츠가 파싱된 후 스크립트가 실행되도록 합니다.
- `init` 속성은 `petite-vue`에게 페이지에서 `v-scope`를 가진 모든 요소를 자동으로 쿼리하고 초기화하도록 지시합니다.
### Manual Init
자동 초기화를 원하지 않는 경우, `init` 속성을 제거하고 스크립트를 ``의 끝으로 이동하세요:
```html
```
또는 ES 모듈 빌드를 사용하세요:
```html
```
### Production CDN URLs
짧은 CDN URL은 프로토타이핑용입니다. 프로덕션 환경에서 사용할 때는 리졸브 및 리다이렉트 비용을 방지하기 위해 완전히 해결된(resolved) CDN URL을 사용하세요:
- Global 빌드: `https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js`
- `PetiteVue` 전역 객체 노출, 자동 초기화 지원
- ESM 빌드: `https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.es.js`
- `

{{ count }}

{{ plusOne }}

increment

```
여기서 `v-scope`는 값이 꼭 필요하지 않으며, 단순히 `petite-vue`가 해당 요소를 처리하도록 하는 힌트 역할을 한다는 점에 유의하세요.
### Explicit Mount Target
마운트 대상(선택자 또는 요소)을 지정하여 `petite-vue`의 영향 범위를 페이지의 해당 영역으로만 제한할 수 있습니다:
```js
createApp().mount('#only-this-div')
```
이는 또한 동일한 페이지 내의 서로 다른 영역을 제어하기 위해 여러 개의 `petite-vue` 앱을 가질 수 있음을 의미합니다:
```js
createApp({
// app 1의 루트 스코프
}).mount('#app1')
createApp({
// app 2의 루트 스코프
}).mount('#app2')
```
### Lifecycle Events
각 요소에 대한 특수 `vue:mounted` 및 `vue:unmounted` 라이프사이클 이벤트를 수신할 수 있습니다 (v0.4.0부터 `vue:` 접두사가 필수입니다):
```html```
### `v-effect`
\*\*반응형(reactive)\*\* 인라인 문장을 실행하려면 `v-effect`를 사용하세요:
```html

++

```
이 이펙트는 반응형 데이터 소스인 `count`를 사용하므로, `count`가 변경될 때마다 다시 실행됩니다.
원래의 Vue TodoMVC 예제에 있는 `todo-focus` 디렉티브를 대체하는 또 다른 예시입니다:
```html
```
### Components
`petite-vue`에서의 "컴포넌트" 개념은 훨씬 더 뼈대만 남아 있으므로 기존과 다릅니다.
먼저, 재사용 가능한 스코프 로직을 함수로 생성할 수 있습니다:
```html

{{ count }}

increment

{{ count }}

increment

```
### 템플릿을 포함한 컴포넌트
템플릿의 일부를 재사용하려는 경우, 스코프 객체에 특별한 `$template` 키를 제공할 수 있습니다. 값은 템플릿 문자열이거나 `` 요소에 대한 ID 셀렉터일 수 있습니다:
```html
My count is {{ count }}
++
```
`` 방식은 네이티브 템플릿 요소에서 복제하는 것이 더 효율적이므로 인라인 문자열보다 권장됩니다.
### 전역 상태 관리
전역 상태 싱글톤을 만들기 위해 (`@vue/reactivity`에서 다시 내보내진) `reactive` 메서드를 사용할 수 있습니다:
```html

Global {{ store.count }}

increment

Local {{ localCount }}

increment

### Custom Directives
Custom directives은 지원되지만 인터페이스가 다릅니다:
```js
const myDirective = (ctx) => {
// 디렉티브가 위치한 엘리먼트
ctx.el
// 원본 값 표현식
// 예: v-my-dir="x"인 경우 "x"가 됨
ctx.exp
// v-my-dir:foo -> "foo"
ctx.arg
// v-my-dir.mod -> { mod: true }
ctx.modifiers
// 표현식을 평가하고 그 값을 가져옴
ctx.get()
// 현재 스코프에서 임의의 표현식을 평가
ctx.get(`${ctx.exp} + 10`)
// 반응형 이펙트 실행
ctx.effect(() => {
// get() 값이 변경될 때마다 이 코드가 다시 실행됨
console.log(ctx.get())
})
return () => {
// 엘리먼트가 언마운트될 때 정리(cleanup) 작업 수행
}
}
// 디렉티브 등록
createApp().directive('my-dir', myDirective).mount()
```
`v-html`이 구현된 방식은 다음과 같습니다:
```js
const html = ({ el, get, effect }) => {
effect(() => {
el.innerHTML = get()
})
}
```
### Custom Delimiters (0.3+)
루트 스코프에 `$delimiters`를 전달하여 커스텀 구분자를 사용할 수 있습니다. 이는 머스테치(mustache)를 사용하는 서버 사이드 템플릿 언어와 함께 사용할 때 유용합니다:
```js
createApp({
$delimiters: ['${', '}']
}).mount()
```
## Examples
[examples 디렉토리](https://github.com/vuejs/petite-vue/tree/main/examples)를 확인하세요.
## Features
### `petite-vue` 전용
- `v-scope`
- `v-effect`
- `@vue:mounted` & `@vue:unmounted` 이벤트
### 동작 방식이 다른 점
- 표현식에서 `$el`은 (컴포넌트 루트 엘리먼트 대신) 디렉티브가 바인딩된 현재 엘리먼트를 가리킵니다.
- `createApp()`은 컴포넌트 대신 전역 상태를 인자로 받습니다.
- 컴포넌트가 객체를 반환하는 함수 형태로 단순화되었습니다.
- Custom directives의 인터페이스가 다릅니다.
### Vue 호환 기능
- `{{ }}` 텍스트 바인딩 (커스텀 구분자로 설정 가능)
- `v-bind` (`:` 단축키 및 class/style 특수 처리 포함)
- `v-on` (`@` 단축키 및 모든 수식어 포함)
- `v-model` (모든 입력 타입 + 문자열이 아닌 `:value` 바인딩)
- `v-if` / `v-else` / `v-else-if`
- `v-for`
- `v-show`
- `v-html`
- `v-text`
- `v-pre`
- `v-once`
- `v-cloak`
- `reactive()`
- `nextTick()`
- Template refs
### 지원되지 않는 기능
프로그레시브 Enhancement 맥락에서 유틸리티 대비 크기 비율이 상대적으로 낮기 때문에 일부 기능이 제외되었습니다. 이러한 기능이 필요하다면 표준 Vue를 사용하는 것이 좋습니다.
- `ref()`, `computed()` 등
- 렌더 함수 (`petite-vue`에는 가상 DOM이 없습니다)
- 컬렉션 타입에 대한 반응형 (Map, Set 등은 더 작은 번들 크기를 위해 제거됨)
- Transition, KeepAlive, Teleport, Suspense
- `v-for` 깊은 구조 분해 (deep destructure)
- `v-on="object"`
- `v-is` & `<component>`
- `v-bind:style` 자동 프리픽스(auto-prefixing)
## Comparison with standard Vue
`petite-vue`의 핵심은 단순히 크기가 작다는 것만이 아닙니다. 의도된 유스케이스(프로그레시브 Enhancement)에 최적화된 구현을 사용하는 것에 의의가 있습니다.
표준 Vue는 빌드 단계 유무에 관계없이 사용할 수 있습니다. 빌드 설정(예: Single-File Components 사용)을 사용할 때는 모든 템플릿을 사전 컴파일하므로 런타임에 수행해야 할 템플릿 처리가 없습니다. 또한 트리 셰이킹(tree-shaking) 덕분에 사용하지 않을 때 번들 크기를 늘리지 않는 선택적 기능들을 표준 Vue에 포함할 수 있습니다. 이것이 표준 Vue의 가장 이상적인 사용법이지만, 빌드 설정이 필요하므로 SPA나 상대적으로 상호작용이 많은 앱을 빌드할 때 더 적합합니다.
빌드 단계 없이 표준 Vue를 사용하여 인-DOM(in-DOM) 템플릿에 마운트하는 경우, 다음과 같은 이유로 효율성이 크게 떨어집니다:
- 브라우저에 Vue 템플릿 컴파일러를 포함해야 합니다 (추가 크기 13kb).
- 컴파일러가 이미 인스턴스화된 DOM에서 템플릿 문자열을 가져와야 합니다.
- 컴파일러가 해당 문자열을 JavaScript 렌더 함수로 컴파일합니다.
- Vue가 렌더 함수로 생성된 새로운 DOM으로 기존 DOM 템플릿을 교체합니다.
`petite-vue`는 기존 DOM을 순회하며 세밀한(fine-grained) 반응형 이펙트를 엘리먼트에 직접 부착하는 방식으로 이 모든 오버헤드를 방지합니다. DOM이 _바로_ 템플릿입니다. 즉, `petite-vue`는 프로그레시브 Enhancement 시나리오에서 훨씬 더 효율적입니다.
이것이 Vue 1이 작동하던 방식이기도 합니다. 여기서 감수해야 할 트레이드오프는 이 방식이

이 방식은 DOM과 결합되어 있어 플랫폼 독립적인 렌더링이나 JavaScript SSR에는 적합하지 않습니다. 또한 고급 추상화를 위한 렌더 함수를 사용할 수 있는 기능도 잃게 됩니다. 하지만 예상하시겠지만, 이러한 기능들은 점진적 향상(progressive enhancement)의 맥락에서는 거의 필요하지 않습니다.

## Alpine과의 비교

`petite-vue`는 [Alpine](https://alpinejs.dev)과 유사한 영역을 다루지만, (1) 훨씬 더 미니멀하고 (2) Vue와 더 높은 호환성을 갖는 것을 목표로 합니다.

- `petite-vue`는 Alpine 크기의 절반 정도입니다.
- `petite-vue`에는 전환(transition) 시스템이 없습니다 (나중에 선택적 플러그인으로 제공될 수도 있습니다).
- Alpine은 대체로 Vue의 디자인을 닮았지만, 동작이 Vue와 다른 다양한 경우들이 존재합니다. 또한 앞으로 Vue와의 차이가 더 벌어질 수도 있습니다. 이는 Alpine이 Vue를 엄격하게 따르도록 디자인을 제한할 필요가 없으며, 자신의 목표에 맞는 방향으로 발전할 자유가 있어야 하므로 좋은 현상입니다.

이에 비해 `petite-vue`는 필요할 경우 표준 Vue로 쉽게 전환할 수 있도록 가능한 한 표준 Vue의 동작과 일치하도록 노력할 것입니다. 이 도구는 현재 표준 Vue가 덜 최적화되어 있는 점진적 향상 유스케이스를 커버하기 위해 \*\*Vue 생태계의 일부\*\*가 되도록 의도되었습니다.

## 보안 및 CSP

`petite-vue`는 템플릿 내의 JavaScript 표현식을 평가합니다. 즉, \*\*만약\*\* `petite-vue`가 사용자 데이터에서 비롯된 살균(sanitized)되지 않은 HTML을 포함하는 DOM 영역에 마운트된다면, XSS 공격으로 이어질 수 있습니다. \*\*페이지가 사용자가 제출한 HTML을 렌더링하는 경우, 여러분이 제어하는 부분만 처리되도록 [명시적 마운트 타겟](#explicit-mount-target)을 사용하여 `petite-vue`를 초기화하는 것을 권장합니다\*\*. 또한 `v-scope` 속성에 대해서는 사용자가 제출한 HTML을 살균할 수 있습니다.

`petite-vue`는 `new Function()`을 사용하여 표현식을 평가하므로, 엄격한 CSP 설정에서는 금지될 수 있습니다. 경량화라는 목적을 해치는 표현식 파서(parser)를 포함해야 하기 때문에 CSP 빌드를 제공할 계획은 없습니다. 엄격한 CSP 요구 사항이 있다면 표준 Vue를 사용하고 템플릿을 사전 컴파일(pre-compile)해야 합니다.

## 라이선스

MIT