frontend

petite-vue 가이드: 가볍고 강력한 점진적 향상을 위한 실무 활용법

# petite-vue # Vuejs # Alpinejs # Frontend # Progressive-Enhancement
Concept of petite-vue as a lightweight bridge between static HTML and reactive JavaScript

현대 프론트엔드 개발은 복잡한 빌드 도구와 거대한 프레임워크에 매몰되기 쉽습니다. 하지만 때로는 정적인 HTML 페이지 위에 아주 약간의 인터랙션만 필요한 순간이 있죠. 이때 가장 영리한 선택지가 바로 petite-vue입니다.

이 글에서는 Vue.js의 핵심 철학을 유지하면서도 6kb라는 경이로운 무게를 자랑하는 petite-vue의 모든 것을 살펴봅니다.

목차

  1. petite-vue란 무엇인가? (핵심 철학)
  2. 실무 적용을 위한 기본 사용법
  3. 반응성 시스템과 지시어(Directives) 활용
  4. petite-vue vs Alpine.js: 결정적 차이점
  5. 기술적 한계와 시니어의 제언
  6. FAQ

1. petite-vue란 무엇인가? (핵심 철학)

petite-vue는 Vue의 제작자 Evan You가 만든 “배포(Distribution) 중심”의 프로젝트입니다. 기존 Vue 3가 가상 DOM(Virtual DOM)을 통해 복잡한 SPA(Single Page Application)를 만드는 데 집중한다면, petite-vue는 실제 DOM(Real DOM)을 직접 조작하며 점진적으로 기능을 추가하는 점진적 향상(Progressive Enhancement) 방식에 최적화되어 있습니다.

가장 큰 매력은 빌드 단계가 필요 없다는 점입니다. 단순한 티스토리 블로그, 워드프레스, 혹은 기존의 레거시 서버 사이드 렌더링(SSR) 환경에서도 스크립트 한 줄로 Vue의 반응성을 경험할 수 있어 jQuery의 현대적 대체제로 각광받고 있습니다.

2. 실무 적용을 위한 기본 사용법

가장 간단한 시작은 CDN을 통한 init 방식입니다. HTML 속성에 v-scope를 선언하는 것만으로 해당 영역은 petite-vue의 제어권 아래에 들어옵니다.

<script src="[https://unpkg.com/petite-vue](https://unpkg.com/petite-vue)" defer init></script>

<div v-scope="{ count: 0 }">
  <p>현재 카운트: {{ count }}</p>
  <button @click="count--">-</button>
  <button @click="count++">+</button>
</div>

하지만 시니어 개발자라면 모듈 방식을 권장합니다. 로직과 템플릿을 분리하여 유지보수성을 높일 수 있기 때문이죠.

// 모듈 방식으로 사용 시 타입 안전성과 가독성을 챙길 수 있습니다.
import { createApp } from '[https://unpkg.com/petite-vue?module](https://unpkg.com/petite-vue?module)'

// 상태와 메서드를 포함한 데이터 객체 정의
const counterApp = {
  count: 0,
  // Getter를 통한 계산된 속성(Computed) 구현
  get doubleCount(): number {
    return this.count * 2
  },
  increment() {
    this.count++
  }
}

// 특정 DOM 요소에 마운트
createApp(counterApp).mount('#app-container')

3. 반응성 시스템과 지시어 활용

petite-vue는 Vue 3의 핵심인 @vue/reactivity를 기반으로 합니다. 가상 DOM은 없지만, 데이터가 변하면 해당 데이터를 참조하는 DOM 노드만 효율적으로 업데이트합니다.

  • v-scope: 상태의 범위를 결정합니다. 중첩 사용이 가능하며 자식 스코프는 부모의 상태에 접근할 수 있습니다.
  • v-effect: 데이터가 변경될 때마다 실행되는 코드를 작성할 때 유용합니다. 주로 로컬 스토리지 저장이나 외부 API 연동 시 사용합니다.
  • v-model: 입력 폼과의 양방향 바인딩을 지원하며 .number, .trim 같은 수식어도 사용 가능합니다.

🚀 시니어의 팁: 성능 최적화

petite-vue는 실제 DOM을 순회하며 지시어를 파싱합니다. 따라서 v-for를 사용하여 수천 개의 데이터를 렌더링하는 것은 브라우저 메인 스레드에 부담을 줄 수 있습니다. 대량의 데이터 처리가 필요하다면 정식 Vue.js나 가상 리스트 라이브러리를 고려하세요.

4. petite-vue vs Alpine.js: 결정적 차이점

많은 개발자들이 Alpine.js와 petite-vue 사이에서 고민합니다. 두 도구 모두 “Lightweight JavaScript”를 표방하지만 미묘한 전략적 차이가 있습니다.

비교 항목petite-vueAlpine.js
문법(Syntax)완전한 Vue 문법 (v-)Vue와 유사하나 독자적 (x-)
용량약 6kb (매우 작음)약 15kb (상대적으로 큼)
에코시스템Vue 개발자라면 학습 곡선 0전용 플러그인(Persist, Intersect 등) 풍부
확장성커스텀 지시어 지원 제한적강력한 플러그인 시스템

결론적으로: 이미 Vue 문법에 익숙한 팀이라면 petite-vue가 압도적으로 유리합니다. 별도의 학습 없이 바로 실무에 투입할 수 있기 때문이죠. 반면, Tailwind CSS와 결합하여 더 다양한 내장 기능(애니메이션 등)을 원한다면 Alpine.js가 더 나은 선택일 수 있습니다.

5. 기술적 한계와 주의사항

모든 기술에는 트레이드오프가 있습니다. petite-vue를 도입하기 전 반드시 고려해야 할 한계입니다.

  1. 컴포넌트화의 부재: SFC(.vue 파일)를 쓸 수 없습니다. 복잡한 UI를 여러 파일로 쪼개어 관리하기에는 구조적 한계가 명확합니다.
  2. 가상 DOM의 부재: 매우 빈번한 DOM 업데이트가 발생하는 게임이나 복잡한 대시보드에서는 성능 저하가 있을 수 있습니다.
  3. 템플릿 가공의 어려움: 브라우저가 직접 HTML을 파싱하므로, 유효하지 않은 HTML 구조(예: <table> 내부의 부적절한 태그 배치)는 렌더링 오류를 일으킬 수 있습니다.
  4. 발전 속도: Vue 공식 팀의 주력 프로젝트가 아니기에, 기능 추가나 업데이트 속도가 정식 Vue.js에 비해 느릴 수 있습니다.

FAQ

Q1. 기존 Vue 3 프로젝트에서 함께 쓸 수 있나요?

불가능하지는 않지만 권장하지 않습니다. 이미 Vue를 사용 중이라면 일반적인 Vue 컴포넌트를 사용하는 것이 번들링 최적화와 관리 측면에서 훨씬 낫습니다. petite-vue는 Vue가 없는 환경을 위한 대안입니다.

Q2. SEO에 영향이 있나요?

petite-vue는 기본적으로 서버에서 이미 렌더링된 HTML을 기반으로 동작하므로 SEO에 매우 유리합니다. 검색 엔진 로봇이 서버에서 내려온 HTML 내용을 그대로 읽을 수 있고, 인터랙션만 클라이언트에서 활성화(Hydration)되기 때문입니다.

Q3. TypeScript와 함께 쓸 수 있나요?

네, ES 모듈 방식을 사용하면 TypeScript의 타입 추론 기능을 활용할 수 있습니다. 다만 .vue 파일 형식이 아니므로 일반 .ts 파일에서 상태 객체를 정의하고 내보내는 방식으로 작업하게 됩니다.

petite-vue는 작지만 날카로운 도구입니다. 모든 것을 자바스크립트로 해결하려 하기보다, HTML 본연의 가치를 지키면서 최소한의 활력을 불어넣고 싶을 때 이보다 더 깔끔한 대안은 찾기 힘들 것입니다.

혹시 현재 프로젝트에 jQuery가 남아있나요? 그 부분을 petite-vue로 리팩토링하여 현대적인 반응성을 불어넣어 보시는 건 어떨까요?

이 글이 마음에 드셨나요?

로딩 중...