Vue.js 3 ์ฌ์ฉ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๊ณ ํ๋ก์ ํธ์ ์ ์ฉ์ ํ๋ฉด์ ์ตํ ์ ์๋๋ก ๋์๋๋ฆฝ๋๋ค.
Vue.js Composition API
์น์ฑ
Vue CLI๋ก ํ๋ก์ ํธ ์์ฑ ๋ฐฉ๋ฒ
Vue 3 ์๋ก์ด ๊ธฐ๋ฅ๋ค
Vue Router ์ฌ์ฉ ๋ฐฉ๋ฒ
Vuex ์ฌ์ฉ ๋ฐฉ๋ฒ
์ต์ Vue 3๋ก ๋ง๋๋,
์ฝ๊ณ ๊ฐ๋ ฅํ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ์
๋ฌธ!
์ธ๊ธฐ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ, Vue.js์
์ต์ ๋ฒ์ Vue 3์ ์ดํด๋ณด๊ณ ,
๋ด ์์ผ๋ก ์ง์ ์ ์ฉํ๋ฉฐ ์ค์ตํด๋ณด์ธ์!
์ธ๊ธฐ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ Vue.js์ ์ ๋ฌธ์ ๋์๋๋ฆฌ๋ ๊ธฐ์ด ๊ฐ์ข์ ๋๋ค. Vue.js 3์ ์๋กญ๊ฒ ์ถ๊ฐ๋ Composition API๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ ๋ฐ ๊ธฐ๋ณธ์ด ๋๋ ๊ธฐ๋ฅ์ ํ๋์ฉ ๋ฐฐ์ฐ๊ณ , ๋ฐ๋ก๋ฐ๋ก ํ๋ก์ ํธ์ ์ ์ฉํ๋ฉฐ ์ค์ตํฉ๋๋ค. ๊ฐ ์์์ ๋๋ถ๋ถ 10๋ถ ๋ฏธ๋ง์ ์งง์ ์์์ผ๋ก ๋ง๋ค์์ต๋๋ค.
Q. Vue.js๋ฅผ ์ ํ ๋ชฐ๋ผ๋ ๋ค์ด๋ ๋ ๊น์?
A. ๋ค! Vue.js ๊ธฐ์ด ๊ฐ์ข์ด๊ธฐ ๋๋ฌธ์ ๋ชจ๋ฅด์
๋ ๊ธฐ์ด๋ถํฐ ๋ฐฐ์ฐ์ค์ ์์ต๋๋ค. ์ด ๊ฐ์ข๊ฐ ๋๋ด์๋ฉด Vue.js๋ก ํ๋ก์ ํธ๋ฅผ ํผ์ ํ์ค ์ ๋์ ๊ธฐ๋ณธ์ ๋ฐฐ์ฐ๊ฒ ๋ฉ๋๋ค. ํ์ง๋ง HTML, CSS, Javascript (ES6+) ๊ธฐ์ด๋ ์์๋ ๋ถ์ด ๋ฃ๋๊ฑธ ์ถ์ฒ๋๋ฆฝ๋๋ค. ๊ฐ์ ์ค๊ฐ ์ค๊ฐ์ es6+ ๊ด๋ จ๋ ์ค๋ช
๋ ๋ค์ด์์ต๋๋ค. ๐
Q. ์ฝ์ง ์ฝ๋ ์ ํ๋ธ ์ฑ๋์์ vue.js 2 ๊ธฐ์ด ์ตํ๊ธฐ๋ฅผ ๋ค์๋๋ฐ ์ด ๊ฐ์ข์ ๋ง์ด ๋ค๋ฅธ๊ฐ์?
A. ์ ํ๋ธ์ ์ฌ๋ ค๋์ Vue.js 2 ๊ธฐ์ด ์ตํ๊ธฐ๋ ๊ธฐ์ด ๋ฌธ๋ฒ๋ง ๋ฐฐ์ฐ๊ณ ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํ๊ธฐ์ ์ฝ๊ฐ ์ ํ์ ์
๋๋ค. ์ด ๊ฐ์ข์์๋ Vue.js ๊ธฐ๋ฅ์ ๋ฐฐ์ฐ๊ณ ๊ทธ ๊ธฐ๋ฅ์ ํ๋ก์ ํธ์ ์ด๋ป๊ฒ ์ ์ฉํ๋์ง ์ค๋ช
ํด๋๋ฆฝ๋๋ค. ํนํ ์ด ๊ฐ์ข์์๋ Vue.js 3 ์ ๊ธฐ๋ฅ Composition Api๋ฅผ ์ด์ฉํด์ ํ๋ก์ ํธ๋ฅผ ์งํํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ํจ์ฌ ๋ ๋ํ
์ผ ํ ์ค๋ช
์ด ๋์ด ์๊ณ Single Page Application์ ๋ํ ์ ๋ฐ์ ์ธ ์ดํด๋ฅผ ๋์๋๋ฆฝ๋๋ค. ๐
Q. Composition Api๊ฐ ๋ฌด์์ธ๊ฐ์?
A. Vue.js 2์์๋ Options Api๋ฅผ ์ฌ์ฉํด์ ๊ฐ๋ฐ์ ํ๋๋ฐ ๊ท๋ชจ๊ฐ ํฐ ํ๋ก์ ํธ๋ฅผ ์งํํ ๋ ์ฝ๋์ ์ฌํ์ฉ์ ํ๋ ๊ฒ์ด ์ฝ์ง๊ฐ ์์์ต๋๋ค. ๊ทธ๋์ Vue.js 3์์๋ Composition Api๋ผ๋ ์๋ก์ด ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋์ด ๋ก์ง ์ฌ์ฌ์ฉ์ด ์ฉ์ดํด์ง๊ณ ์ฝ๋ ์ ์ง ๊ด๋ฆฌ๊ฐ ๋ ์ฌ์์ก์ต๋๋ค.๐
๊ฐ ์์์ด ๋๋ ๋์ ์์ค์ฝ๋๋ฅผ github์ ๋ธ๋์น๋ก ๋ง๋ค์ด ์ฌ๋ ค๋์์ต๋๋ค. ์๋ฌ๋ก ๋งํ์ ๋ github์์ ์์ค ์ฝ๋๋ฅผ ๋น๊ตํ์ค ์ ์์ด์ ๐ ์ฐพ๊ธฐ ์ฝ๋๋ก ์์ ์์ ๋ฒํธ๋ฅผ ๋ธ๋์น ์ด๋ฆ์ผ๋ก ์ฌ๋ ค๋์์ด์.
์ฝ์ง์ฝ๋ ๊นํ๋ธ (๋ฐ๋ก๊ฐ๊ธฐ)
์ฝ์ง ์ฝ๋
ํธ์ฃผ์์ ์น๊ฐ๋ฐ์๋ก ์ผํ๊ณ ์์ผ๋ฉฐ ์ ํ๋ธ โ์ฝ์ง ์ฝ๋โ ์ฑ๋์ ์ด์ ์ค์
๋๋ค.
์ ํ๋ธ ๋งํฌ: https://www.youtube.com/kossiecoder
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
Vue.js 3 ๊ธฐ์ด๋ฅผ ๋ฐฐ์ฐ๊ณ ์ถ์ผ์ ๋ถ
Vue.js๋ก ์น์ฑ์ ๋ง๋ค์ด ๋ณด๊ณ ์ถ์ผ์ ๋ถ
Composition Api๋ฅผ ์ฌ์ฉํด์ ๊ฐ๋ฐํ๊ณ ์ถ์ผ์ ๋ถ
Vue.js๋ฅผ ์ฒ์ ์ ํ์๋ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML
CSS
Javascript
1,235
๋ช
์๊ฐ์
124
๊ฐ
์๊ฐํ
95
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
2
๊ฐ
๊ฐ์
์ ์ฒด
88๊ฐ โ (9์๊ฐ 30๋ถ)
03 Vue ์ปดํฌ๋ํธ
03:31
04 Fragment
01:40
06 ์ด๋ฒคํธ
06:15
07 ref vs reactive
04:58
12 v-for
04:55
13 v-show vs v-if
09:32
18 emit
09:03
19 props
07:17
22 emits
03:07