[Vue] Vue.js란? view? vue?

Vue 3 version 기준으로 작성된 포스트입니다.

 

글쓰기 앞서서 많이들 들어보셨을 듯 한

 

React, Anguler, Vue 등 많은 프레임 워크/라이브러리가 있습니다.

 

React, Vue, Anguler의 공통적인 특징은 Single Page Application이라는 것입니다.

Vue's icon

Single Page Application (SPA)?

쉽게 말하는 SPA는 한 페이지 내에서 만 동작하는 웹 개발 방식을 의미합니다

.

한 페이지 내에서 다른 컴포넌트를 호출하고 사용하고 보여주는 방식이라고 할 수 있습니다.

 

컴포넌트(Compunent)?

Component는 레고 블록 하나하나 혹은 객체 하나하나라고 생각하시면 이해가 빠를 수 있습니다.

 

컴포넌트 여러 개를 조합하여 화면을 구성할 수 있는 블록을 의미합니다.

 

Spring Regacy Project에서의 tiles를 단 코드 몇 줄로 호출하고 유연하게 보여줄 수 있는 것이죠!

 

문서에서의 컴포넌트란 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트( Element )입니다.

 

Vue의 Component는 Vue의 Instance이며 기존 HTML의 모든 옵션을 사용할 수 있습니다.

 

개인적으로는 Vue에 숙련되고 잘 짜는 개발자는 10줄의 Pure JavaScript를

단 2줄~3줄의 Vue 기본 속성으로 나타낼 수 있습니다.

 

Vue 공식 한글 문서를 참조하면 다양한 것들을 접할 수 있습니다.

 

https://v3.vuejs-korea.org/

선언적 렌더링?

Vue.js의 핵심은 간단한 마크업으로 DOM에서 데이터를 선언적으로 렌더링 할 수 있는 시스템입니다.

 

사용자는 단순 Vue Style의 마크업을 사용하지만 내부에 있는 Vue.Js의 컴파일러는

 

개발자를 위해 작업을 하고 있습니다.

 

DOM과 데이터는 연결되어 모든 요소들이 반응형( reactive )이 되었습니다.

 

<template>
  <div id="counter">
    Counter: {{ counter }}
  </div>
</template>

export default {
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}

위처럼 페이지 mount 시점부터 선언한 변수 counter의 값이 1초마다 1씩 증가하는 것을 확인할 수 있습니다.

 

vue는 렌더링을 지원하는 동적 웹사이트를 구현하기에 최적화되어있습니다.

 

사용자 입력 핸들링?

사용자 입력 핸들링으로 디렉티브라는 Vue 특유의 속성이 있습니다.

 

디렉티브는 특수 속성임을 나타내는 v- 접두어가 붙어 있으며 렌더링 된 DOM에 유니크한 반응형 동작을 합니다.

 

Vue에는 많은 기능과 구문의 디렉티브가 있습니다.

 

다양한 디렉티브의 자세한 내용은 다음 포스팅에서 설명하겠습니다.