Vue.js ํต์ฌ ์๋ฆฌ + ์ต์ Vue 3 ํน์ง,
๊ฐ์ ํ๋๋ก ์๊ธฐ ์ฝ๊ฒ ์ ํด๋๋ฆฝ๋๋ค!

Vue.js์ ์ฐจ์ธ๋ ํ์ค์ผ๋ก ์๋ฆฌ์ก์
์ต์ Vue 3 ์์ํ๊ธฐ

8,250๋ช
์ด์์ด ์ ํํ "Vue.js ์์ํ๊ธฐ - Age of Vue.js"๊ฐ ํ์ Vue 3 ์ต์ ๊ฐ์๋ก ๋์์์ต๋๋ค! ๐ ์ด๋ฒ "Vue 3 ์์ํ๊ธฐ" ๊ฐ์๋ ํ๋ฐํธ์๋ ๊ฐ๋ฐ ํ๋ ์์ํฌ Vue.js๋ฅผ ์ฒ์ ์์ํ๋ ๋ถ, ๊ทธ๋ฆฌ๊ณ ์์ง Vue.js๊ฐ ์ต์ํ์ง ์์ ๋ถ๋ค์ ๋์์ผ๋ก Vue.js ์
๋ฌธ ๊ด์ ์์ ์ ์๋ ๊ฐ์์
๋๋ค.
์ง๊ธ, ์ Vue 3์ผ๊น์?

ํธ๋ฆฌํ ์ปดํฌ๋ํธ ์ฝ๋(Component Code) ์ฌ์ฌ์ฉ

๊ฐ๋ ฅํ ํ์
์คํฌ๋ฆฝํธ(TypeScript) ์ง์

ํ
ํ๋ฆฟ ํํ์(expression) ๊ด๋ จ ์ถ๊ฐ ๋ฌธ๋ฒ ์ ๊ณต

๊ธฐํ ์๋ก์ด ๋ฌธ๋ฒ ์ง์
(Composition API, Reacitivty ์ฃผ์
API...)
์ต์ Vue 3๋ก ํ๋ก์ ํธ๋ฅผ ์์ํ์๋ ๋ถ๋ค์ด์ ๊ฐ์? Vue.js์ ๋์ ์๋ฆฌ๋ฅผ ์ ํํ ์ดํดํ๊ณ ์ถ์ผ์ ๊ฐ์? ์ด๋ฒ ๊ฐ์๋ฅผ ํตํด ๊ธฐ์กด Vue 2์ Vue 3์ ์ฐจ์ด๋ฅผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ด๋ถ ๊ตฌํ ๊ด์ ๋ฐ ๋ฌธ๋ฒ์ ์ธ ํน์ง์ ์ค์ฌ์ผ๋ก ์ฐจ๊ทผ์ฐจ๊ทผ ํ์ตํด ๋ณด์ธ์!
์ด๋ฐ ๋ถ๋ค๊ป
์ถ์ฒํฉ๋๋ค.
Vue 3๋ก ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์์ํ๋ FE ์
๋ฌธ์
Vue 2์์ Vue 3์ผ๋ก ๋ฒ์ ์
์ ํด์ผ ํ๋ ๊ฐ๋ฐ์
Vue.js 3 ํ๋ก์ ํธ๋ฅผ ์ฒ์ ์์ํ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
Vue.js์ ๋จ์ ๊ฐ๋
๋์ ๋์ ์๋ฆฌ๋ถํฐ ์ ํํ ์ดํดํ๊ณ ์ถ์ ๋ถ
๊ทธ๋์, Vue.js์ ๊ธฐ๋ณธ์ ํผํผํ๊ฒ ๋ค์ง ์ ์์ต๋๋ค!
- โ
Vue.js์ ์ฃผ์ ๊ฐ๋
๊ณผ ๋ฌธ๋ฒ์ด ๋ฌด์์ธ์ง ์๊ฒ ๋ฉ๋๋ค.
- โ
Vue.js์ ๋ด๋ถ ๋์ ์๋ฆฌ๋ฅผ ์ง์ ๊ตฌํํด ๋ณด๋ฉด์ Vue.js์ ์ฒ ํ์ ์ดํดํฉ๋๋ค.
- โ
HTTP, ๋คํธ์ํฌ, ์๋ฒ ๋ฑ ์ค๋ฌด ๊ฐ๋ฐ์๊ฐ ์์์ผ ํ๋ ์ง์์ ๋ํด ๊ฐ์ ์ก๊ฒ ๋ฉ๋๋ค.
์ด ๊ฐ์๋ฅผ ๋ง๋ ์ฌ๋ ๐จโ๐ซ
์ฅ๊ธฐํจ (์บกํดํ๊ต)
"์ธํ๋ฐ์ด ๋ง๋ ์ฌ๋" ์ธํฐ๋ทฐ
ํจ๊ป ๋ณด๋ฉด ์ข์ ๊ฐ์

Q&A ๐ฌ
Q. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ต์ํ์ง ์์๋ฐ ๋ค์ด๋ ๋ ๊น์?
์ด ๊ฐ์๋ ๊ธฐ๋ณธ์ ์ธ HTML, CSS, ์๋ฐ์คํฌ๋ฆฝํธ ์ง์์ด ์๋ ๋ถ๋ค์ด ๋ฃ๊ธฐ ์ข์ต๋๋ค. ํนํ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ณ์, ํจ์, ์ ์ด๋ฌธ, ๊ฐ์ฒด ๋ฑ์ ๋ํด์ ๋ชจ๋ฅด์๋ ๋ถ๋ค์ ๋จผ์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ์ด ์ง์์ ํ์ตํ ํ ์๊ฐํ์๋ ๊ฒ์ ์ถ์ฒ๋๋ฆฝ๋๋ค.
Q. ๊ธฐ์กด Vue.js ์์ํ๊ธฐ ๊ฐ์์๋ ์ด๋ป๊ฒ ๋ค๋ฅธ๊ฐ์?
๊ธฐ์กด Vue.js ์์ํ๊ธฐ ๊ฐ์๋ ํ์ฌ ์ค๋ฌด์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๊ณ ์๋ Vue.js 2 ๋ฒ์ ์ ๊ธฐ์ค์ผ๋ก ์ ์๋ ๊ฐ์์
๋๋ค. ์ด๋ฒ Vue 3 ์์ํ๊ธฐ ๊ฐ์๋ Vue 3๋ก ํ๋ก์ ํธ๋ฅผ ์์ํ์๋ ๋ถ๋ค๊ณผ Vue 2 ์์ํ๊ธฐ ๊ฐ์๋ก๋ ์์
์ ๋ฐ๋ผํ๊ธฐ ํ๋ ๋ถ๋ค์ ์ํด ์
๋ฌธ์ ๊ด์ ์์ ์ ์๋ ๊ฐ์์
๋๋ค :)
Q. ๊ธฐ์กด Vue.js ์์ํ๊ธฐ ๊ฐ์๋ฅผ ๋ค์๋๋ฐ ์ด๋ฒ ๊ฐ์๋ฅผ ๋ ๋ค์ด์ผ ํ ๊น์?
์ด๋ฏธ ์ค๋ฌด์์ Vue.js๋ก ์ฌ๋ฌ ๋ฒ ์๋น์ค๋ฅผ ๋ง๋ค์ด๋ณด๊ณ ์ปดํฌ๋ํธ ์ค๊ณ, ๋ฆฌ์กํฐ๋นํฐ์ ์๋ฆฌ, ๋ณต์กํ ์ํ ๊ด๋ฆฌ๋ฅผ ํด๋ณด์ ๋ถ์ด๋ผ๋ฉด ์ถ์ฒํ์ง ์์ต๋๋ค. ์๋ํ๋ฉด ๊ทธ ๋ถ๋ค์ Vue 3 ๊ณต์ ๋ฌธ์๋ฅผ ์กฐ๊ธ๋ง ์ฝ์ด๋ ๊ธ๋ฐฉ ์ฐจ์ด์ ์ ์ดํดํ์ค ์ ์์ ํ
๋๊น์ :) ์ด๋ฐ ๋ถ๋ค๊ป๋ Vue 3 ์ค๊ธ - Composition API ๊ฐ์๋ฅผ ์ถ์ฒ๋๋ฆฝ๋๋ค.
๋ฐ๋ฉด Vue.js๊ฐ ์์ง ์ต์ํ์ง ์๊ณ Vue 3 ํ๋ก์ ํธ๋ฅผ ์์ํด์ผ ํ๋ ๋ถ๋ค์ด๋ผ๋ฉด ์ด ๊ฐ์๋ ๊ผญ ๋ค์ด๋ณด์๋ ๊ฑธ ์ถ์ฒํฉ๋๋ค. Vue 2์ Vue 3์ ์ฐจ์ด์ ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ด๋ถ ๊ตฌํ ๊ด์ ๊ณผ ๋ฌธ๋ฒ์ ์ธ ํน์ง ๋ฑ ์ ๋ฐ์ ์ผ๋ก Vue 3๋ฅผ ๊ฐ๋ฐํ ๋ ๊ธฐ์กด ๋ฒ์ ๊ณผ ๋น๊ตํด์ ์ด๋ค๊ฒ ๋ฌ๋ผ์ก๋์ง ๊ฐ์ ์ค๊ฐ์ค๊ฐ ์ค๋ช
ํด๋๋ฆฝ๋๋ค :)
Q. ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋๋ฉด ๋ค์ ๊ฐ์๋ ๋ฌด์์ ๋ค์ด์ผ ํ ๊น์?
Vue.js ํ์ต ๋ก๋๋งต์ ๋ฐ๋ผ์ ์๊ฐํ์๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค. ์ด๋ฒ ๊ฐ์์์๋ ์ ์ ์๋ฏ์ด ๊ธฐ์กด Vue 2์ ๋ด์ฉ์ด ๊ฑฐ์ ๊ทธ๋๋ก Vue 3์์ ํ์ฉ๋ฉ๋๋ค. ๋ฐ๋ผ์, ๊ธฐ์กด ํ์ต ๋ก๋๋งต์ ๋ด์ฉ์ ์ถฉ์คํ ๋ฐ๋ผ๊ฐ๋ค๋ฉด ๋ Vue.js ์๋ จ๋๋ฅผ ๋์ธ ํ๋ฐํธ์๋ ๊ฐ๋ฐ์๊ฐ ๋์ค ์ ์์ ๊ฒ๋๋ค :)
Vue 3 ํ์ ๊ฐ์๋ ํ์ฌ ์ค๋น ์ค์ ์์ต๋๋ค. ์๋ก์ด ์ฝ๋ ์์ฑ ๋ฐฉ์๊ณผ ์ํ๊ณ๋ฅผ ์ด๋ป๊ฒ ํ์ฉํ ์ ์์์ง ํ์ ๊ฐ์์์ ๋ฐฐ์ฐ์ค ์ ์์ ๊ฑฐ์์. ๋น ๋ฅด๋ฉด 11์ ๋ฆ์ด๋ ์ฐ๋ง๊น์ง ์ ์๋ ์์ ์
๋๋ค :)
ํ์ ๊ฐ์๊ฐ ์ถ์๋์์ต๋๋ค. Vue 3 ์ค๊ธ - Composition API ๊ฐ์ ๋ณด๋ฌ ๊ฐ๊ธฐ
โ๊ฐ์ ์์ต์ผ๋ก Vue.js ์คํ์์ค ์ํ๊ณ๋ฅผ ํ์ํฉ๋๋ค ๐โ