Vue.js ์ฝ๋ ๊ณ ๊ณ ํ ์๋ฆฌ์ฆ โก โ v0.7.0 ~ v1.0.0
vue ๊ณ ๊ณ ํ์๋ฆฌ์ฆ 2
Vue.js ์ฝ๋ ๊ณ ๊ณ ํ ์๋ฆฌ์ฆ โก โ v0.7.0 ~ v1.0.0
(Vue.js v0.7.0 ~ v1.0.0 ๊ธฐ์ ๊ณ ๊ณ ํ์ ๋ถ์ ๋ณด๊ณ ์)
1. ์ปดํฌ๋ํธ ์์คํ ์ ์งํ
1.1 Vue.extend ๋ฐฉ์๊ณผ ์ปดํฌ๋ํธ ๊ฐ๋ ์ ๊ณ ๋ํ
Vue.js๋ ์ด๊ธฐ ๋ฒ์ ๋ถํฐ ์ปดํฌ๋ํธ ๊ฐ๋
์ ๋์
ํ์ฌ UI ๊ตฌ์กฐ๋ฅผ ๋ชจ๋ํํ์ต๋๋ค. v0.7 ์์ ์ Vue๋ ๊ฐ๋จํ ViewModel ์์ฃผ์์ผ๋, v0.8 ~ v0.10์ ๊ฑฐ์น๋ฉฐ Vue.extend()๋ก ์ปดํฌ๋ํธ ํด๋์ค๋ฅผ ์์ฑํ๋ ํจํด์ด ์ ์ฐฉ๋์์ต๋๋ค. ์ด ์๊ธฐ ์ปดํฌ๋ํธ๋ ๋ถ๋ชจ์ scope(์ค์ฝํ)๋ฅผ ๊ธฐ๋ณธ ์์ํ์ฌ ๋์ํ์ง๋ง, ์ด๋ ์ปดํฌ๋ํธ ๊ฐ ๊ฒฐํฉ๋๋ฅผ ๋์ด๋ ๋ฌธ์ ๋ฅผ ์ผ๊ธฐํ์ต๋๋ค.
- *v0.11 (2014๋
11์)**์์ Vue๋ ์ปดํฌ๋ํธ์ ๋ฒ์(Scope)๋ฅผ ๊ฒฉ๋ฆฌํ๊ธฐ ์์ํ์ต๋๋ค. ์ฆ, ์์ ์ปดํฌ๋ํธ๋ ๋ ์ด์ ๋ถ๋ชจ์ ๋ฐ์ดํฐ๋ฅผ ์๋ ์์ํ์ง ์๊ณ ์์ฒด์ ์ธ ๋ฐ์ดํฐ ๊ฒฉ๋ฆฌ๋ฅผ ๊ฐ์ต๋๋ค. ์ด ๋ณํ๋ก ์ปดํฌ๋ํธ ๊ฐ ๋ช
์์ ๋ฐ์ดํฐ ์ ๋ฌ์ด ์ค์ํด์ก์ต๋๋ค. v0.11์์๋ ๋ถ๋ชจ โ ์์ ๋ฐ์ดํฐ ์ ๋ฌ์ ์ํด
v-with๋๋ ํฐ๋ธ์ ์ปดํฌ๋ํธ ์ต์ paramAttributes๋ฅผ ๋์ ํ์ฌ Web Component์ ์์ฑ ์ ๋ฌ ๋ฐฉ์์ ๋ชจ๋ฐฉํ์ต๋๋ค. ์๋ฅผ ๋ค์ด, 0.11์์ ์์ ์ปดํฌ๋ํธmy-component์ ๋ถ๋ชจ ๋ฐ์ดํฐparams๋ฅผ ์ ๋ฌํ๋ ค๋ฉด ์๋์ ๊ฐ์ด ์์ฑํ์ต๋๋ค.
<!-- 0.11 ์์: ๋ถ๋ชจ ํ
ํ๋ฆฟ์์ ์์์ ๋ฐ์ดํฐ ์ ๋ฌ -->
<my-component params="{{ parentValue }}"></my-component>
์์ ์ปดํฌ๋ํธ ์ ์์๋ paramAttributes: ['params'] ์ต์
์ ์ฃผ์ด์ผ ํ์ต๋๋ค. ์ด ๋ฐฉ์์ ๋ช
์์ ์ธ Prop ์ ๋ฌ์ ์ด๊ธฐ ํํ์์ผ๋, ๋ฌธ๋ฒ์ ๋ค์ ์ฅํฉํ์ต๋๋ค.
- *v0.12 (2015๋
6์)**์์๋ ์ด๋ฌํ ์ปดํฌ๋ํธ ์ฌ์ฉ๋ฒ์ ๋ํญ ๊ฐ์ ํฉ๋๋ค.
v-component๋๋ ํฐ๋ธ(์ปค์คํ ์๋ฆฌ๋จผํธ์ ๊ธฐ๋ฅ ์ค๋ณต)์v-with๋๋ ํฐ๋ธ๊ฐ deprecated(์ฌ์ฉ ์ค๋จ) ๋์๊ณ ,paramAttributes์ต์ ์ props๋ก ๊ฐ๊ฒฐํ๊ฒ ์ด๋ฆ ๋ณ๊ฒฝ๋์์ต๋๋ค. ์ด์ ๋๋ถ๋ถ์ ์ปดํฌ๋ํธ๋ HTML ์ปค์คํ ์๋ฆฌ๋จผํธ๋ก ์ ์ธํ๊ณ , ์์ฑ์ props๋ก ์ง์ ์ ๋ฌํฉ๋๋ค.
<!-- 0.12 ์ดํ: ์ปค์คํ
์๋ฆฌ๋จผํธ์ props ์ฌ์ฉ -->
<my-component :some-prop="parentValue"></my-component>
์ ์์ฒ๋ผ v-with ๋์ prop ๋ฐ์ธ๋ฉ์ ์ฌ์ฉํจ์ผ๋ก์จ, ์ปดํฌ๋ํธ ๋ฌธ๋ฒ์ด ์ผ๊ด๋๊ณ ์ ์ธ์ ์ผ๋ก ๋ฐ๋์์ต๋๋ค. ์ด๋ก์จ Vue ์ปดํฌ๋ํธ ์์คํ
์ 1๊ธ ์๋ฏผ์ผ๋ก ๊ฒฉ์๋์ด, ๋๋ ํฐ๋ธ์ ์์กดํ์ง ์๋ ๊ณ ์ ํ API์ ์ญํ ์ ๊ฐ์ถ๊ฒ ๋์์ต๋๋ค.
๋ํ v0.12์์๋ Props ๊ธฐ๋ฅ์ ๊ณ ๋ํ๊ฐ ์ด๋ค์ ธ, ์ผํ์ฑ(one-time) ๋ฐ์ธ๋ฉ์ด๋ ๋จ๋ฐฉํฅ(one-way) ๋ฐ์ธ๋ฉ ๋ฑ์ ์ต์ ์ด ์ถ๊ฐ๋์์ต๋๋ค. ์ด๋ Prop๋ก ๋ด๋ ค์ค๋ ๋ฐ์ดํฐ๋ฅผ ์์์ด ์์ ํ ์ ์๋๋ก ํ๊ฑฐ๋, ์ด๊ธฐ๊ฐ๋ง ์ ๋ฌ๋ฐ๊ณ ๋ฐ์์ฑ ์ฐ๊ฒฐ์ ๋๋ ๋ฑ์ ํจํด์ ์ง์ํด์ฃผ์์ต๋๋ค.
1.2 Props, Slot, Lifecycle API์ ๋์ ๊ณผ ์์ ํ
Props
0.11์์๋ paramAttributes๋ก ๋ถ๋ฆฌ๋ ๊ฒ์ด 0.12์์ props๋ก ๋ณ๊ฒฝ๋์ด, Vue 1.0๊น์ง Props API์ ๊ธฐ๋ณธ ํํ๊ฐ ์์ฑ๋์์ต๋๋ค. Props๋ ๋ถ๋ชจ-์์ ๊ฐ ๋ช
์์ ๋ฐ์ดํฐ ํ๋ฆ์ ํ๋ฆฝํ์ฌ ์ปดํฌ๋ํธ ๊ฒฝ๊ณ๋ฅผ ๋ช
ํํ ํ๊ณ , Vue 1.x ๋ด๋ด ์์ ์ ์ผ๋ก ์ ์ง๋์์ต๋๋ค.
Slot
๋ถ๋ชจ๊ฐ ์์ ์ปดํฌ๋ํธ์ ํ
ํ๋ฆฟ ์กฐ๊ฐ์ ์ฃผ์
ํ๋ ๊ธฐ๋ฅ์ ์ด๊ธฐ์๋ <content> ํ๊ทธ๋ก ๊ตฌํ๋์์ต๋๋ค.
0.10~0.11 ์์ ์๋ ์์ ํ
ํ๋ฆฟ์ <content></content>๋ฅผ ๋ฐฐ์นํ๋ฉด ๋ถ๋ชจ์ DOM ๋ด์ฉ์ด ๊ทธ ์์น์ ์ฝ์
๋์์ต๋๋ค.
ํ์ง๋ง <content>๋ Web Components ์ ๊ท๊ฒฉ์ ๋ฐ๋ฅธ ๊ฒ์ด์ด์ ํ๊ณ๊ฐ ์์๊ณ , ํ์ค ๋ณ๊ฒฝ์ ๋์ํ ํ์๊ฐ ์์์ต๋๋ค. Vue 1.0 ์ ํ๋ก Vue๋ ์ด ๊ฐ๋
์ <slot> ํ๊ทธ๋ก ์ ํํฉ๋๋ค. Vue 1.x ์๊ธฐ์๋ ๊ธฐ๋ณธ ์ฌ๋กฏ(์ด๋ฆ ์๋ ์ฌ๋กฏ ๋ฐ ๋จ์ผ ์ฝ์
) ์์ฃผ๋ก ์ ๊ณต๋์๊ณ , 2.x์์ named slot ๋ฑ์ด ์ถ๊ฐ ๊ณ ๋ํ๋ฉ๋๋ค.
Lifecycle (์๋ช ์ฃผ๊ธฐ ํ )
Vue๋ ์ปดํฌ๋ํธ ์ธ์คํด์ค์ ์์ฑ๋ถํฐ ์๋ฉธ๊น์ง ์ฌ๋ฌ ๋จ๊ณ์์ ํ (Hook)์ ์ ๊ณตํ์ต๋๋ค.
- v0.10๊น์ง:
init,compiled,ready,attached,detached,beforeDestroy,destroyed๋ฑ - v0.11 ์ฌ์ค๊ณ ์ดํ: ํ ์ ์๋ฏธ/์ด๋ฆ์ด ๋ค๋ฌ์ด์ง
- v1.0 ์์ : API ์ ์ ๊ฐ ๋ชฉํ์๊ธฐ ๋๋ฌธ์ ๋ถํ์ํ๊ฑฐ๋ ๋ชจํธํ ์ต์
์ ์ ๊ฑฐํ๊ณ ํต์ฌ ํ
์ค์ฌ์ผ๋ก ์ ์ง
๋ํ 0.x์์ ์กด์ฌํ๋
inherit์ต์ (์์์ด ๋ถ๋ชจ ๋ฐ์ดํฐ๋ฅผ ์์ํ๋ ์ต์ )์ 1.0์์ ์์ ํ ์ ๊ฑฐ๋์์ต๋๋ค. ์ด๋ ์ปดํฌ๋ํธ ๊ฐ ์บก์ํ ๊ฐํ๋ฅผ ์ํ ๊ฒฐ์ ์ผ๋ก, 1.0๋ถํฐ๋ props ์์ด ๋ถ๋ชจ ์ํ์ ์ง์ ์์กดํ๋ ์ปดํฌ๋ํธ๋ ๋ ์ด์ ํ์ฉ๋์ง ์๊ฒ ๋์ด ์ ์ง๋ณด์์ฑ์ด ๋์์ก์ต๋๋ค.
1.3 SFC(Single File Component) ๋ฑ์ฅ ๋ฐฐ๊ฒฝ๊ณผ ๋์ ์์
-
*Single File Component (๋จ์ผ ํ์ผ ์ปดํฌ๋ํธ)**๋
.vueํ์ฅ์๋ฅผ ๊ฐ์ง ํ์ผ ํ๋์ ํ ํ๋ฆฟ, ์คํฌ๋ฆฝํธ, ์คํ์ผ์ ๋ชจ๋ ํฌํจํ๋ ๊ตฌ์ฑ์์๋ฅผ ๋งํฉ๋๋ค. ์ด ๊ฐ๋ ์ Vue 1.x ์๋์ ๋ฑ์ฅํ์ฌ Vue ์ํ๊ณ์ ํฐ ์ํฅ์ ์ฃผ์์ต๋๋ค. ์ด๊ธฐ์๋ ํ ํ๋ฆฟ์ HTML์<script type="text/x-template">๋ก ์์ฑํ๊ฑฐ๋, ์ปดํฌ๋ํธ ์ต์ ์ ๋ฌธ์์ด๋ก ์์ฑํ๋ ๋ฐฉ์์ด ์ผ๋ฐ์ ์ด์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด ์ ๊ทผ์ ๋ค์ ๋ฌธ์ ๋ฅผ ์ผ๊ธฐํ์ต๋๋ค. -
๋ฌธ๋ฒ ๊ฐ์กฐ ๋ถ์กฑ
-
๊ธด HTML ๋ฌธ์์ด์ ๊ฐ๋ ์ฑ ์ ํ ๋ฐ ์ด์ค์ผ์ดํ ๋ฌธ์
-
CSS ์ ์ญ ์ค์ผ ๋ฌธ์ ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด Vue ์ปค๋ฎค๋ํฐ๋ ๋น๋ ๋๊ตฌ(Webpack, Browserify ๋ฑ)์ ์ฐ๊ณ๋ SFC ๊ฐ๋ ์ ๋์ ํ์ต๋๋ค.
vue-loader(Webpack)์vueify(Browserify) ๊ฐ์ ๋๊ตฌ๊ฐ.vueํ์ผ์ ํด์ํ๊ณ<template>,<script>,<style>๋ธ๋ก์ ๊ฐ๊ฐ ์ฒ๋ฆฌํ๋๋ก ๋ฐ์ ํ์ต๋๋ค.
Vue 1.0 ๋ฌด๋ ต SFC ์ง์ ๋๊ตฌ๋ค์ ๋ค์ DX๋ฅผ ์ ๊ณตํ์ต๋๋ค.
- Hot Reloading: ์ํ ์ ์งํ ์ฑ ์ปดํฌ๋ํธ๋ง ์ฆ์ ๋ฐ์
- Scoped CSS:
<style scoped>๋ก ์ปดํฌ๋ํธ ๋จ์ ์คํ์ผ ๊ฒฉ๋ฆฌ - ES2015+ ๋ฐ ์ ์ฒ๋ฆฌ๊ธฐ ์ง์: Babel, SASS/LESS ๋ฑ๊ณผ ๊ฒฐํฉ SFC ๋์ ๋ฐฐ๊ฒฝ ์ฒ ํ์ โ๊ด์ฌ์ฌ์ ๋ถ๋ฆฌ(SoC)๋ ํ์ผ ์ ํ๋ณ ๋ถ๋ฆฌ๊ฐ ์๋๋ผ ์ปดํฌ๋ํธ ๋จ์์ ๋ถ๋ฆฌโ๋ผ๋ ๊ด์ ์ ๋๋ค. ์ฆ, ํ ํ๋ฆฟ/๋ก์ง/์คํ์ผ์ ์๋ก ๊ฐํ๊ฒ ์ฐ๊ด๋์ด ์์ผ๋ฏ๋ก ํ ํ์ผ์ ๋ชจ์ ์์ง๋๋ฅผ ๋์ด๋ ํธ์ด ๊ด๋ฆฌํ๊ธฐ ์ฝ๋ค๋ ์ฃผ์ฅ์ ๋๋ค.
2. ํ ํ๋ฆฟ ๋ฌธ๋ฒ๊ณผ ๋๋ ํฐ๋ธ์ ๋ณํ
2.1 ์กฐ๊ฑด๋ฌธ/๋ฐ๋ณต๋ฌธ ๋๋ ํฐ๋ธ: v-if, v-for ๋ฑ์ ๋ณํ
v-if: 0.x๋ถํฐ ์กด์ฌ. 1.0 ์ ํ๋ก ๋ ๋๋ง ์ต์ ํ ๋ฐ ๋ด๋ถ ์บ์ฑ ๊ฐ์ ์ด ์ธ๊ธ๋จ.v-repeat โ v-for: ๊ฐ์ฅ ํฐ ๋ณํ. 0.x์์๋v-repeat๋ก ๋ฆฌ์คํธ ๋ ๋๋ง์ ํ๊ณ , 1.0์์v-for๋ก ๊ฐ๋ช ๋์์ต๋๋ค. ๋ ์ง๊ด์ ์ธ ์ค์ฝํ ๋ฌธ๋ฒ๊ณผ ์ฑ๋ฅ ์ต์ ํ๊ฐ ๋๋ฐ๋์์ต๋๋ค.v-else: 1.0 ์ฆ์ ๋ฌธ์ํ๋์ด ๋ณธ๊ฒฉ์ ์ผ๋ก ๋์ /์ ์ฐฉ. ์์:
<li v-for="(item, index) in items">{{ index }} - {{ item.name }}</li>
๋ํ 1.x ์๋์๋ track-by ๊ฐ์ ํค ์ต์
(ํ๋์ key ์ ์ฌ)์ ํตํด ๋ฆฌ์คํธ ์
๋ฐ์ดํธ ์ฑ๋ฅ์ ๋์ด๋ ๊ณ ๊ธ ๊ธฐ๋ฅ์ด ์ ๊ณต๋์์ต๋๋ค.
2.2 v-bind, v-on, v-model: ์ ์ธ์ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ ์์ฑ
-
v-bind:๋จ์ถ ํ๊ธฐ:๋์ โ<a :href="someURL"> -
v-on:๋จ์ถ ํ๊ธฐ@๋์ โ<button @click="onClick"> -
v-model: 0.x๋ถํฐ ์กด์ฌ, 1.x์์.lazy๋ฑ ์์์ด ํ์ฅ ๋ฐ ์ปดํฌ๋ํธ ๋์ ์ฌ์ฉ์ฑ ๊ฐ์ ํ๋ฆ ์์ฝํ๋ฉด, ์ด ์๊ธฐ ๋ณํ๋ ํฌ๊ฒ ๋ ์ถ์ ๋๋ค. -
๋๋ ํฐ๋ธ ๊ฐํธ:
v-repeatโv-for,v-with/v-component์ ๊ฑฐ ๋ฑ -
: / ๋จ์ถ ํ๊ธฐ ๋์ ์ผ๋ก ํ ํ๋ฆฟ ๊ฐ๊ฒฐํ
3. ๋ผ์ฐํ ๊ณผ ์ํ๊ด๋ฆฌ์ ์์
3.1 vue-router์ ๋ฑ์ฅ
Vue ์ฝ์ด๋ ๋ทฐ ๋ ์ด์ด์ ์ง์คํ๊ธฐ ์ํด ๋ผ์ฐํ ์ ๋ณ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๋ถ๋ฆฌํ์ต๋๋ค. ์ปค๋ฎค๋ํฐ ์์๊ฐ ์ปค์ง๋ฉด์ 0.12 ๋ฐํ ์ดํ vue-router ๊ฐ๋ฐ์ด ๋ณธ๊ฒฉํ๋์๊ณ , 2015๋ ์ค๋ฐ๋ถํฐ ์ํ/์ด๊ธฐ ๋ฒ์ ์ด ๋ฑ์ฅ, 1.0 ์ถ์ ์์ ์ ํจ๊ป โ์คํโ์ผ๋ก ์๋ฆฌ์ก๊ธฐ ์์ํ์ต๋๋ค.
3.2 vuex์ ํ๋
Vuex๋ Vue์ ๊ณต์ ์ํ๊ด๋ฆฌ ํจํด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก, Flux/Redux ํจํด์ Vue์ ๋์
ํ ๋๊ตฌ์
๋๋ค. Vuex๋ 1.0 ์ด์ ์ ์ฝ์ด ๊ธฐ๋ฅ์ด๋ผ๊ธฐ๋ณด๋ค๋ 1.x ํ๊ธฐ2.0 ์ ํ๋ก ๋ฌด๋ฅด์ต์ง๋ง, 0.71.0 ์๋์ โ์ํ๊ด๋ฆฌ ์๊ตฌ ์ฆ๊ฐโ์ ๋ง๋ฌผ๋ ค ํ๋์ด ์์๋ ๊ฒ์ผ๋ก ์์ฝํ ์ ์์ต๋๋ค.
3.3 ์ ์ฝ์ด์์ ๋ถ๋ฆฌ๋์๋๊ฐ
Vue๋ ์ ์ง์ ํ๋ ์์ํฌ(Progressive Framework) ์ฒ ํ์ ํ๋ฐฉํฉ๋๋ค.
- ๋ผ์ฐํ /์ํ๊ด๋ฆฌ๋ ๋ชจ๋ ์ฑ์ ํ์ํ์ง ์์
- ์ฝ์ด๋ ๊ฐ๋ณ๊ฒ ์ ์ง
- ํ์ํ ๋ ์กฐ๋ฆฝํ๋ฏ ์ถ๊ฐ ์ด ๋ชจ๋ํ๋ ์ ์ง๋ณด์์ ๋ฆด๋ฆฌ์ค ๋ ๋ฆฝ์ฑ ์ธก๋ฉด์์๋ ์ด์ ์ด ์์์ต๋๋ค.
4. ์ปค๋ฎค๋ํฐ์ ์ํ๊ณ ํ์ฅ
4.1 Laravel ์ฐ๋์ ๋ณธ๊ฒฉํ์ ํ๊ธ๋ ฅ
2015๋ ์ Vue๊ฐ Laravel ์ปค๋ฎค๋ํฐ์ ๊ฐํ๊ฒ ์ฐ๊ฒฐ๋ ํด์์ต๋๋ค. Taylor Otwell์ ์ธ๊ธ๊ณผ Laracasts ๋ฑ ํํ ๋ฆฌ์ผ ํ์ฐ์ ๊ณ๊ธฐ๋ก Laravel ์ง์์์ Vue ์ฑํ์ด ํฌ๊ฒ ๋์๊ณ , ์ด๋ Vue ์ฌ์ฉ์ ์ ๋ณ ํ๋์ ์ค์ํ ์ญํ ์ ํ์ต๋๋ค.
4.2 ๋ฌธ์ํ/ํํ ๋ฆฌ์ผ ๊ฐํ ๋ฐ ๊ตญ์ ํ
1.0์ ์ค๋นํ๋ฉด์ ๋ฌธ์์ ๊ฐ์ด๋๊ฐ ํฌ๊ฒ ํ์ถฉ๋์๊ณ , Migration Guide ๋ฐ Deprecation ๊ฒฝ๊ณ ๋ฑ ์ ๊ทธ๋ ์ด๋ ๊ฒฝํ์ด ์ฒด๊ณํ๋์์ต๋๋ค. ๋ํ ๋ค๊ตญ์ด ๋ฌธ์ ๋ฒ์ญ์ด ์ปค๋ฎค๋ํฐ ๊ธฐ๋ฐ์ผ๋ก ํ์ฐ๋๋ฉฐ ๊ธ๋ก๋ฒ ์ปค๋ฎค๋ํฐ๊ฐ ์ฑ์ฅํ์ต๋๋ค.
4.3 1.0 ๋ฆด๋ฆฌ์ค๋ฅผ ํฅํ ์์ฝ
์ด ์๊ธฐ Vue๋ ๋จ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋์ด โ์ํ๊ณโ๋ก ์ฑ์ฅํ๊ณ , ์ปค๋ฎค๋ํฐ์ Evan์ ํ๋์ด ๊ฒฐํฉํด 2015๋ 10์ 26์ผ Vue.js 1.0 (Evangelion) ๋ฆด๋ฆฌ์ค๋ก ์ด์ด์ก์ต๋๋ค.
5. ๊ตฌ์กฐ ๋น๊ต ๋์ (v0.x ์ด๊ธฐ โ v1.0)
5.1 ๋๋ ํฐ๋ธ ๋ณํ ์ ๋ฆฌํ
| ๊ธฐ๋ฅ ์์ญ | 0.7 ~ 0.10 ๋ฌธ๋ฒ | 0.11 ~ 0.12 ๋ณํ | 1.0 ๋ฌธ๋ฒ |
|---|---|---|---|
| ์ปดํฌ๋ํธ ๋ฑ๋ก | v-component="compName" ๋๋ | ||
| ์์ ๋ฐ์ดํฐ ์ ๋ฌ | v-with="prop: parentVal" + paramAttributes | v-with deprecated, paramAttributes โ props | :prop="parentVal" + props |
| ๋ฐ๋ณต ๋ ๋๋ง | v-repeat="item in items" | (0.12 ์ฑ๋ฅ ํฅ์) | v-for="(item, index) in items" |
| ์กฐ๊ฑด ๋ ๋๋ง | v-if="condition" | (ํฐ ๋ณํ ์์) | v-if, v-else |
| ์ด๋ฒคํธ ๋ฐ์ธ๋ฉ | v-on="click: method" | ๋ฌธ๋ฒ ์ ์ง | @click="method" |
| ์์ฑ ๋ฐ์ธ๋ฉ | v-bind:attr="expr" | ๋ฌธ๋ฒ ์ ์ง | :attr="expr" |
| ์๋ฐฉํฅ ๋ฐ์ธ๋ฉ | v-model="dataProp" | ์ ์ง | ์ ์ง + ์์์ด ํ์ฅ |
| ํด๋์ค/์คํ์ผ | v-class ๋ฑ | v-bind:class ํตํฉ ํ๋ฆ | :class, :style ์ค์ฌ |
5.2 ์ต์ ๊ฐ์ฒด ๊ตฌ์กฐ ๋ณํ (data, methods, computed ๋ฑ)
data: 1.0๊น์ง ๊ฐ์ฒด ๋ฆฌํฐ๋ด๋ ํ์ฉ๋๋, ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ ๊ด์ ์์ ํจ์ ํจํด์ด ๊ถ์ฅ๋๊ธฐ ์์methods: 0.x๋ถํฐ ๋์ผcomputed: ์บ์ฑ/์์กด ์ถ์ ๋์ ์์ ํwatch: ์ธ์คํด์ค$watch์ค์ฌ์์ ์ต์ ๊ฐ์ฒด๋ก์ ์ ์ธ์ ์ฌ์ฉ์ด ํ์ฐevents: 0.x์$dispatch/$broadcast๋ 1.x์์ ์ ์ฐจ ์ถ์๋๊ณ , 2.0์์ ์์ ์ ๊ฑฐprops: 0.12๋ถํฐ ์ ์ ๋ช ๋ช , 1.0์์ ํ์ /ํ์ ๋ฑ ์๋ธ์ต์ ํ์ฅinherit: 1.0์์ ์ ๊ฑฐ
5.3 ๋ฐ์์ฑ ์์คํ ์ํคํ ์ฒ (Observer โ Dep โ Watcher)
Vue 1.x ๋ฐ์์ฑ์ ๋ค์ ๊ตฌ์กฐ๋ก ์์ฝ๋ฉ๋๋ค.
- Observer: ๊ฐ์ฒด ์์ฑ์ getter/setter๋ฅผ ์ฃผ์ ํด ๋ฐ์ํ
- Dep: ์์ฑ๋ณ ์์กด์ฑ ๊ด๋ฆฌ์(๊ตฌ๋ ์ ๋ชฉ๋ก)
- Watcher: ๋ ๋๋ง/์ปดํจํฐ๋/์ฌ์ฉ์ watch ์คํ ๋จ์ ํต์ฌ ํ๋ฆ:
- getter์์ ์์กด ์์ง
- setter์์ notify
- Watcher update๋ก ๋ ๋๋ง/์ฝ๋ฐฑ ์ํ ์ด ๊ตฌ์กฐ๋ 1.0 ์์ ์ ์์ฑ๋์ด Vue 2.x๊น์ง๋ ๊ฐ๋ ์ ์ผ๋ก ์ ์ง๋ฉ๋๋ค.
6. ๋์ด๋๋ณ ๊ธฐ์ ํด์ค ๋ฐ ๋น์ (์ด/์ค/๊ณ ๊ธ)
(์ด๊ธ) Dirty Checking vs Vue ๋ฐ์์ฑ โ ์ฐ์ฒด๊ตญ ๋น์
- Angular: ์ฐ์ฒด๋ถ๊ฐ ๋งค์ผ ๋ชจ๋ ์ง์ ์์ฐฐ(๋ํฐ ์ฒดํฌ)
- Vue: ํธ์งํจ์ด โํธ์ง ๋์ฐฉโ์ ์๋ ค์ฃผ๋ ์ผ์(์์กด์ฑ ์ถ์ ) ์์ : ๋ณํ๊ฐ ์๋ ์ง์ ์ ๋ ๊ฒ์ฌํ์ง ์๋๋ค.
(์ค๊ธ) SFC ์ ์ง๋ณด์์ฑ โ ๋ ๊ณ ๋ฐ์ค ๋น์
- ์ ํต: ์๊น๋ณ๋ก ๋ ๊ณ ๋ฅผ ๋ถ๋ฆฌ(HTML/CSS/JS ๋ถ๋ฆฌ) โ ์กฐ๋ฆฝ ์ ๋ฐ์ค๋ฅผ ๊ณ์ ์ค๊ฐ์ผ ํจ
- SFC: โ์์ฑํ ๋จ์โ ๋ฐ์ค(์ปดํฌ๋ํธ ๋จ์) โ ํ ๋ฐ์ค์ ํ
ํ๋ฆฟ/๋ก์ง/์คํ์ผ์ด ํจ๊ป
scoped์คํ์ผ์ โ๋ด ๋ฐ์ค ๋ถํ์ด ๋ค๋ฅธ ๋ฐ์ค๋ก ์์ง ์๊ฒ ๋๊ป์ ๋ฎ๋ ๊ฒโ์ ๊ฐ๊น์ต๋๋ค.
(๊ณ ๊ธ) Vue 1.x์ ๊ท ํ๊ฐ โ ํ๋ ์์ํฌ ๋์์ธ ๊ด์
Vue 1.x๋ Angular์ ํธ์์ฑ๊ณผ React์ ์ปดํฌ๋ํธ ๋ชจ๋ธ ์ฅ์ ์ ์ ์ถฉํด,
์ปดํฌ๋ํธ ๊ฒฉ๋ฆฌ(์บก์ํ) + ์๋ ๋ฐ์์ฑ(์ฑ๋ฅ) + ์ ์ง์ ํ์ฅ(์ฒ ํ)์ ๊ท ํ์ ์ ํ๋ณดํ์ต๋๋ค.
๋งบ์๋ง
Vue 0.7.0๋ถํฐ 1.0.0๊น์ง๋ ๋ถ๊ณผ 2๋ ๋จ์ง์ด์ง๋ง, ์ด ๊ธฐ๊ฐ์ Vue๋
์ปดํฌ๋ํธ ์์คํ ์ ๋น, ํ ํ๋ฆฟ DSL ์์ฑ, ๋ผ์ฐํ /์ํ๊ด๋ฆฌ ์ํ๊ณ ํ์ฅ, ์ปค๋ฎค๋ํฐ ํญ๋ฐ ์ฑ์ฅ์ ๊ฑฐ์ณ
์์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ โํ๋ ์์ํฌ ์ํ๊ณโ๋ก ์ฑ์ฅํ์ต๋๋ค.
์ด ์๊ธฐ์ ๊ฒฐ์ ๊ณผ ์ฒ ํ์ Vue 2, Vue 3์ ๋ฐ๋ฐํ์ด ๋์๊ณ ,
๋ฐ๋ผ์ 0.x โ 1.0์ Vue ์ญ์ฌ์์ ๊ฐ์ฅ ์๋ฏธ ์๋ โ๊ธฐ์ ๊ณ ๊ณ ํโ ๋ฐ๊ตด ๊ตฌ๊ฐ์ด๋ผ ํ ์ ์์ต๋๋ค.
์ฐธ๊ณ
- Vue ๊ณต์ ๋ธ๋ก๊ทธ/๋ฆด๋ฆฌ์ค ๋ ธํธ
- Evan You ํ๊ณ ๊ธ
- Wikipedia ๋ฐ ์ปค๋ฎค๋ํฐ ์๋ฃ ๋ฑ
โฌ๏ธ ์ด ๊ธ์ด ๋์์ด ๋์ จ๋ค๋ฉด, ์๋ ๊ด๊ณ ๋ฅผ ํ ๋ฒ๋ง ํด๋ฆญํด์ฃผ์ธ์! ์ ์๊ฒ ํฐ ํ์ด ๋ฉ๋๋ค ๐โโ๏ธ โฌ๏ธ