๊ธฐ๋ณธํธ์ผ๋ก Vue.js 3๋ฅผ ์ฝ๊ฒ ์์๋ค๋ฉด
์ด๋ฒ์ ์ค์ ํธ์ผ๋ก ์์ธํ, ๊น๊ฒ ๋ฐฐ์๋ด์! ๐ต
์ต์ Vue 3 ์๋ฒฝ ๊ฐ์ด๋ ๋ก ์นญ ๐ค
Vue3 ์๋ฒฝ ๋ง์คํฐ: ๊ธฐ๋ณธํธ ๋๋ ์ค์ ํธ ๋ ์ค ํ๋๋ผ๋ ์๊ฐํ์
จ๋ค๋ฉด
"์ต์ Vue 3 ์๋ฒฝ ๊ฐ์ด๋" ๊ฐ์๋ฅผ ๋ฌด๋ฃ๋ก ๋ณผ ์ ์์ต๋๋ค.
์ง์ฝ๋ฉ๋ง์ ๋ฐฉ์์ผ๋ก
์ฝ๊ฒ ์๋ ค๋๋ฆฝ๋๋ค ๐ฅด
![1_create.gif](https://cdn.inflearn.com/public/files/courses/329012/46459c52-d6af-4a15-a7ce-3df7a1ea2688/1_create.gif)
๋ณธ ๊ฐ์ข๋ Vue.js 3๋ก ์น ์ ํ๋ฆฌ์ผ์ด์
์ ์ํ ๋ง๋ค๊ธฐ ๊ฐ์ข๋ก,
์๋กญ๊ฒ ๋ฑ์ฅํ Composition API๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ์๋ฅผ ์งํํฉ๋๋ค.
๊ณต์๋ฌธ์๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์์์ผํ๋ ๋ด์ฉ์ ๋น ์ง์์ด ๋ค๋ฃจ๋ฉด์๋
์ฝ๊ณ , ์์ธํ๊ณ , ๊น๊ฒ ๋ด์ฉ์ ๋ค๋ฃน๋๋ค.
๋ ํธ์ผ๋ก ๋๋์ด์ง
๊ฐ์๋ฅผ ์๊ฐํด์ โ
์ฒ์ ๊ฐ์ ๊ธฐํ ์ ํ๋์ ๊ฐ์๋ก ์ ์ํ๋ ค ํ์ผ๋
- ๊ณต์๋ฌธ์์ ์๋ ๊ผญ ์ตํ์ผ ํ Vue.js 3 ์คํ์ ๋น ์ง์์ด ๋ฃ์ด ์ปค๋ฆฌํ๋ผ์ ๊ตฌ์ฑํ๊ณ ์ถ์๊ณ
- Vue.js 3์ ๋จ์ํ ๋ฌธ๋ฒ๋ง ์๋ ค๋๋ฆฌ๋ ๊ฒ๋ณด๋ค ์ต๋ํ ์ต์ํด์ง๋๋ก ๋ค์ํ ๋ด์ฉ์ผ๋ก ๊ตฌ์ฑํ๊ณ ์ถ์์ต๋๋ค.
- Vue 3์ด Composition API ๊ธฐ๋ฐ์ผ๋ก ๋ฑ์ฅํ๋ฉด์ ํต์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊น์ง ๋ค๋ฃจ๊ณ ์ถ์๊ณ
- ์ด๋ฏธ Vue 3๋ฅผ ์๊ณ ๊ณ์ ๋ถ๋ค๋ ์ค์ ํธ์ ๊ฐ์ ๋ด์ฉ์ ํฉ๋ฆฌ์ ์ผ๋ก ์๊ฐํ ์ ์๋๋ก,
๋ ๊ฐ์ ๊ฐ์๋ก ๋๋์ด ์ ์ํ๊ฒ ๋์์ต๋๋ค.
๊ทธ๋์,
์ค์ ํธ์์๋์ ๐โโ๏ธ
Vue.js 3์ผ๋ก ์ค์ ๊ฒ์ํ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด๋ณด๋ ๊ฐ์์
๋๋ค. ์ต์ ํธ๋ ๋ํ ๋ด์ฉ์ผ๋ก ๊ตฌ์ฑํ์์ผ๋ฉฐ, ๊ฐ์๋ด์ฉ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- VueRouter v4 (Composition API ๊ธฐ๋ฐ)
- Axios HTTP API ํต์
- ๊ณตํต ์ปดํฌ๋ํธ ๋ถ๋ฆฌ
- Vue.js ๋ด์ฅ ์ปดํฌ๋ํธ
- Vite ๊ธฐ๋ฐ ํ๊ฒฝ ๋ณ์ ์ค์ (env)
- Global Component, Custom directive, ๊ณตํต ๋ชจ๋ ๋ฑ ํ๋ฌ๊ทธ์ธ ์ค์น
- Vue.js3 ๊ฝ, Composable ํจ์
- toRef, toRefs ํํ์ ์ดํดํ๊ธฐ!
- Vue.js ๊ณต์ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ Pinia!
- Vue Router ์ฌํ: ๋ค์ด๊ฒ์ด์
๊ฐ๋
Bootstrap UI Framework ๐ป
๋ณด๋์ค๋ก ๋ณธ ๊ฐ์์์๋ Bootstrap์ ์ฌ์ฉํ๋ฉฐ ๊ณต์๋ฌธ์์์ ์ํ๋ ์ปดํฌ๋ํธ๋ฅผ ์ฐพ์ ์ฌ์ฉํ๋ ๊ฒ์ ์ง์ ๋ณด์ฌ๋๋ฆฝ๋๋ค. ์ด๋ฌํ ๊ณผ์ ์ ํตํด ์์ฐ์ค๋ฝ๊ฒ ๋ถํธ์คํธ๋ฉ ์ฌ์ฉ๋ฒ์ ๋ณด๋์ค๋ก ์ป์ด๊ฐ์ค ์ ์์ด์ :)
์์ ์ง๋ฌธ Q&A ๐ฌ
Q. ์น ๊ฐ๋ฐ ์ง์์ด ์๋ ์ํ์์ ์น ์๋น์ค๋ฅผ ๋ง๋ค๊ณ ์ถ์๋ฐ ์ด๋ป๊ฒ ํด์ผ ํ ๊น์?
์ด ๊ฐ์๋ HTML, CSS, JavaScript ๊ธฐ์ด๋ฅผ ์๊ณ ์๋ ์ํ์์ ์๊ฐํ๊ธฐ์ ์ ํฉํ ๊ฐ์ข์
๋๋ค.
- HTML / CSS ๊ฐ์ข Click!
- JavaScript ๊ฐ์ข ํด๋ฆญ Click!
- ํ๋ก ํธ์๋ ๋ ๊ฐ๋ฌ๊ธฐ Click!
Q. ๊ฐ์์์ค๊ฐ ์ ๊ณต๋๋์?
๊ฐ์์์ค๋ ๋ณธ ๊ฐ์๋ฅผ ์๊ฐํ์๋ฉด ๋ค์ด๋ก๋ ๋ฐ์ ์ ์์ผ๋ฉฐ, ๊ธฐ๋ณธํธ ์์ค๋ Github์์๋ ์ ๊ณต๋ฉ๋๋ค.
Q. Vue.js 2 ํน์ 3์ ์ฌ์ฉํ๊ณ ์๋๋ฐ, ๊ธฐ๋ณธํธ๋ ๋ค์ด์ผํ ๊น์?
- ๋ง์ฝ ํ์ฌ Vue.js 3 ๋ฌธ๋ฒ์ ์๊ณ ๊ณ์ ๋ค๋ฉด [์ค์ ํธ]์ ๊ถ์ฅ๋๋ฆฝ๋๋ค.
- ๋ง์ฝ ํ์ฌ Vue.js 2๋ฅผ ์ฌ์ฉํ๊ณ ๊ณ์ ๋ค๋ฉด [๊ธฐ๋ณธํธ], [์ค์ ํธ] ๋ชจ๋ ๊ถ์ฅ๋๋ฆฝ๋๋ค.
- Vue.js๋ฅผ ์ฒ์ ์ ํ์ ๋ค๋ฉด ๊ผญ [๊ธฐ๋ณธํธ], [์ค์ ํธ] ๋ชจ๋ ๋ณด๋๊ฒ์ ๊ฐ๋ ฅ ์ถ์ฒ๋๋ฆฝ๋๋ค.
- ๊ธฐํ ๊ฐ์ธ์ ์ธ ์ฐจ์ด๋ ์ปค๋ฆฌํ๋ผ์ ๊ผผ๊ผผํ ๋ณด์ ํ ๊ฒฐ์ ํ์๋ฉด ๋ ๊ฒ ๊ฐ์์. ๐
Q. ๊ฐ์ข๋ฅผ ์๊ฐํ ํ์๋ ์ด๋ค ๊ฒ์ ์ป์ด๊ฐ ์ ์์๊น์?
Vue.js 3๋ฟ๋ง ์๋๋ผ, Vue Router, Pinia์ ๊ฐ์ ํต์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
๋ณด๋์ค๋ก Bootstrap์ ๋ํ ์คํฌ๊น์ง ๊ฐ์ ธ๊ฐ์ค ์ ์์ต๋๋ค.
์ง์๊ณต์ ์๋ฅผ ์๊ฐํฉ๋๋ค โ๏ธ
![](https://cdn.inflearn.com/public/files/courses/326991/56111e69-4984-4943-8111-8e5d880b5b0a/แแ
ฒแแ
ฒแแ
ณแ
แ
ฉแแ
ฉ-002.png)
์ ํ๋ธ์ ์ธํ๋ฐ์์ "Vue&Vuetify Admin ์ฌ์ดํธ ๋ง๋ค๊ธฐ" ๊ฐ์๋ฅผ ๋ก ์นญํ์ผ๋ฉฐ ๋ง์ ๋ถ๋ค์ด ๋๋ฌด ๊ฐ์ฌํ๊ฒ๋ ์ข์ ํผ๋๋ฐฑ์ ์ฃผ์
จ์ต๋๋ค ๐
- [Vuetify Admin ์ฌ์ดํธ ๋ง๋ค๊ธฐ - "๊ธฐ๋ณธํธ"(๋ฌด๋ฃ)] ์ด ์๊ฐ์ 1,313๋ช
, ํ์ 4.9
- [Vuetify Admin ์ฌ์ดํธ ๋ง๋ค๊ธฐ - "์ค์ ํธ"(์ ๋ฃ)] ์ด ์๊ฐ์ 441๋ช
, ํ์ 5.0
์ง๋ 2021๋
๋ถํฐ Vue.js 3 ๊ฐ์๋ฅผ ์ํ์
จ๋ ๋ถ๋ค์ด ๊ณ์
จ์ด์! ๊ทธ๋ฆฌ๊ณ ์ ๋ํ Vuetify๋ฅผ ๊ฐ์ ์ง๋ฌธ ์ค Vue.js๋ NPM, Webpack๊ณผ ๊ฐ์ ํ๋ก ํธ์๋ ๊ด๋ จ ์ง์์ ์์ง ์ ๋ชจ๋ฅด์๋ ๋ถ๋ค์ด ๋ง๋ค๋ ๊ฒ์ ๋๊ผ์ต๋๋ค. ๊ทธ๋์ ๊ฐ์๋ฅผ ์ฐ์ด์ผ์ง ์๊ฐ๋ง ํ๋ค, ์ด์ Vue.js 3๊ฐ ๊ณต์๋ฒ์ ์ผ๋ก ์๋ฆฌ์กํ ๊ฒ ๊ฐ์์ PPT์ ๊ต์ ๋ฑ ์ต์ ์ ๋คํด ์ค๋นํ์ต๋๋ค.
์ ๊ฐ ์ด์ํ๊ณ ์๋ ์ง์ฝ๋ฉ ์ ํ๋ธ ์ฑ๋์์๋ ํ๋ก ํธ์๋, ๋ฐฑ์๋๋ฟ๋ง ์๋๋ผ AWS ์ธํ๋ผ ์น ์๋น์ค๋ฅผ ๋ง๋ค๊ธฐ ์ ๋ฐ์ ์ธ ์ฝํ
์ธ ๋ก ๋ค๊ฐ์ฌ ์์ ์
๋๋ค.
๋ง์ ๊ด์ฌ๊ณผ ์ฌ๋ ๋ถํ๋๋ฆฝ๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
์ค์ฉ์ ์ธ ์ฝ๋ฉ์ปจํ
์ธ ๋ฅผ ๋ง๋ค์ด ๊ฐ๋ ์ ํ๋ธ ์ง์ฝ๋ฉ ์ฑ๋์
๋๋ค.
์ ํ๋ธ | ๊นํ | Gym์คํ๊ทธ๋จ | Coding์คํ๊ทธ๋จ