🤔 VUE.JS?
Published: 2021-03-17 20:28:38

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

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

![](https://images.velog.io/images/gunwooko/post/d2f2d536-2590-4a87-8180-1465606b8552/vue1.png)

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

## 🧐 특징
### 1. 유연하고 가볍다.
### 2. 기존의 웹앱의 일부 UI만 적용하는 것도 가능하다.
### 3. SPA를 위해 필요한 라우터기능도 지원한다.
### 4. 리액트처럼 가상DOM을 지원해서 빠른 UI 렌더링이 가능하다.
### 5. 컴포넌트 기반의 프레임워크이다.
### 6. 앵귤러처럼 양방향 데이터 바인딩이 가능하다.
화면에 표시되는 값과 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽 또한 자동으로 변경된다.
### 7. 리액트처험 단방향 데이터 흐름을 가지고 있다.
컴포넌트끼리 데이터를 전달할 때 항상 상위컴포넌트에서 하위컴포넌트 방향으로 데이터가 전달된다. 
### 8. MVVM 패턴이다. 
![](https://images.velog.io/images/gunwooko/post/34ea0ccf-2980-4a5c-9a9d-2c626467df8d/MVVMPattern.png) 
Model - View - ViewModel 구조로 개발하는 방식이다. 화면의 요소를 제어하는 코드와 데이터 로직처리하는 코드를 분리하여 코드의 이해도를 높이고 유지 보수를 편리하게 해준다. 
**View**는 사용자에게 보이는 화면이다.
**ViewModel**은 View와 Model의 중간 영역이고, _DOM 리스너_ 와 _데이터 바인딩_ 을 제공하는 곳이다. 
**Model**은 데이터를 담는 위치로, 보통 서버에서 가져온 데이터를 JS 객체 형태로 저장한다. 
**DOM Listener**는 DOM의 변경 상황에 즉각 반응해서 특정 로직을 수행하는 장치이다.
**Data Binding**은 View의 내용과 Model의 데이터를 동기화해주는 장치이다. 

## 🔧 설치방법
페이지에 [CDN package](https://v3.ko.vuejs.org/guide/installation.html#cdn)로 import하는 방법도 있지만, 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 파일 구조](https://github.com/gunwooko/first-vue/tree/master/src)
> 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 개발에 도움되는 툴 & 라이브러리
- #### [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) 
Vue 앱을 보다 사용자 친화적인 인터페이스에서 검사하고 디버깅할 수있게 도와준다. 

- #### [Vue-cli](https://cli.vuejs.org/)
빠르게 애플리케이션을 구축하도록 도와준다. 

- #### [Vue Router](https://router.vuejs.org/installation.html#direct-download-cdn)
뷰를 이용하여 SPA을 제작할 때 유용한 라우팅 라이브러리이다. npm으로 설치하거나 CDN 방식으로 사용할 수 있다. 

## 👀 References
- [Vue 공식문서](https://v3.ko.vuejs.org/guide/introduction.html)
- [MDN - Vue 시작하기](https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
- [Vue.js 입문서 - 프론트엔드 개발자를 위한](https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vue-components)
- [한시간만에 끝내는 Vue.js 입문](https://www.youtube.com/watch?v=sqH0u8wN4Rs)
- [Vue JS Crash Course 2021](https://www.youtube.com/watch?v=qZXt1Aom3Cs)