<div id="readability-page-1" class="page"><div><div><div><a rel="noopener" href="/?source=post_page-----209c49747d51--------------------------------"><div><p><img alt="Jeong Woo Ahn" src="https://miro.medium.com/fit/c/56/56/2*5-DkBQYvxo0TLldXjX88Og.png" width="28" height="28"></p></div></a></div><p id="be09">기존 서버렌더링 프로젝트에 점진적으로 vue를 도입할때 유용하다</p><h2 id="409b"><a href="https://github.com/vuejs/petite-vue" rel="noopener nofollow">petite-vue</a></h2><p id="7792">매우 가볍고(5.8kb) 표준 vue의 핵심 기능을 지원한다. cdn 으로 제공하기 때문에 기존 서버렌더링 프로젝트에 Vue를 점진적으로 도입하고자 할때 적합한 도구가 될 듯하다. 주요 특징은,</p><ul><li id="03cc">점진적 향상을 위해 최적화 된 불과 5.8kb 크기의 Vue의 대체 배포판.</li><li id="33f6">표준 Vue와 동일한 <a href="https://kr.vuejs.org/v2/guide/syntax.html" rel="noopener nofollow">템플릿 문법</a> 및 <a href="https://v3.ko.vuejs.org/guide/reactivity.html" rel="noopener nofollow">반응 멘탈 모델</a>을 제공.</li><li id="6709">서버 프레임 워크에 의해 렌더링 된 HTML 페이지에 작은 상호 작용들을 <code>분배</code>하도록 특별히 최적화되어 있음.</li></ul><h2 id="9e17"><strong>지원하지 않는 기능들</strong></h2><ul><li id="4aa7"><code>ref()</code>, <code>computed()</code> etc.</li><li id="6a40">Render 함수(petite-vue는 가상돔을 지원하지 않는다)</li><li id="55ca">컬렉션 타입들(Map, Set, etc.)을 위한 반응성</li><li id="632d">Transition, KeepAlive, Teleport, Suspense</li><li id="df66"><a href="https://michaelnthiessen.com/destructuring-in-a-v-for/" rel="noopener nofollow">v-for 의 destructure 기능</a></li><li id="917f"><code>v-on="object"</code></li><li id="2329"><code>v-is</code> &amp; <code>&lt;component :is="xxx"&gt;</code></li><li id="17a7"><code>v-bind:style</code> auto-prefixing : <code>v-bind:style</code>에서 자동으로 브라우저 별 벤더 prefix를 붙는 기능.</li></ul><h2 id="1ee6"><strong>표준 Vue와의 차이</strong></h2><ul><li id="e6f4"><code>petite-vue</code>는 단지 작은 것이 아니라 몇 가지 사용 사례에 최적화된 구현</li><li id="b710">표준 Vue는 빌드 단계를 포함할 수 있다. 빌드 단계를 포함하는 경우 모든 템플릿이 사전에 컴파일 되고 런타임에 컴파일 처리가 필요없다. 그리고 트리 쉐이킹으로 사용하지 않은 기능에 대해 번들 사이즈를 줄이는 기능을 사용할 수 있다. 많은 상호작용이 필요한 앱의 경우 표준 Vue를 사용하는 것이 좋다.</li><li id="0516">빌드단계를 포함하지 않은 경우 훨씬 덜 최적화될 텐데 <code>petite-vue</code>는 직접 세분화된 반응 효과를 연결하여 이와 련된 오버헤드를 방지한다.</li><li id="4167">이것은 Vue 1 이 작동하는 방식이기도 하다. 플랫폼과 무관한 렌더링이나 자바스크립트 SSR 에 적합하지 않다. 그리고 고급 추상 기법을 위한 render 함수 기능을 사용할 수 없다.</li></ul><p id="8d40">사용법은 <a href="https://github.com/vuejs/petite-vue#usage" rel="noopener nofollow">문서에 자세히 나와 있으니</a> 그걸 참고 할것.</p><h2 id="1856">결론</h2><p id="b07c">기존 서버렌더링 프로젝트에 Vue를 도입하고 싶은데, 인터렉션이 많은 페이지가 별로 없고 프론트엔드 인력도 많지 않다면 점진적으로 vue를 도입할때 유용할 듯하다.</p></div></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

기존 서버렌더링 프로젝트에 점진적으로 vue를 도입할때 유용하다
petite-vue
매우 가볍고(5.8kb) 표준 vue의 핵심 기능을 지원한다. cdn 으로 제공하기 때문에 기존 서버렌더링 프로젝트에 Vue를 점진적으로 도입하고자 할때 적합한 도구가 될 듯하다. 주요 특징은,
점진적 향상을 위해 최적화 된 불과 5.8kb 크기의 Vue의 대체 배포판.
표준 Vue와 동일한 템플릿 문법 및 반응 멘탈 모델을 제공.
서버 프레임 워크에 의해 렌더링 된 HTML 페이지에 작은 상호 작용들을 분배하도록 특별히 최적화되어 있음.
지원하지 않는 기능들
ref(), computed() etc.
Render 함수(petite-vue는 가상돔을 지원하지 않는다)
컬렉션 타입들(Map, Set, etc.)을 위한 반응성
Transition, KeepAlive, Teleport, Suspense
v-for 의 destructure 기능
v-on="object"
v-is & <component :is="xxx">
v-bind:style auto-prefixing : v-bind:style에서 자동으로 브라우저 별 벤더 prefix를 붙는 기능.
표준 Vue와의 차이
petite-vue는 단지 작은 것이 아니라 몇 가지 사용 사례에 최적화된 구현
표준 Vue는 빌드 단계를 포함할 수 있다. 빌드 단계를 포함하는 경우 모든 템플릿이 사전에 컴파일 되고 런타임에 컴파일 처리가 필요없다. 그리고 트리 쉐이킹으로 사용하지 않은 기능에 대해 번들 사이즈를 줄이는 기능을 사용할 수 있다. 많은 상호작용이 필요한 앱의 경우 표준 Vue를 사용하는 것이 좋다.
빌드단계를 포함하지 않은 경우 훨씬 덜 최적화될 텐데 petite-vue는 직접 세분화된 반응 효과를 연결하여 이와 련된 오버헤드를 방지한다.
이것은 Vue 1 이 작동하는 방식이기도 하다. 플랫폼과 무관한 렌더링이나 자바스크립트 SSR 에 적합하지 않다. 그리고 고급 추상 기법을 위한 render 함수 기능을 사용할 수 없다.
사용법은 문서에 자세히 나와 있으니 그걸 참고 할것.
결론
기존 서버렌더링 프로젝트에 Vue를 도입하고 싶은데, 인터렉션이 많은 페이지가 별로 없고 프론트엔드 인력도 많지 않다면 점진적으로 vue를 도입할때 유용할 듯하다.
이 글이 마음에 드셨다면 👏🏽👏🏽와 커피한잔 후원하기 (카카오페이), 이메일로 소식을 받아보고 싶으시다면 ✉️ 이메일 구독하기

[vue.js] 5.8kb 에 불과한 Vue의 대체 배포판 petite-vue에 대해 알아보자

댓글