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

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

(4.9) ์ˆ˜๊ฐ•ํ‰ 100๊ฐœ

์ˆ˜๊ฐ•์ƒ 963๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

LG์œ ํ”Œ๋Ÿฌ์Šค
์‚ผ์„ฑ
๋„ฅ์Šจ์ฝ”๋ฆฌ์•„
kb๋ฐ์ดํƒ€์‹œ์Šคํ…œ
SK๊ทธ๋ฃน

SK๊ทธ๋ฃน

์ž„์ง์›๋“ค๋„ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์žˆ์–ด์š”!

LG์œ ํ”Œ๋Ÿฌ์Šค
์‚ผ์„ฑ
๋„ฅ์Šจ์ฝ”๋ฆฌ์•„
kb๋ฐ์ดํƒ€์‹œ์Šคํ…œ
SK๊ทธ๋ฃน

SK๊ทธ๋ฃน

์ž„์ง์›๋“ค๋„ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์žˆ์–ด์š”!

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

4.9

5.0

ํ™ฉ์ง€ํ™˜ Hwang

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ์กฐ๊ทผ์กฐ๊ทผ ์„ค๋ช… ์ž˜ ํ•ด ์ฃผ์‹œ๋„ค์š”. ์ตœ์‹ ๋ฒ„์ ผ Vue3๋กœ ๋ฌด์–ธ๊ฐ€ ์‹œ์ž‘ํ•˜๋Š”๋ฐ ํฐ ๋„์›€ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ๊ณ ๋ง™์Šต๋‹ˆ๋‹ค.

5.0

์ฟ ์ฟ ์ผ€์ผ€

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

์ข‹์•„์š”๐Ÿ‘๐Ÿ‘

5.0

Duru

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

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 & 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,314

๋ช…

์ˆ˜๊ฐ•์ƒ

136

๊ฐœ

์ˆ˜๊ฐ•ํ‰

95

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

88๊ฐœ โˆ™ (9์‹œ๊ฐ„ 30๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

100๊ฐœ

4.9

100๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • Duru๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    Duru

    ์ˆ˜๊ฐ•ํ‰ 2

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    Vue.js 3์˜ ๊ธฐ๋ณธ์ ์ธ ๊ตฌ์กฐ์™€ ํšจ์œจ์ ์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์„œ ์ •๋ง ์ข‹์•˜์Šต๋‹ˆ๋‹ค.

    • ์ด๊ธฐ์ •๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      ์ด๊ธฐ์ •

      ์ˆ˜๊ฐ•ํ‰ 2

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ์ข‹์Šต๋‹ˆ๋‹ค!

      • ํ™ฉ์ง€ํ™˜ Hwang๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        ํ™ฉ์ง€ํ™˜ Hwang

        ์ˆ˜๊ฐ•ํ‰ 1

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        ๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ์กฐ๊ทผ์กฐ๊ทผ ์„ค๋ช… ์ž˜ ํ•ด ์ฃผ์‹œ๋„ค์š”. ์ตœ์‹ ๋ฒ„์ ผ Vue3๋กœ ๋ฌด์–ธ๊ฐ€ ์‹œ์ž‘ํ•˜๋Š”๋ฐ ํฐ ๋„์›€ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ๊ณ ๋ง™์Šต๋‹ˆ๋‹ค.

        • ์ฝ”์ง€ ์ฝ”๋”
          ์ง€์‹๊ณต์œ ์ž

          ํ™ฉ์ง€ํ™˜๋‹˜ ์ˆ˜๊ฐ•ํ‰ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ^^

      • WellBakedToast๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        WellBakedToast

        ์ˆ˜๊ฐ•ํ‰ 1

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        ๋”ฑ ์ข‹์€ ๊ฐ•์˜์˜€์Šต๋‹ˆ๋‹ค! ์ค‘๊ธ‰ํŽธ๋„ ์ œ์ž‘ํ•ด์ฃผ์„ธ์š”~

        • ์ฟ ์ฟ ์ผ€์ผ€๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          ์ฟ ์ฟ ์ผ€์ผ€

          ์ˆ˜๊ฐ•ํ‰ 1

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          ์ข‹์•„์š”๐Ÿ‘๐Ÿ‘

          ๋น„์Šทํ•œ ๊ฐ•์˜

          ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!