firebase realtime database 읽고 쓰기

firebase.google.com/docs/database/web/start

자바스크립트에서 설치 및 설정  |  Firebase 실시간 데이터베이스

---

프론트에 파이어베이스 설치하기

-자바스크립트 sdk를 사용하기위해서 설치한다. cmd 창에 아래의 명령어를 입력해 설치한다.

C:\ionic\TestPp\test> yarn add firebase

최신버전으로 설치된 것을 확인할 수 있다.

---

플러그인 만들기

main.js에서 firebase를 쓴다고 선언해야하는데 다 쓰게되면 복잡해지므로 plugins 폴더에 파일(firebase.js)을 하나만들고 import를 해준다.

import Vue from 'vue'
import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firebase-database'
import firebaseConfig from '../../firebaseConfig'

//여기서 firebaseConfig 다른 곳에서 불러와야 되니까 위에서 import도 해줘야한다. 
firebase.initializeApp(firebaseConfig)

//$firebase 는 firebase.js 를 전역적으로 쓸 수 있게 프로토타입으로 만들어  줄 것이다.
Vue.prototype.$firebase = firebase

---

firebaseConfig 파일 만들기

: 이니셜라이즈를 해야되는데 이것도 다른데서 전역적으로 사용할 수 있도록 파일을 따로 만든다음  (firebaseConfig.js)   firebase 홈페이지에서 config 파일(위치 : firebase-프로젝트설정-Firebase SDK snippet - 구성)을 불러온다.
 이 파일은 gitignore에 추가한다. (깃에 추가가 안되고 다른 프로젝트에 쓸수 있게 하려고)

export default {
  apiKey: 
  authDomain: 
  databaseURL: 
  projectId: 
  storageBucket: 
  messagingSenderId: 
  appId: 
}

---

firebase realtime database 읽고 쓰기

firebase.google.com/docs/database/web/read-and-write

웹에서 데이터 읽기 및 쓰기  |  Firebase 실시간 데이터베이스

app.vue 파일에서 시도해보기

<template>
<!-- 생략 -->
  <!-- save 역할을 하는 버튼 -->
      <v-btn icon @click="save"><v-icon>mdi-check</v-icon></v-btn>
  <!-- read 역할을 하는 버튼 -->
      <v-btn icon @click="read"><v-icon>mdi-numeric</v-icon></v-btn>
  <!-- readOne 역할을 하는 버튼 -->
      <v-btn icon @click="readOne"><v-icon>mdi-account-badge-alert</v-icon></v-btn>
<!-- 생략 -->
</template>

<script>
<!-- 생략 -->
  <!-- mount : Firebase 시작할 때 작동하는 걸로 알아두자. -->	
  mounted () {
    console.log(this.$firebase)
  },
  methods: {
    save () {
      console.log('save@@@')
      //this.$firebase 는 realtimeDB 사용시 쓰고. @firestore는 firestore 사용시 쓴다.
      //ref() => 루트 파일
      this.$firebase.database().ref().child('abcd').child('abcd').child('abcd').set({
        title: 'abcd', text: 'tttttt'
      })
    },
    read () {
      //on() : 계속 변화를 감지해서 읽음.DB내에서 바꿔도 내용을 읽을 수 있다.
      this.$firebase.database().ref().child('abcd').on('value', (sn) => {
        console.log(sn)
        console.log(sn.val())
      })
    },
    //한번만 읽는 것은 함수를 async - await로 바꾸는게 편하단다.
		이러면 1회성으로 순차적으로 할 때 편하단다
    async readOne () {
      //once() : 한번만 읽음. DB내에서 바꿔도 내용이 바뀌지 않음.
      const sn = await this.$firebase.database().ref().child('abcd').once('value')
      console.log(sn.val())
    }
  }
}
</script>

-async - await 참고 : https://joshua1988.github.io/web-development/javascript/js-async-await/#async--await%EB%8A%94-%EB%AD%94%EA%B0%80%EC%9A%94