๐Ÿ’ป VueJS ๋ผ์ดํ”„ ์‚ฌ์ดํด

waterglassesยท2022๋…„ 5์›” 8์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
21/50
post-thumbnail

์ด๋ฒˆ ์ฑ•ํ„ฐ๋Š” Vuejs์˜ ๋ผ์ดํ”„ ์‚ฌ์ดํด์— ๋Œ€ํ•ด ๋‹ค๋ฃจ์—ˆ์Šต๋‹ˆ๋‹ค.
โš ๏ธ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์€ ์˜คํƒ€๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿ“ƒ ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๊ฒƒ

์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ

createApp ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒˆ๋กœ์šด ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๊ณ  createApp์— ์ „๋‹ฌ๋œ ์˜ต์…˜์€ ๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋œ๋‹ค. ์ด ์ปดํฌ๋„ŒํŠธ๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ mountํ•  ๋•Œ, ๋ Œ๋”๋ง์˜ ์‹œ์ž‘์ ์œผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.

<div id="app">
</div>

์œ„์˜ ๊ตฌ์กฐ์—์„œ Vue ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งˆ์šดํŠธ ํ•˜๊ณ  ์‹ถ์œผ๋ฉด #app์„ mount๋กœ ์ „๋‹ฌํ•ด์•„ ํ•œ๋‹ค.

const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

mount๋Š” ๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

Vue์˜ ์ƒ๋ช…์ฃผ๊ธฐ

vue ์ƒ๋ช…์ฃผ๊ธฐ-vue๋ฌธ์„œ

1. ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ

app = Vue.createApp(options)
app.mount(element)

2. Init events & lifecycle

๊ธฐ๋ณธ์ ์ธ ์ด๋ฒคํŠธ, ์ƒ๋ช…์ฃผ๊ธฐ๋“ค์„ ์ดˆ๊ธฐํ™” ๋‹จ๊ณ„๋ฅผ ๊ฑฐ์นœ๋‹ค

3. beforeCreate**

๋ฌด์—‡์ธ๊ฐ€๊ฐ€ ์ƒ์„ฑ๋˜๊ธฐ ์ง์ „์ธ ๋ผ์ดํ”„์‚ฌ์ดํด ํ›…

4. Init injections & reactivity

๊ธฐ๋ณธ์ ์ธ ๋ฐ์ดํ„ฐ์˜ ์ฃผ์ž…๊ณผ ๋ฐ˜์‘์„ฑ ๊ตฌ์กฐ ํŒ๋‹จ

5. created**

vuejs๊ฐ€ ์ƒ์„ฑ๋œ ์งํ›„๋ผ๋Š” ๋ผ์ดํ”„์‚ฌ์ดํด ํ›…

5. Has "template" option?

template ์˜ต์…˜์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉด ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๋กœ ํ•ด์„์ด ๋˜๋ฉด์„œ render ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ํƒฌํ”Œ๋ฆฟ ๋‚ด๋ถ€๊ฐ€ ์ปดํŒŒ์ผ ๋˜๊ณ  ์—†์œผ๋ฉด mount์— ์—ฐ๊ฒฐํ•˜์—ฌ html๊ตฌ์กฐ์™€ ์—ฐ๊ฒฐ

6. beforeMount**

html๊ณผ vuejs์ด ์—ฐ๊ฒฐ์ด ๋˜๊ธฐ ์ง์ „ ์ƒํƒœ

7. Create app.$el and append it to el

์ค€๋น„๋œ vuejs ์ธ์Šคํ„ด์Šค์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚ด์šฉ๋“ค์„ html๊ณผ ์—ฐ๊ฒฐ

8. mounted**

์—ฐ๊ฒฐ์ด ๋˜๊ณ  ๋‚˜์„œ ์‹คํ–‰๋˜๋Š” ๋ผ์ดํ”„ ์‚ฌ์ดํด ํ›…, DOM API๋ฅผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ์Œ

<script>    
  const App = {
    data() {
      return {
        msg: 'Hello Vue!'
      }
    },
    beforeCreate() {
      console.log('beforeCreate!');
    },
    created() {
      console.log('created!');
    },
    beforeMount() {
      console.log('beforeMount!');
    },
    mounted() {
      console.log('mounted!');
    }
  }
const app =  Vue.createApp(App)
const vm = app.mount('#app')
</script>

์œ„์˜ ์ฝ”๋“œ๋ฅผ ์ƒ๋ช…์ฃผ๊ธฐ์— ํ•ด๋‹นํ•˜๋Š” ์ˆœ์„œ์— ๋”ฐ๋ผ ์ถœ๋ ฅ๋จ!

์ฝ˜์†”๋กœ๊ทธ

๐Ÿ”ฅ ๋Š๋‚€์ 

Vuejs๋ฅผ ์ž‘๋…„์— ํ•œ๋ฒˆ ์‚ฌ์šฉํ•ด๋ณธ ์ ์ด ์žˆ์—ˆ๋Š”๋ฐ ์ƒˆ๋กœ ๊ฐ•์˜๋ฅผ ๋“ฃ๋Š”๋ฐ ์ •๋ง ๊ฒ‰ํ•ฅ๊ธฐ๋กœ ๋ฐฐ์› ๊ณ  ์‚ฌ์šฉํ–ˆ๊ตฌ๋‚˜ ์ƒˆ์‚ผ ๊นจ๋‹ฌ์•˜๋‹ค. ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ, ๋ผ์ดํ”„์‚ฌ์ดํด, ํ…œํ”Œ๋ฆฟ ๋ฌธ๋ฒ•, ๊ทธ๋ฆฌ๊ณ  Proxy๊ฐ์ฒด๊ฐ€ ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด์„œ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜๋‹ค๋ณด๋‹ˆ vuejs๊ฐ€ ์–ด๋–ค์‹์œผ๋กœ ๋งŒ๋“ค์–ด์กŒ๋Š”์ง€ ์กฐ๊ธˆ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.

์š”์ฆ˜ ๋งŽ์ด ํ—ค์ดํ•ด์ง„ ๋งˆ์Œ์ด์—ˆ๋Š”๋ฐ ์ƒˆ๋กœ ๋‹ค์žก๊ณ  ์‹œ์ž‘ํ•ด์•ผ์ง€๐Ÿ’ช๐Ÿป

Refer

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค
Vue3

์ •๋ฆฌ

Day34

profile
๋งค ์ˆœ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

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