8 May 2019

Vue.js (4) - Firebase와 연동하기

이전 포스트에서 브라우저의 LocalStorage를 통해서 데이터를 관리했는데,

아무래도 브라우저에 종속되다보니 한계가 많습니다.

따라서, 파이어베이스라고 하는 (경량형)데이터베이스를 통해서 우리의 데이터를 관리하려고 합니다.

1) firebase

처음에는 모바일 어플리케이션을 편하게 배포할 수 있게끔 해주는 녀석 정도였는데

이제는 기능이 많아짐.

1-1. 기능

인프라를 관리할 필요 없이 빠르게 앱 개발

인프라 : (앱을 만들어서 배포할 컴퓨터, 데이터베이스, Static storage, 서비스를 유지하기 위한 기반기술들..)
장점
1. 소프트웨어 업데이트 주기를 관리 : 데이터를 기준으로!
  
  ex) 페이스북
  - 업데이트 주기 3일 ~ 2주
  - 요즘은 기업의 의사결정에 데이터가 들어가있음
    
    ex) 페이스북은 주로 A/B Test를 함.
    
    서로 다른 버전의 페이스북을 사용자들에게 각기 제공하고, 그 사용자들을 비교함.
  - 모든 기능들이 데이터와 연결되어있음.
    
    ex) 버튼을 터치할 때 마다 이런 이벤트들을 트래킹, 사이트에 접속할 때 세션이 유지되는 시간을 관찰…
  ex) 29CM, 무신사
  - 사용자의 유입, 전환, 재구매/재방문을 철저히 체크
  - 어떻게 해야 높일 수 있을지 끊임없이 앱을 최적화함.
  요즘은 구글이나 페이스북같은 대기업이 아니더라도
  
  Firebase를 통해서 데이터를 트래킹할 수 있음.
  
  => 결국 자바스크립트 Component를 달아서 버튼과 데이터를 연결하는건데, 이런 기능을 무료로 제공한다는것임.

1-2. 설치방법

Firebase 홈페이지 -> 시작하기

애널리틱스 위치와 Cloud Firestore위치를 수정함.

2) Firebase DB 활용하기

자바스크립트 API를 통해서 이 데이터를 활용할 수 있음

2-1. 사용하기

Realtime Database 클릭 -> 잠금모드로 시작

2-2. 기능 설명

Firebase db는 RDB가 아님.

(key-value 기반의 데이터베이스임.)

이외에도 규칙설정이나 (읽기전용, 쓰기전용, …) 사용량 체크도 가능합니다.

2-3. 예제

Firebase javascript cdn 에서 코드를 가져옴.

apikey, dburl, projectid 빼고는 일단은 필요없습니다.

일반적인 코드와는 달리, head태그에 올려놓는 것을 권장하고 있습니다.

<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase.js"></script>
<script>
    // Initialize Firebase
    // TODO: Replace with your project's customized code snippet
    var config = {
        apiKey: "<API_KEY>",
        databaseURL: "https://todo-35fee.firebaseio.com/",
        projectId: "todo-35fee",
    };
    firebase.initializeApp(config);
</script>

API_KEY는 톱니바퀴 모양의 프로젝트 설정에서 확인할 수 있습니다.

Todo 앱

( 간단하게 input 태그에 값을 적고 엔터키를 누르면 Todo를 추가하는 앱)

<div id="app">
    <div>
        <input v-model="newTodo" @keyup.enter="addTodo">
    </div>
    <div>
        <ul>
            <li v-for="todo in todos"></li>
        </ul>
    </div>
</div>
<script>
    const app = new Vue({
        el : '#app',
        data : {
            newTodo : '',
            todos : [],
        },
        methods : {
            addTodo : function() {
                this.todos.push(this.newTodo)
                this.newTodo = ''
            }
        }
    })
</script>

Firebase를 이용해서 데이터를 가져오기.

vue fire가 도와줍니다.

이 녀석은 우리 Vue 객체에 firebase 속성을 정의할 수 있게 해줍니다.
1. vue fire 사이트에서 로드할 수 있습니다.
```

<script src="https://unpkg.com/vuefire/dist/vuefire.js"></script> 
```
  당연히 Vue와 Firebase 코드 밑에 있어야합니다. 실제로 script코드를 임포트하는데는 순서가 중요하기 때문에 유의해야합니다.
2. firebase 객체 선언하고 참조하기
```
var db = firebase.database() // db라는 컴포넌트가 새로 만들어짐
      
const app = {
    //...
    firebase : {
        todos : db.ref('todos') // db 데이터베이스에 'todos' 테이블을 참조하기 위한 코드임.
    }
}
```
3. 우리의 로직과 firebase를 연결하기.
```
methods : {
    addTodo : function() {
        this.$firebaseRefs.todos.push({
                id: Date.now(),
                content: this.newTodo,
                completed: false,
            })
        this.newTodo = ''
    }
},
```
  this.$firebaseRefs : firebase 속성과 연결
  
  .todos : db.ref('todos') : 데이터베이스의 ‘todos’ 테이블과 연결됨.
  
  => 즉, todos 데이터베이스에 저렇게 생긴 객체를 추가하겠다는 뜻입니다.
  
  이런식으로 표현이 되는데,
  
  키밸류기반의 데이터베이스는 유니크한 key를 통해서 데이터를 구별합니다.
4. 체크박스를 만들어서 Todos의 completed 속성을 조작하기!
```
<ul>
    <li v-for="todo in todos">
        <input v-model="todo.completed" @change="updateTodo(todo)" type="checkbox">
              
    </li>
</ul>
```
  change 이벤트를 통해서 v-model이 바인딩하고 있는 todo.completed값이 변경될 때 실제 데이터베이스에 반영을 하고 싶습니다.
```
updateTodo : function(todo){
    const newTodo = { ...todo }
    delete newTodo['.key']
    this.$firebaseRefs.todos.child(todo['.key']).set(newTodo)
}
```
  1. spread operator
    
    주로 객체를 복사하고 싶을 때 사용합니다.
  2. set method
    
    todo에서는 completed = True로 저장되어 있는데, 이것을 firebase에 반영하기 위해서는 해당하는 파이어베이스의 요소에 접근하여 set 메서드를 사용해야합니다.
    
    set method는 새 데이터를 저장하고 해당 경로의 기존 데이터를 대체하는 방식입니다. (파이어베이스는 매우 경량형이다보니, 데이터를 업데이트하는게 아니라 삭제하고 다시 추가해줘야함.)
    
    이 메서드를 사용하기 위해서, key를 빼고 내용물만 갈아줘야합니다.