Vue.js ์ฝ๋ ๊ณ ๊ณ ํ ์๋ฆฌ์ฆ โ โ Seed to v0.6.0
vue ์ฒซ ์ปค๋ฐ๋ถํฐ ์ง๊ธ๊น์ง ์๋ฆฌ์ฆ
Vue.js ์ฝ๋ ๊ณ ๊ณ ํ ์๋ฆฌ์ฆ โ โ Seed to v0.6.0
(์ด๊ธฐ ์ปค๋ฐ โSeedโ๋ถํฐ v0.6.0๊น์ง์ ์ฝ๋ ๊ธฐ๋ฐ ์งํ ๋ถ์)
๋ค์ด๊ฐ๋ฉฐ: ํ ์์ Seed์์ ์์๋ Vue.js
Vue.js๋ 2013๋ ์ค๋ฐ, Evan You์ ์ํด ํ์ํ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ๋ก, ์ฒ์์๋ โSeedโ๋ผ๋ ์ด๋ฆ์ ์์ ์คํ์ผ๋ก ์ถ๋ฐํ์ต๋๋ค. Evan์ ๊ตฌ๊ธ์์ AngularJS๋ฅผ ์ฌ์ฉํ๋ ์ค
โAngular์์ ๋ด๊ฐ ์ข์ํ๋ ๋ถ๋ถ๋ง ์ ๋นผ์ ๋ ๊ฐ๋ณ๊ฒ ๋ง๋ค ์ ์์๊น?โ๋ผ๋ ์๊ฐ์ ํ๊ณ ,
๋ทฐ(View) ๋ ์ด์ด์ ์ง์คํ ๊ฒฝ๋ ํ๋ ์์ํฌ์ ์จ์์ ์ฌ์์ต๋๋ค.
์ฒซ ์ปค๋ฐ์ 2013๋ 7์์ ์ด๋ฃจ์ด์ก๊ณ , ์ด๊ธฐ ํ๋ก์ ํธ๋ช Seed๋ ํ๋์ค์ด *Vue(๋ณด๊ธฐ)*์์ ์๊ฐ์ ์ป์ Vue.js๋ก ๋ฐ๋๊ฒ ๋ฉ๋๋ค.
2013๋ 12์ 8์ผ, v0.6.0 ๋ฒ์ ์ด ์ถ์๋๋ฉฐ ๋น๋ก์ ์น์ด ํ ์ต๋๋ค.
์ด ๋ฌธ์๋ Vue.js ์ฝ๋์ ๋ฟ๋ฆฌ๋ฅผ ํํํ๋ ใ์ฝ๋ ๊ณ ๊ณ ํใ ์๋ฆฌ์ฆ์ ์ฒซ ๋ฒ์งธ ํธ์ผ๋ก,
์ด๊ธฐ ์ปค๋ฐ(Seed ํ๋ก์ ํธ)๋ถํฐ v0.6.0 ๋ฆด๋ฆฌ์ค๊น์ง์ ํต์ฌ ๋ณํ์ ๊ธฐ์ ์ ์งํ๋ฅผ ๋ถ์ํฉ๋๋ค.
1. Vue.js์ ํ์ ๋ฐฐ๊ฒฝ๊ณผ ์ฒ ํ ๐ฃ
Vue์ ์์์ ์์ ์จ์๊ณผ ๊ฐ์์ต๋๋ค. Evan You๋ ๋ฌด๊ฑฐ์ด ํ๋ ์์ํฌ ๋์
๊ฐ๋ณ๊ณ , ํ์ํ ๊ฒ๋ง ๊ฐ์ง ๋๊ตฌ๋ฅผ ์ํ๊ณ ,
AngularJS์ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ๊ณผ React์ ์ปดํฌ๋ํธ ์ฌ๊ณ ๋ฐฉ์์ ์ ์ถฉํ ์์ด๋์ด๋ก Vue๋ฅผ ๊ตฌ์ํ์ต๋๋ค.
Vue๋ ์ฒ์๋ถํฐ ์ ์ง์ (Progressive) ํ๋ ์์ํฌ๋ฅผ ํ๋ฐฉํ์ต๋๋ค.
- ํ์ํ ๋ถ๋ถ๋ง ์ ํ์ ์ผ๋ก ๋์ ๊ฐ๋ฅ
- ๊ธฐ์กด ํ๋ก์ ํธ์ ์ผ๋ถ๋ง ์ถ๊ฐ ๊ฐ๋ฅ
- ์ ์ฐจ SPA ๊ตฌ์กฐ๋ก ํ์ฅ ๊ฐ๋ฅ ์ด๊ธฐ Vue ์ฝ๋๋ฒ ์ด์ค๋ ๋งค์ฐ ์์์ผ๋ฉฐ,
๋จ 3๊ฐ์ ํ์ผ(main.js, directives.js, filters.js)๋ก ํต์ฌ ๊ธฐ๋ฅ์ด ๊ตฌํ๋์์ต๋๋ค.
2. ์ด๊ธฐ ๋์์ธ: Seed ํ๋ก์ ํธ์ ์ฝ๋ ๊ตฌ์กฐ ๐ฑ
Seed ์์ Vue์ ๊ตฌ์กฐ๋ ๋จ์ํ์ง๋ง ํต์ฌ์ด ๋ช ํํ์ต๋๋ค.
- main.js: Vue ์ธ์คํด์ค ์ด๊ธฐํ ๋ฐ DOM ๋ง์ดํธ
- directives.js:
sd-์ ๋์ฌ ๊ธฐ๋ฐ ๋๋ ํฐ๋ธ ์ ์ - filters.js: ์ถ๋ ฅ ๋ฐ์ดํฐ ๊ฐ๊ณต์ ์ํ ํํฐ ์ ์
2.1 Seed ์์ ์ ๋๋ ํฐ๋ธ ๊ท์น
์ด๊ธฐ Vue๋ Angular์ ng- ๋์ sd- (Seed) ์ ๋์ฌ๋ฅผ ์ฌ์ฉํ์ต๋๋ค.
sd-textโv-textsd-classโv-bind:classsd-showโv-showsd-eachโv-for
Seed ์ด๊ธฐ ์ฝ๋ ์์
<div id="app">
<h1 sd-text="title"></h1>
<p sd-show="isVisible">์ด ๋ฌธ์ฅ์ ๋ณด์ผ๊น์?</p>
<ul>
<li sd-each="item in items" sd-text="item"></li>
</ul>
</div>
<script>
new Vue({
id: '#app',
scope: {
title: '์๋
ํ์ธ์, Vue!',
isVisible: true,
items: ['์ฒซ ๋ฒ์งธ', '๋ ๋ฒ์งธ', '์ธ ๋ฒ์งธ']
}
});
</script>
๐ก ๋น์ : ์๋ฌผ๊ณผ ํ๋น
3. ๋ฐ์์ฑ์ ํต์ฌ: Object.defineProperty โ๏ธ
Vue ์ด์ฐฝ๊ธฐ์ ํต์ฌ ํ์ ์ ๋ฐ์ํ ์์คํ ์ ๋๋ค.
AngularJS vs Vue
- AngularJS (Dirty Checking) ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ณต ๊ฒ์ฌ โ ์ฑ๋ฅ ๋ถ๋ด ์ฆ๊ฐ
- Vue (defineProperty) ๊ฐ ๋ณ๊ฒฝ ์๊ฐ ์ฆ์ ๊ฐ์ง โ ์ ํํ๊ณ ๋น ๋ฅธ ๋ฐ์
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
return val;
},
set(newVal) {
val = newVal;
updateDOM(key, newVal);
}
});
}
4. sd-์์ v-๋ก: Vue์ ์ ์ฒด์ฑ ํ๋ฆฝ ๐ท๏ธ
v0.6.0 ๋ฆด๋ฆฌ์ค์ ํจ๊ป ๋ค์๊ณผ ๊ฐ์ ๋ณํ๊ฐ ์ด๋ฃจ์ด์ก์ต๋๋ค.
- Seed โ Vue.js
sd-โv-idโelscopeโdata
<div id="app">
<h1 v-text="title"></h1>
<p v-show="isVisible">์ด ๋ฌธ์ฅ์ ๋ณด์ผ๊น์?</p>
<ul>
<li v-repeat="item: items" v-text="item"></li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
title: '์๋
ํ์ธ์, Vue!',
isVisible: true,
items: ['์ฒซ ๋ฒ์งธ', '๋ ๋ฒ์งธ', '์ธ ๋ฒ์งธ']
}
});
</script>
5. ์ปดํฌ๋ํธ ๊ฐ๋ ์ ํ๋ ๐
Vue๋ ์ ์ฐจ ์ปดํฌ๋ํธ ๊ฐ๋ ์ ๋์ ํฉ๋๋ค.
๐งฑ ๋ ๊ณ ๋น์
์ดํ Laravel๊ณผ์ ๋ง๋จ์ ๊ณ๊ธฐ๋ก Vue๋ ํญ๋ฐ์ ์ธ ์ฑ์ฅ์ ์์ํฉ๋๋ค.
6. Seed vs Vue v0.6.0 ๋น๊ต ๐
| ํญ๋ชฉ | Seed | Vue v0.6.0 |
|---|---|---|
| ํ๋ก์ ํธ๋ช | Seed | Vue.js |
| ์ ๋์ฌ | sd- | v- |
| ์ต์ | id, scope | el, data |
| ๋ฐ์์ฑ | defineProperty | ์์ ํ |
| ์ปดํฌ๋ํธ | ์์ | ๋์ ์์ |
๋งบ์๋ง: ๋ฟ๋ฆฌ๋ฅผ ์๋ฉด ๋ฐฉํฅ์ด ๋ณด์ธ๋ค ๐ณ
Vue.js์ ํต์ฌ ์ฒ ํ์ ์ฒ์๋ถํฐ ๋ช ํํ์ต๋๋ค.
๊ฐ๊ฒฐํจ ยท ํจ์จ์ฑ ยท ์ ์ฐํจ
๋ค์ ํธ์์๋ v0.7 ~ v0.11,
Vue 1.0 ์ง์ ์ ์งํ ๊ณผ์ ์ ๋ค๋ฃน๋๋ค.
To be continuedโฆ
โฌ๏ธ ์ด ๊ธ์ด ๋์์ด ๋์ จ๋ค๋ฉด, ์๋ ๊ด๊ณ ๋ฅผ ํ ๋ฒ๋ง ํด๋ฆญํด์ฃผ์ธ์! ์ ์๊ฒ ํฐ ํ์ด ๋ฉ๋๋ค ๐โโ๏ธ โฌ๏ธ