HTML, CSS, JS์ Vue.js ๊ธฐ์ด๋ฅผ ์๊ณ
์ฝ๊ฒ ์น ์ฑ์ ๊ฐ๋ฐํ ์ ์๋ Vue.js๋ฅผ ๋ฐฐ์์! ๐โโ๏ธ
Vue.js์ ๊ธฐ์ด๋ฅผ ๋ค์ง๊ณ
์ค๊ณ ๊ธ ๋ ๋ฒจ์ ๊ฐ๋ฐ์๋ก ์ฑ์ฅํด์ โจ
์ด ๊ฐ์ข๋ ๋ค์๊ณผ ๊ฐ์ด ํฌ๊ฒ 3๊ฐ์ง ํํธ๋ก ๋๋ฉ๋๋ค.
- Vue.js๋ก ๊ตฌํํ๋ To-do App
- ๊น๋ํ Vue.js ์ฝ๋๋ฅผ ์ํ ES6
- ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌํํ๊ธฐ ์ํ Vuex
์ด์ ๋ง Vue.js๋ ์น ๊ฐ๋ฐ์ ํฅ๋ฏธ๊ฐ ์๊ธด ๋ถ๋ค์๊ฒ ์ถ์ฒํ๋ ๊ฐ์์
๋๋ค. ์ปดํฌ๋ํธ, ์ธ์คํด์ค ๋ฑ์ ์์ง๋ง ์ค์ ๋ก ์ฑ์ ๋ง๋ค๋ ค๊ณ ํ๋ ๋ต๋ตํ ๋ถ๋ค์๊ฒ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋ค์ด๋๊ฐ ์ ์๋๋ก ๋์๋๋ฆฝ๋๋ค. ES6์ผ๋ก ๋ ๋ทฐ ์ฝ๋๋ฅผ ๋ด์ผํ๋ ๋ถ๋ค๊ป ์ฝ๊ณ ๋น ๋ฅด๊ฒ ES6์ ๋ฐฐ์ฐ๋ ๋ฐฉ๋ฒ์ ์๋ ค๋๋ ค์.
์ ํ๋ฆฌ์ผ์ด์
์ด ์ปค์ ธ์ ์ปดํฌ๋ํธ๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๊ณ ์ถ์ ๋ถ๋ค๊ป Vuex๋ฅผ ์ฝ๊ณ ๊ฐ๋จํ๊ฒ ๋ฐฐ์ฐ๋ ๋ฒ์ ์๊ฐํฉ๋๋ค. ์ ์ฒด์ ์ธ ๊ฐ์ ๋ฐฉ์์ ์ฝ๋ ์ค์ฌ์ ํ์ตํ ๊ฐ์ข๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค.
๋ทฐ ๊ธฐ์ด ๊ฐ๋
์ผ๋ก To-do ์ฑ์ ์ ์ํ๋ฉฐ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ์ค๊ณ ๋ฐฉ๋ฒ๊ณผ ๊ตฌ์กฐํ ๋ฐฉ๋ฒ์ ์ตํ ํ, ES6์ ๊ฐ๋
์ ํ์ตํ์ฌ ์ ํ๋ฆฌ์ผ์ด์
์ฝ๋์ ์ ์ฉํจ์ผ๋ก์จ ์ ํ๋ฆฌ์ผ์ด์
์ฝ๋๋ฅผ ๊ฐ์ ํด๋๊ฐ๋๋ค. Vuex์ ์ฃผ์ ๊ธฐ์ ์์๋ค์ ํ์ตํ๊ณ Todo ์ฑ์ ๋ค์ ๋ฆฌํฉํ ๋งํ๋ฉด์ ๋ฐฐ์ด ๋ด์ฉ๋ค์ ์ง์ ์ฝ๋์ ์ ์ฉํด๋ณด๋ ์ค์ ํ ๊ฐ์์
๋๋ค.
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๊ด์ฌ์๋
๋๊ตฌ๋ ๋ฐฐ์ธ ์ ์์ต๋๋ค ๐โโ๏ธ
Vue.js๋ฅผ ๋ฐ๋ก
์ค๋ฌด์ ์ฐ๊ณ ์ถ์ ๊ฐ๋ฐ์
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
ํ๊ณ ์ถ์ ๋์์ด๋
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก
์ ํฅํ๊ณ ์ถ์ ํผ๋ธ๋ฆฌ์
๐ข ์ ์ ์ง์์ ๊ผญ ํ์ธํด์ฃผ์ธ์!
- HTML, CSS, JS ๋ฐ Vue.js์ ๊ธฐ์ด๋ฅผ ์๊ณ ๊ณ์
์ผ ํจ์จ์ ์ผ๋ก ํ์ตํ์ค ์ ์์ต๋๋ค.
ํ์ตํ ๋ด์ฉ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๐
Vue.js ์ค๊ธ ๊ฐ์ข ๋ก ์ค์ ์๋น์ค๋ฅผ ๊ฐ๋ฐํ ๋ ํ์ํ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ํ๋ก์ ํธ ๊ตฌ์กฐํ ๋ฐฉ๋ฒ๊ณผ ์ปดํฌ๋ํธ ์ค๊ณ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๊ณ , Vue.js ์ฝ๋๋ฅผ ๊ฐํธํ๊ฒ ์งค ์ ์๋ ES6์ ์ฃผ์ ํน์ง๋ค์ ๋ํด์ ์ดํด๋ด
๋๋ค. ์ค๋ฌด์์ ํ์ฐ์ ์ผ๋ก ์ฌ์ฉํ๊ฒ ๋๋ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ Vuex ๋ํ ์ฌ๋ ์๊ฒ ํ์ตํฉ๋๋ค.
- ๋ทฐ ์ต์ CLI ๋๊ตฌ ํน์ง
- ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ์น ์ฑ ์ค๊ณ ๋ฐฉ๋ฒ
- ์ปดํฌ๋ํธ ์ค๊ณ ๋ฐฉ๋ฒ
- ES6 (const & let, ํ์ดํ ํจ์, ํฅ์๋ ๊ฐ์ฒด ๋ฆฌํฐ๋ด, ๋ชจ๋ ๋ฑ)
- Vuex (state, getters, mutations, actions, modules ๋ฑ)
๊ฐ์์ ํน์ง์ ์๊ฐํด์ ๐
Cracking Vue.js ์ฌ์ดํธ ๋ฐ๋ก ๊ฐ๊ธฐ
- ์ ๋ฐ๋ถ๋ ๋ณ๋์ ์ด๋ก ์ค๋ช
์์ด ๋ฐ๋ก ์ ํ๋ฆฌ์ผ์ด์
์ ์ค๊ณํ๊ณ ๊ตฌํํ๋ฉด์ Vue.js ํ๋ฉด ๊ฐ๋ฐ์ ๊ฐ์ ์ก๊ฒ๋ฉ๋๋ค.
- ์ดํ์๋ ์ ์ํ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ฌธ์ ์ ์ ์ดํด๋ณด๋ฉฐ ์ฝ๋ ๋ฆฌํฉํ ๋ง์ ํตํด ์ ํ๋ฆฌ์ผ์ด์
๊ตฌ์กฐ๋ฅผ ๊ฐ์ ํฉ๋๋ค.
- ์ค๋ฐ๋ถ๋ ES6์ Vuex์ ๊ฐ๋
์ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ํ์
ํ์ค ์ ์๋๋ก ์ด๋ก ์ค๋ช
-> ์ค๋น๋ ์์ ๋ก ์ค์ต -> ์ ํ๋ฆฌ์ผ์ด์
์ ์ ์ฉํ๋ฉฐ ๋ฆฌํฉํ ๋ง ํํ๋ก ๊ฐ์๋ฅผ ์งํํฉ๋๋ค.
์ฐ๊ด ๋ก๋๋งต ๐

์ง์๊ณต์ ์ ์๊ฐ ๐จโ๐ซ
์ฅ๊ธฐํจ (์บกํดํ๊ต)
"์ธํ๋ฐ์ด ๋ง๋ ์ฌ๋" ์ธํฐ๋ทฐ
โ๊ฐ์ ์์ต์ผ๋ก Vue.js ์คํ์์ค +
์ํ์ฝ๋ฉ์ ํ์ํฉ๋๋ค ๐โ
๊ฐ์ ํ ์ธ์ ์ ๊ณตํฉ๋๋ค!
์๋ฆฌ์ฆ "Vue.js๋ก ์์ฑํ๋ ํ๋ก ํธ์๋
๊ฐ๋ฐ์ ๋ก๋๋งต" 25% ํ ์ธ (ํด๋ฆญ)
์์
์ด ์๋ ์คยท๊ณ ๋ฑํ์,
๋ํ์์ ์ํ ํ์ 50% ํ ์ธ (ํด๋ฆญ)