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

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

🤔 VUE.JS?

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

🧐 특징

1. 유연하고 가볍다.

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

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

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

5. 컴포넌트 기반의 프레임워크이다.

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

화면에 표시되는 값과 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽 또한 자동으로 변경된다.

7. 리액트처험 단방향 데이터 흐름을 가지고 있다.

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

8. MVVM 패턴이다.

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

🔧 설치방법

페이지에 CDN package로 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 파일 구조

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

  Vue 앱을 보다 사용자 친화적인 인터페이스에서 검사하고 디버깅할 수있게 도와준다.

• Vue-cli

  빠르게 애플리케이션을 구축하도록 도와준다.

• Vue Router

  뷰를 이용하여 SPA을 제작할 때 유용한 라우팅 라이브러리이다. npm으로 설치하거나 CDN 방식으로 사용할 수 있다.

👀 References

• Vue 공식문서
• MDN - Vue 시작하기
• Vue.js 입문서 - 프론트엔드 개발자를 위한
• 한시간만에 끝내는 Vue.js 입문
• Vue JS Crash Course 2021

Comments

[Jesse]

I kind of prefer svelte over vue

[Gunwoo]

Oh! I am interested in svelte as well! :D