[Hoon] Vuejs 강의 - Vue.js Firebase + Validation 개발

Vue Example - Firebase + Validation 개발

vue.js Example 원본 -> https://github.com/vuejs/vue/tree/dev/examples/firebase

[ 설치 ]

<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

또는:

<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

JSFiddle - https://jsfiddle.net/

JSFiddle 에 바로 적용해 분석해 보기

[html]

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuefire@1.3.0/dist/vuefire.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<div id="app">
  <ul is="transition-group">
    <li v-for="user in users" class="user" :key="user['.key']">
      <span>{{user.name}} - {{user.email}}</span>
      <button v-on:click="removeUser(user)">X</button>
    </li>
  </ul>
  <form id="form" v-on:submit.prevent="addUser">
    <input type="text" v-model="newUser.name" placeholder="Username" />
    <input type="email" v-model="newUser.email" placeholder="email@email.com" />
    <input type="submit" value="Add User" />
  </form>
  <ul class="errors">
    <li v-show="!validation.name">Name cannot be empty.</li>
    <li v-show="!validation.email">Please provide a valid email address.</li>
  </ul>
</div>

[css]

body {
  font-family: Helvetica, Arial, sans-serif;
}

ul {
  padding: 0;
}

.user {
  height: 30px;
  line-height: 30px;
  padding: 10px;
  border-top: 1px solid #eee;
  overflow: hidden;
  transition: all 0.25s ease;
}

.user:last-child {
  border-bottom: 1px solid #eee;
}

.v-enter,
.v-leave-active {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}

.errors {
  color: #f00;
}

[javascript]

var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

// Setup Firebase
var config = {
  apiKey: "AIzaSyAi_yuJciPXLFr_PYPeU3eTvtXf8jbJ8zw",
  authDomain: "vue-demo-537e6.firebaseapp.com",
  databaseURL: "https://vue-demo-537e6.firebaseio.com",
};
firebase.initializeApp(config);

var usersRef = firebase.database().ref("users");

// create Vue app
var app = new Vue({
  // element to mount to
  el: "#app",
  // initial data
  data: {
    newUser: {
      name: "",
      email: "",
    },
  },
  // firebase binding
  // https://github.com/vuejs/vuefire
  firebase: {
    users: usersRef,
  },
  // computed property for form validation state
  computed: {
    validation: function () {
      return {
        name: !!this.newUser.name.trim(),
        email: emailRE.test(this.newUser.email),
      };
    },
    isValid: function () {
      var validation = this.validation;
      return Object.keys(validation).every(function (key) {
        return validation[key];
      });
    },
  },
  // methods
  methods: {
    addUser: function () {
      if (this.isValid) {
        usersRef.push(this.newUser);
        this.newUser.name = "";
        this.newUser.email = "";
      }
    },
    removeUser: function (user) {
      usersRef.child(user[".key"]).remove();
    },
  },
});

Vuefire

Vuefire는 Firebase RTDB 또는 Firebase Cloud Firestore와 Vue 애플리케이션간에 실시간 바인딩을 생성하는 작고 실용적인 솔루션입니다. 로컬 데이터를 항상 원격 데이터베이스와 동기화 상태로 유지하는 것이 간단합니다.

뷰는 Vuefire 를 통해 Vue Instance 에 firebase 와 data sync 를 할 수 있도록 도와줍니다.

firebase: { users: usersRef, }

firebase: { 
	users: usersRef
}

Hompage - https://vuefire.vuejs.org/

Github - https://github.com/vuejs/vuefire

NPM - https://www.npmjs.com/package/vuefire

[ 설치 ]

<script src="https://unpkg.com/vuefire@1.3.0/dist/vuefire.js"></script>

Firebase

Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.

Hompage - https://firebase.google.com/

Github - https://github.com/firebase/firebase-js-sdk

NPM - https://www.npmjs.com/package/firebase

Validation 과 isValid

• validation - 먼저 첫번째로 input model 별로 validation rule 을 정의한다.

• isValid - 사용자의 입력정보가 유효한지 체크한다.

실제 JSFiddle 에 적용된 소스

https://jsfiddle.net/realdev/rs0hpw35/1/

Edit fiddle - JSFiddle - Code Playground

bit.ly/3fXOzon

인프런 인강 30%할인(7,700원) - Vue.js 핵심 강의!

bit.ly/2TtRHis

[Vue.js입문~초급] Javascript 초보 Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런