Vue.js Intro

Vue.js

UI, 라우팅, SSR( Server Side Rendering ) 등의 프론트엔드 개발을 지원하는 프레임워크

Vue.js 공식문서

 

#Vue3 코드 작성 방식

OptionsAPI, CompositionAPI 두가지 방식이 존재하고 

공식문서의 네비게이션바에서 각 방식에 따른 API 설명을 확인할 수 있다. 

 

-OptionsAPI

 

클래스 기반 컴포넌트 인스턴스(this) 구조 

<script>
export default {
  // data()에서 반환된 속성들은 반응적인 상태가 되어 `this`에 노출됩니다.
  data() {
    return {
      count: 0
    }
  },

  // methods는 속성 값을 변경하고 업데이트 할 수 있는 함수.
  // 템플릿 내에서 이벤트 헨들러로 바인딩 될 수 있음.
  methods: {
    increment() {
      this.count++
    }
  },

  // 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의 여러 단계에서 호출됩니다.
  // 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
  mounted() {
    console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
  }
}
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

 

-CompositionAPI

 

재사용성이 좋은 컴포넌트 구조

<script setup>
import { ref, onMounted } from 'vue'

// 반응적인 상태의 속성
const count = ref(0)

// 속성 값을 변경하고 업데이트 할 수 있는 함수.
function increment() {
  count.value++
}

// 생명 주기 훅
onMounted(() => {
  console.log(`숫자 세기의 초기값은 ${ count.value } 입니다.`)
})
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

 

#개발 환경

 

Node.js https://nodejs.org/en

Node.js

 

Visual Studio Code https://code.visualstudio.com/ 

Visual Studio Code - Code Editing. Redefined

 

*plugins 

- Vue VSCode Snippets

- Live Server

- Material Icon Theme 

- Night Owl (테마)

- ESLint, TSLint Vue (문법 어시스턴스), Auto Close Tag

- Prettier( Code Formatter ), Project Manager

- GitLens

- Atom Keymap, Jetbrains IDE Keymap ( Shortcut )

[ Vue2 - Vetur / Vue3 - Volar ] 

 

 

 

WindowsOS 선택사항

(cmder https://cmder.app/)

Cmder | Console Emulator

 

Chrome Extension Devtool

Vue.js devtools

https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Vue.js devtools

 

 

CDN( Content Delivery Network )

https://ko.vuejs.org/guide/quick-start.html

빠른 시작 | Vue.js

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

 

**

vscode shortcut

#app + tap

tag_name + tap

 

 

기본 예제

- OptionsAPI

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue //distructuring 문법

  createApp({ //vue를 사용할 application instance
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app') // id에 app인 태그에 mount(부착)
</script>

 

 

SSR도 가능하다더니 thymeleaf 사용하는 느낌이 난다.. 

message라는 프로퍼티와 mount 함수 프로퍼티를 가진 createApp 클래스를 만들고 

html에 표현식으로 createApp 객체의 프로퍼티를 사용해 렌더링 하는 느낌이다. 

 

distructuring 대신 Vue.createApp으로 간단하게 사용할 수 있다. 

<script>
    Vue.createApp({
        data(){
            return {
                message: 'hello vue'
            }
        }
    }).mount('#app');
</script>

 

 

-CompositionAPI

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

 

 

#Vue 작동 원리 ( reactivity ) 

 

javascript의 Proxy Api를 사용하여 Vue의 작동원리를 알아본다. 

 

 const data={
    a:10
   }

   const app = new Proxy(data,{
    get() {
        console.log('프록시를 이용해 mocking data의 값에 접근하면 나오는');
    },
    set() {
        console.log('실제 data에는 변경되지 않지만 프록시를 이용해 mocking data의 값을 변경하면 나오는');
    }
   });

실행결과

Proxy는 data를 mocking할 뿐, 실제 data에 접근하는 것이 아니기 때문에 실제 data의 값은 변함 없다.

 

   const data={
    a:10
   }
   function render(newValue){
    let app = document.querySelector('#app');
    app.innerHTML=newValue;
   }
   const app = new Proxy(data,{
    get() {
        console.log('프록시를 이용해 mocking data의 값에 접근하면 나오는');
    },
    set(target,prop, newValue) {
        target[prop] = newValue; //data.a=newValue
        render(newValue); //app이라는 객체의 값이 바뀌면 dom 객체의 html이 바뀐다. 
    }
   });

 

app이란 객체는 app이라는 div 태그의 html을 동적으로 변경해주는 객체가 된다. 

 

즉, 나는 동적으로 바뀔 부분을 컴포넌트로 코드를 작성하고, 그 컴포넌트(App)를 

돔 트리의 특정 객체(div id='App')로 만들면

Vue라는 프록시가 ref의 값을 감시하다가 값이 변경되면

그 돔 객체의 html을 수정해준다. 

 

여기서 주의할 점은 Vue라는 프록시를 통해 값을 변경해야 돔 객체를 수정해주지

직접 ref의 원본인 data에 접근하여 변경하면 render()를 실행하지 않기 때문에 돔 객체를 수정해주지 않는다.