Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
BEST

ํ”„๋กœ์ ํŠธ๋กœ ๋ฐฐ์šฐ๋Š” Vue.js 3

Vue.js 3 ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ  ํ”„๋กœ์ ํŠธ์— ์ ์šฉ์„ ํ•˜๋ฉด์„œ ์ตํž ์ˆ˜ ์žˆ๋„๋ก ๋„์™€๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • 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 & A

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๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!