📝 궁금한 모든 것을 기록합니다.
😎 기록에서 멈추지 않고 나의 것으로 만듭니다.
🙈 잘못된 정보가 있다면 언제든지 댓글에 남겨주세요 :D

저는 언제나 리액트를 사용합니다. 그런데 어쩌다 Vue를 공부할 기회가 있어서 공부한 기록을 남깁니다.

🤔 VUE.JS?

공식 문서에서 검토는 사용자 인터페이스(UI)를 만들기 위한 프로그레시브 프레임 워크라고 소개하고 있습니다.

🧐 특징

1. 유연하고 컴팩트하다.

2. 기존의 웹앱의 일부 UI만 적용하는 것도 가능하다.

3. SPA를 위해 필요한 라우터 기능도 지원한다.

4. 리액트처럼 가상 DOM을 지원해서 빠른 UI 도박이 가능하다.

5. 구성요소 기반의 프레임워크이다.

6. 앵귤러처럼 양방향 데이터가 가능하다.

화면에 표시되는 값과 모델 데이터 값이 로그인되어 항상 변경되거나 다른 경우에도 자동으로 변경됩니다.

7. 리액트처험 단방향 데이터를 가지고 간다.

컴포넌트끼리 데이터를 통신할 때 항상 상위컴포위치에서 하위컴포위치 방향으로 데이터가 전달된다.

8. MVVM패턴이다.

Model - View - ViewModel 구조로 개발하는 방식이다. 화면의 요소를 제어하는 ​​코드와 데이터를 처리하는 코드를 분리하여 코드의 이해도를 충분히 유지하고 보수를 가능하게 합니다.
보기는 사용자에게 보이는 화면이다.
ViewModel은 View와 Model의 중간 영역이고, DOM 리스너와 데이터를 제공하는 곳입니다.
모델은 데이터를 담는 위치로, 보통 서버에서 가져온 데이터를 JS 객체 형태로 저장한다.
DOM Listener는 DOM의 변경 상황에 즉, 각 반응하여 특정 로직을 수행하는 장치이다.
Data Binding은 View의 내용과 Model의 데이터를 동기화하는 장치이다.

🔧 설치방법

페이지에 CDN package 로 가져오는 방법도 있지만, npm을 건설하는 것을 권장한다.

// vue 설치하기
$ npm install vue@next

// vue cli 설치하기
yarn global add @vue/cli
// 아니면
npm install -g @vue/cli

// vue cli를 통한 프로젝트 생성 방법
vue create my-project
// 혹은 아래 명령어를 통해 ui로 프로젝트를 생성할 수 도 있다. 
vue ui

Vue 파일 구조

Vue의 구조와 각 개념을 코드로 작성하면서 보았습니다.

// Home.vue
<template>
<!-- Vue 파일은 컴포넌트 템플릿을 정의하는 template 파트, 스크립트를 작성하는 script 파트, 그리고 스타일링 정보를 작성하는 style 파트로 나누어져 있다. -->
  <div>
      <!-- 중괄호를 두번 사용해서 JS 데이터를 보여줄 수 있다. Mustache bracket-->
    <h1>Welcome to {{title2}}!</h1>
    <!-- v-model 를 사용해서 input 값을 가져올 수 있다. 또한 양방향 데이터 바인딩이기에 data()에 정의된 데이터 변경이 가능하다.  -->
    <input type="text" v-model="input1" />
    <!-- @click 을 이용해서 클릭 이벤트를 헨들링 할 수 있다. -->
    <!-- v-on의 약어 => v-on:click을 @click으로 사용 가능하다. -->
    <button type="button" @click="getData">Get</button>
    <button type="button" @click="setData">Set</button>
    <!-- @change 를 이용해서 값의 변화를 확인하고 설정할 수 있다. -->
    <select class="form-control" v-model="region" @change="changeRegion">
        <!-- v-for 를 이용해서 반복문을 돌릴 수 있다. 데이터 형식이 배열로 주어졌을 때 -->
        <!-- :key는 v-bind:key의 약어이다 -->
      <option :key="i" :value="d.v" v-for="(d,i) in options">{{d.t}}</option>
    </select>
    <div>
        <!-- v-if 를 이용해 조건부 렌더링으 할 수 있다. -->
        <h3 v-if="awesome"> Vue is awesome! </h3>
        <h1 v-else>Oh no 😢</h1>
    </div>
    <!-- v-show 를 이용해 display css 속성을 none 처럼 할 수 있다. <엘리먼트는 렌더링이 된다.> -->
    <table class="table table-bordered" v-show="tableShow">
      <tr :key="index" v-for="(data,index) in options">
        <td>{{data.v}}</td>
        <td>{{data.t}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
    // data 메소드를 통해 다루고 싶은 데이터를 정의하고, 다룰 수 있게 된다. 
    // 이곳에서 데이터를 정의하고, template에 mustache bracket을 이용해 데이터를 바인딩 할 수 있다. 
    // 또한 데이터를 가지고 오고 싶다면(ex. input, select, etc), v-model를 사용해서 아래의 변수에 할당할 수 있다. 
    // 위처럼 양방향으로 데이터 바인딩이 가능하게 된다. 
  data() {
    return {
      title: "뷰 연습",
      title2: "Seoul",
      input1: "abcd",
      options: [
        { v: "S", t: "Seoul" },
        { v: "J", t: "Jeju" },
        { v: "B", t: "Busan" },
      ],
      region: "B",
      tableShow: false,
      awesome: false,
    };
  },
  // 만일 데이터에 조금이라도 변경이 일어나면 왓치 안에 정의된 해당 함수가 작용된다. 
  // 왓치는 데이터 변경을 알아서 캐치해준다. (모니터링 기능) 특정 데이터를 항상 주시하고 있다가, 변경이 일어나면 그 데이터를 캐치해서 사용할 수 있다.
  // 주로 사용자로부터의 이벤트가 아닌 프로그램 상에서 어떠한 특정 데이터가 변경하는 것을 확인하고 싶을 때 사용하면 좋다.  
  watch: {
      // 왓치에선 데이터 명을 그대로 가지고와서 함수형태로 작성해서 사용한다. 
    input1() {
      console.log(this.input1);
    },
    title() {},
  },
  // Vue에서는 모든 메서드를 이곳에 정의를 한다. 
  // 데이터 컨트롤에 관련된 모든 것을 이곳에서 정의한다. 
  methods: {
    getData() {
      alert(this.input1);
    },
    setData() {
      this.input1 = "12345";
    },
    changeRegion() {
      alert(this.region);
    },
  },
  // Vue 인스턴스의 라이프 사이클
  // 만일 처음 화면 렌더링이 되기 전에 DB와 같은 곳에서 데이터를 가져와 뿌려야 한다고 한다면 이곳에서 적용하면 된다. 
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  // 화면에 실제로 html이 로딩이 되었을 때
  mounted() {
    console.log("mounted");
  },
  // 데이터가 변경될 때, 데이터가 변경하기 전에 무언가를, 함수를 적용하고 싶을 때 이곳에 정의하면 된다. 
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("beforeDestroy");
  },
};
</script>

📌 Vue 개발에 도움이 되는 Tool &Live

Vue Devtools

Vue 앱을 보다 사용자가 가깝게는

뷰클리

신속하게 적용할 수 있도록 도와줍니다.

뷰 라우터

SPA를 사용하여 제작할 때 최대한 활용할 수 있습니다. npm으로 설치하거나 CDN 방식으로 사용할 수 있습니다.

👀 참고문헌

Vue 공식문서

MDN - Vue 시작하기

Vue.js 입문서 - 프론트엔드 개발자를 위한