๐Ÿ™‹ ๊ฐœ๋ฐœ์ž ํ–‰์‚ฌ. FE CONF 2021-1. โŸชCan I use ... Vue 3?โŸซ

[meษช]ยท2021๋…„ 10์›” 26์ผ
0

4. Tech Conferences

๋ชฉ๋ก ๋ณด๊ธฐ
2/6

๐Ÿ“Œ ๊ฐœ๋ฐœ ๊ณต๋ถ€ 3๊ฐœ์›” ์ฐจ์ธ to-be ๊ฐœ๋ฐœ์ž์˜ ์ž์Šต blog๐Ÿ™‚๏พ Oct 24 ~ 30, 2021


์ด ๋ฐœํ‘œ๋ฅผ ๋ณธ ์ด์œ 

๋‚ด๊ฐ€ ์˜ˆ์ „์— ๊ฐ€๊ณ  ์‹ถ์—ˆ๋˜ ํšŒ์‚ฌ๊ฐ€ Vue๋กœ ๊ฐœ๋ฐœํ•˜๋Š” ์‚ฌ๋žŒ์„ ๋ชจ์ง‘ํ•ด์„œ ์ด ํšŒ์‚ฌ์— ์ง€์›ํ•˜๋ ค๋ฉด ๊ผญ Vue๋ฅผ ๋ฐฐ์›Œ์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์•„์ง ์‚ฌ์šฉ์ž๊ฐ€ ์ ์–ด์„œ ๊ทธ๋ ‡์ง€ Vue๊ฐ€ React๋ณด๋‹ค ์ฒด๊ณ„์ ์ธ ๋ฉด์ด ์žˆ๋‹ค๋Š” ์ด์•ผ๊ธฐ๋ฅผ ์‹ฌ์‹ฌ์น˜ ์•Š๊ฒŒ ๋“ฃ๊ธฐ๋„ ํ•ด์„œ ์ฃผ์ œ๋ฅผ ๋ณด์ž๋งˆ์ž ์ด session์— ๊ด€์‹ฌ์ด ๊ฐ”๋‹ค.

์ด ๋ฐœํ‘œ๋Š” Vue์˜ ์ตœ์‹  version์ธ Vue 3 (One Piece) ์— ๊ด€ํ•œ ์ด์•ผ๊ธฐ์˜€๋‹ค. update ๋‚ด์šฉ ์ค‘ ์˜ˆ๋ฅผ ๋“ค์–ด Vue 3๊ฐ€ TypeScript์™€์˜ ํ˜ธํ™˜์„ฑ์„ ๋” ๋†’์˜€๋‹ค๊ณ  ํ•˜๋Š”๋ฐ ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•˜๋ฉด ์–ด๋–ค ์žฅ์ ๊ณผ ์ฃผ์˜ํ•  ์ ์ด ์žˆ๋Š”์ง€ ์‹ค๋ฌด์ž๋กœ์„œ ์‚ฌ์šฉ ๊ฒฝํ—˜์„ ๊ณต์œ ํ•˜๋Š” ์ž๋ฆฌ์˜€๋‹ค.

๋‚œ ์•„์ง ์ •์‹์œผ๋กœ Vue๋ฅผ ๋ฐฐ์›Œ๋ณธ ์ ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ง€๊ธˆ์˜ ๋‚ด ์ƒํ™ฉ๊ณผ ๋”ฑ ๋งž๋Š” ์ฃผ์ œ๊ฐ€ ์•„๋‹ ์ˆ˜๋„ ์žˆ์ง€๋งŒ ์–ธ์  ๊ฐ€ ๋ฐฐ์šธ Vue์— ์ฒซ์ธ์ƒ์„ ๊ฐ€์ ธ๋ณผ ๊ฒธ session์— ์ฐธ์„ํ–ˆ๋‹ค.


/ / BROADEN YOUR EXPERIENCE / /

๋ฐœํ‘œ ๋“ค์œผ๋ฉด์„œ ํ•œ memo

  • ์ฃผ์ œ : Can I use ... Vue 3? ์‹ค๋ฌด์ž๊ฐ€ ๋ฐ”๋ผ๋ณธ Vue 3
  • ๋ฐœํ‘œ : ์žฅ๊ธฐํšจ ๋‹˜
  • ์˜์ƒ : link
  • " Vue 2์—์„œ๋„ Vue 3์˜ ์žฅ์ ์ธ ํ™•์žฅ๋œ Composition API์™€ ์ตœ์ ํ™”๋œ TypeScript๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์•„์ง์€ Vue 2๋กœ Vue.js ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐ์— ๋ฌธ์ œ ์—†์Œ "

    ์ž…๋ฌธ์ž ์ž…์žฅ

    Vue์—์„œ๋„ ์ž˜ ๊ฐ€ IE...๐Ÿ‘‹
    IE๋ฅผ ํฌํ•จํ•œ cross browsing์€ Vue 2๋กœ ๊ฐœ๋ฐœํ•ด์•ผ ํ•จ

    ์ž…๋ฌธ์ž๋Š” ๋‹น์žฅ ๋ฐฐ์›Œ์„œ ์“ธ ์ˆ˜ ์žˆ๋Š” Vue 2๋กœ ์‹œ์ž‘ํ•  ๊ฒƒ์„ ์ถ”์ฒœ
    ์™œ๋ƒํ•˜๋ฉด ์•„์ง Vue2 ์‚ฌ์šฉ์ž๊ฐ€ Vue 3 ์‚ฌ์šฉ์ž์˜ 19๋ฐฐ ๋งŽ๊ณ  (2021๋…„ 9์›” ๊ธฐ์ค€), Vue School์—์„œ๋„ 2021๋…„์—๋Š” Vue 2๋ฅผ service์— ์“ธ ๊ฒƒ์„ ๊ถŒ๊ณ ํ•˜๊ธฐ ๋•Œ๋ฌธ

    ์‹ค๋ฌด์ž ์ž…์žฅ

    ํ˜„์—…์—์„œ ๋‹น์žฅ Vue 2๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋Š” ์–ด๋ ต๊ฒ ์ง€๋งŒ Vue 2์—์„œ๋„ composition API๋ฅผ ์‚ฌ์šฉํ•ด ๋ด…์‹œ๋‹ค!
    Vue.extend๋กœ ํ•ด๋‘๋ฉด TypeScript๋กœ migration ํ•˜๊ธฐ ์‰ฌ์šฐ๋‹ˆ๊นŒ class ๋ฌธ๋ฒ•๋ณด๋‹ค๋Š”Vue.extend ๋ฌธ๋ฒ•์œผ๋กœ code ์งญ์‹œ๋‹ค.
    core์™€ community library ์ƒํƒœ๊ณ„๊ฐ€ ์ถฉ๋ถ„ํžˆ ์„ฑ์ˆ™ํ•ด์ง€๋ฉด, IE ์ง€์›์ด ๋๋‚˜๋ฉด ์ ์ฐจ Vue 3๋ฅผ ์‚ฌ์šฉํ•ฉ์‹œ๋‹ค.
    e.g.Vuetify

    ์†Œ๊ฐ

    ๋‚ด๊ฐ€ ๊ฐœ๋ฐœ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ํ•˜๊ณ  ์‹ถ์€ ๊ฒŒ ๋ชฉ์ฐจ๋Œ€๋กœ ์ฐจ๊ณก์ฐจ๊ณก ์ •๋ฆฌํ•˜๋ฉฐ ๊ฐœ๋…์„ ์ดํ•ดํ•˜๋Š” ๊ฑด๋ฐ ์บกํ‹ดํŒ๊ต ๋‹˜์˜ ๊ฒŒ์‹œ๊ธ€์„ ๋ณด๋ฉด Front-end ๊ด€๋ จํ•œ ๋ฐฉ๋Œ€ํ•œ ์ง€์‹์„ ๊ต๊ณผ์„œ์ฒ˜๋Ÿผ ์ •๋ฆฌํ•ด ๋‘์…จ๋‹ค. ์—„์ฒญ๋‚œ ๋‚ด๊ณต์ด ๋Š๊ปด์ง„๋‹ค... ์‹ค๋ฌด ๊ฒฝํ—˜๋„ ํ’๋ถ€ํ•˜๊ณ  ๊ฐ•์—ฐ๋„ ๋งŽ์ด ํ•˜์‹œ๋‹ˆ๊นŒ ์ด๋ ‡๊ฒŒ ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์ด ๋‚˜์™”์„ ๋•Œ ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์ข‹์„์ง€ ๋ฐฉํ–ฅ์„ ์žก์„ ์ˆ˜ ์žˆ๋Š” ๊ฑฐ๊ฒ ์ง€? ๋Œ€๋‹จํ•˜๋‹ค!

    ๋‚œ ์•„์ง ํ˜„์—…์—์„œ์˜ ๊ฐœ๋ฐœ ๊ฒฝํ—˜๋„ ์—†๊ณ  React๊นŒ์ง€๋ฐ–์— ์•ˆ ํ•ด๋ดค๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ•์—ฐ์ž ๋‹˜์ด ์‹ค๋ฌด์ž๋กœ์„œ ํ•ด์ฃผ์‹  ์กฐ์–ธ์€ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ์ง€ ์•Š์•˜์ง€๋งŒ, ์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•ด ํ•ด์ฃผ์‹  ์กฐ์–ธ์„ ๋ฐ”ํƒ•์œผ๋กœ ์–ผ๋ฅธ Vue๋„ ๋ฐฐ์›Œ๋ด์•ผ๊ฒ ๋‹ค. :)

    FE CONF 2021

    ๋ฐœํ‘œ์ž lineup
    ๊ณต์‹ YouTube

    profile
    ๋Š๋ ค๋„ ํ•  ๊ฑฐ์•ผ.......

    0๊ฐœ์˜ ๋Œ“๊ธ€