16. Vue와 Firebase로 나만의 사이트 만들기 - realtime 쓰고 읽기

 

 

 

VF - 16강

 

 

 

---

• 이번 강에서는 Realtime Database에 대하여 간단하게 알아볼 것이다.
• 하는 과정을 일일이 다 설명하면 진도가 나가지 않기 때문에 중간중간 필요한 부분만 최소한 설명할 것이며, 먼저 따라 해 본다고 생각하고 진행하길 바란다.

 

• Realtime Database를 쓴다고 한다는 것은 Javascript SDK를 통해서 쓰게 되어있고, 또한 아무나 쓸 수 없으며 자신의 프로젝트 생성 키나 프로젝트 ID 등등을 넣는 과정이 필요하다.
  • Firebase Realtime Database 공식 문서 사이트 : https://firebase.google.com/docs/database/web/start  

자바스크립트에서 설치 및 설정  |  Firebase Documentation

 

• 일단은 SDK를 먼저 깔아줘야 하는데 지난 강에서 firebase를 깔았다면 넘어간다.
  • 만약 프로젝트의 package.json의 dependencies에 firebase 항목이 없다면 깔아줘야 한다.
  • 설치 명령어는 아래와 같다.

$ npm i firebase

 

• 하지만 깔았다고 해서 쓰다는 것은 아니며, src/main.js 파일에 어떤 것을 쓴다 하는 것을 넣어줘야 한다.
• 그렇지만 main.js 파일에 이것저것 넣는다는 것은 복잡해지기 때문에 일단 plugins 폴더에 firebase.js 파일을 만들어준다.

 

• 그리고 main.js 파일에 아래와 같이 추가해준다.

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import './plugins/firebase' // 그냥 쓴다고 하면 from 없이 사용

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

 

• 이 프로젝트에서 firebase을 전역적으로 사용할 수 있도록 프로토타입으로 만들어 줄 것이다.
• 원래라면 플러그인으로 복잡하게 들어가지만 직관적으로 하기 위하여 firebase.js 파일에 아래와 같이 작성한다.
  • 아래의 방식은 매뉴얼에 나오는 것이다.

// firebase.js
import Vue from 'vue'
import * as firebase from 'firebase/app'
import 'firebase/auth'
import * as firebaseDB from 'firebase/database'

Vue.prototype.$firebase = firebase
Vue.prototype.$firebaseDB = firebaseDB

• firebase는 용량이 매우 크기 때문에 위와 같이 따로따로 분리해서 해야한다.
• 그리고 Vue 프로토타입으로 명시를 해주게 되는데 보통 프로토타입에 $를 붙여서 전역으로 쓴다는 느낌을 준다.
• 이제 firebase는 아무데서나 쓸 수 있게 된다.
• 그리고 initialize를 해줘야 하는데 initialize 코드인 프로젝트 생성 키나 프로젝트 ID를 여기에 넣어주게 되면 이 프로젝트에서만 쓸 수 있기 때문에 다른 프로젝트에서도 사용할 수 있도록 파일을 따로 빼주는 것이 좋다.
• initialize 하는 코드에는 firebaseConfig 정보가 필요한 데 이것은 firebase 콘솔에 있다. 지난번 프로젝트 설정에서 내 앱을 만들었는데 거기서 구성을 클릭하여 나오는 firebaseConfig 정보를 외부에서 참조할 수 있도록 파일로 만들어 줄 것이다.

 

• 프로젝트의 최상위 디렉터리에서 firebaseConfig.js라는 파일을 만든다.
• 그리고 밖에서 이 파일을 사용할 수 있도록 아래의 코드를 작성해준다.
  • 참고로 이 키들은 어차피 노출되기 때문에 숨겨놓지 않아도 된다.

// firebaseConfig.js
export default {
  apiKey: 'AIzaSyDl5JYvk9ikGfFaZZqR4L7u5ZBck0nJ_b4',
  authDomain: 'test-vf-d5dac.firebaseapp.com',
  databaseURL: 'https://test-vf-d5dac-default-rtdb.firebaseio.com',
  projectId: 'test-vf-d5dac',
  storageBucket: 'test-vf-d5dac.appspot.com',
  messagingSenderId: '170830658359',
  appId: '1:170830658359:web:cd46da17df156b5866b8b2'
}

 

• 또한 .gitignore 파일에 아래의 내용을 추가하여 git에 추가가 되지 않게 하여 다른 프로젝트에서도 쓸 수 있게 된다. 

// gitignore

...

# firebase
.firebaserc
firebaseConfig.js

 

• 즉, github에 위의 두 파일은 올라가지 않는다.

 

• firebase.js 파일로 넘어가 아래의 코드를 추가하여 firebaseConfig를 불러온다.

import Vue from 'vue'
import * as firebase from 'firebase/app'
import 'firebase/auth'
import * as firebaseDB from 'firebase/database'
import firebaseConfig from '../../firebaseConfig' // 추가함

firebase.initializeApp(firebaseConfig)

Vue.prototype.$firebase = firebase
Vue.prototype.$firebaseDB = firebaseDB

 

• 확인을 위하여 App.vue에서 아래의 코드를 작성한다.

<!-- App.vue -->
<script>
...

export default {
...

  mounted () {
    console.log(this.$firebase)
  }
}
</script>

• mounted ( )는 앱이 시작할 때 들어오는 것이라서 여기에 코드를 작성하였다.
• 그리고 서버를 구동한 후 개발자 도구에 console을 확인하면, 내용은 잘 모르지만 아래와 같은 정보들이 있다는 것을 알고 넘어간다.

 

---

 

쓰기(write) 테스트

• 이제 버튼을 만들어서 쓰기 테스트하기 위하여 App.vue에 아래와 같이 작성한다.
  • 강의는 firebase 9 이하 버전이고, 필자는 firebase 9 버전이어서 코드가 동작하지 않아 동작하게끔 변경하여 작성하였다.

<!-- App.vue -->
<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <v-app-bar-nav-icon v-on:click="drawer = !drawer"></v-app-bar-nav-icon>
      <site-title :title="title"></site-title>
      <v-spacer></v-spacer>
      <v-btn icon v-on:click="save"><v-icon>mdi-check</v-icon></v-btn> <!-- 쓰기 버튼 -->
    </v-app-bar>
...
</template>

<script>
import SiteTitle from '@/views/site/titleView.vue'
import SiteFooter from '@/views/site/footerView.vue'
import SiteMenu from '@/views/site/menuView.vue'

export default {
...

  mounted () {
    console.log(this.$firebase)
  },
  methods: {
    save () { // 쓰기 테스트
      console.log('save@@@')
      const db = this.$firebaseDB.getDatabase()
      this.$firebaseDB.set(this.$firebaseDB.ref(db, 'abcd/'), {
        title: 'abcd',
        text: 'tttttt'
      })
    }
  }
}
</script>

• 결과 화면은 아래와 같다.

 

• 여기서 오른쪽 상단에 있는 체크 버튼을 클릭한 후 firebase 콘솔 사이트로 가서 Realtime Database 메뉴를 클릭하여 내용을 확인하면 아래와 같다.

 

• 데이터 쓰기에 관한 문서 링크 : https://firebase.google.com/docs/database/web/read-and-write

웹에서 데이터 읽기 및 쓰기  |  Firebase Documentation

 

---

 

읽기(read) 테스트 - 1

• realtime의 read는 두 가지가 있다. ①파이프를 연결해놓고 계속 읽느냐? 아니면 ②한 번만 읽으냐? 가 있다.
• 일단 두 가지 경우 모두 해보자.
• 먼저 ①파이프를 연결해놓고 계속 읽느냐? 의 경우를 보자.
• 수정된 App.vue의 내용은 아래와 같다.

<!-- App.vue -->
<template>
...
      <v-btn icon v-on:click="save"><v-icon>mdi-check</v-icon></v-btn>
      <v-btn icon v-on:click="read"><v-icon>mdi-numeric</v-icon></v-btn>
...
</template>

<script>
...

export default {
...

  methods: {
    save () { // 쓰기 테스트
      console.log('save@@@')
      const db = this.$firebaseDB.getDatabase()
      this.$firebaseDB.set(this.$firebaseDB.ref(db, 'abcd/'), {
        title: 'abcd',
        text: 'tttttt'
      })
    },
    read () { // 실시간 읽기 테스트
      const db = this.$firebaseDB.getDatabase()
      const starCountRef = this.$firebaseDB.ref(db, 'abcd/')
      this.$firebaseDB.onValue(starCountRef, (snapshot) => {
        console.log(snapshot)
        console.log(snapshot.val())
      })
    }
  }
}
</script>

• 결과 화면은 아래와 같다.

• 여기서 [123] 버튼을 누르고 개발자 도구의 console을 확인하면 아래와 같다.

• 그리고 데이터를 수정하기 위하여 Firebase 콘솔에 들어가 값을 수정한다.

• 수정하는 순간 개발자 도구의 console 창에 아래와 같이 데이터를 읽어 온다.

• 수정할 때마다 계속 데이터를 읽어오게 된다.

 

• 이것을 잘 활용하면 다이내믹하게 자동으로 바뀌는 홈페이지를 제작할 수 있다.

 

읽기(read) 테스트 - 2

• 이제 ②한 번만 읽으냐? 의 경우를 보자.
• 추가된 App.vue 파일의 코드는 아래와 같다.

<!-- App.vue -->
<template>
 ...
      <v-btn icon v-on:click="save"><v-icon>mdi-check</v-icon></v-btn>
      <v-btn icon v-on:click="read"><v-icon>mdi-numeric</v-icon></v-btn>
      <v-btn icon v-on:click="readOne"><v-icon>mdi-account</v-icon></v-btn>
...
</template>

<script>
...

export default {
...
  methods: {
    save () { // 쓰기 테스트
      console.log('save@@@')
      const db = this.$firebaseDB.getDatabase()
      this.$firebaseDB.set(this.$firebaseDB.ref(db, 'abcd/'), {
        title: 'abcd',
        text: 'tttttt'
      })
    },
    read () { // 실시간 읽기 테스트
      const db = this.$firebaseDB.getDatabase()
      const starCountRef = this.$firebaseDB.ref(db, 'abcd/')
      this.$firebaseDB.onValue(starCountRef, (snapshot) => {
        console.log(snapshot)
        console.log(snapshot.val())
      })
    },
    // readOne () { // 한번만 읽기 테스트(관찰자 사용)
    //   const db = this.$firebaseDB.getDatabase()
    //   return this.$firebaseDB.onValue(this.$firebaseDB.ref(db, 'abcd/'), (snapshot) => {
    //     console.log(snapshot)
    //     console.log(snapshot.val())
    //   })
    // }
    async readOne () { // 한번만 읽기 테스트(get() 사용)
      const dbRef = this.$firebaseDB.ref(this.$firebaseDB.getDatabase())
      const sn = await this.$firebaseDB.get(this.$firebaseDB.child(dbRef, 'abcd/'))
      console.log(sn.val())
    }
  }
}
</script>

• 결과 화면은 아래와 같다.

• 사람 모양의 버튼을 클릭하고 개발자 도구에서 console 탭을 확인하면 아래와 같다.

• 그리고 Firebase 콘솔에 가서 데이터를 변경해도 개발자 도구에는 데이터를 가져오지 않는다.

 

• 이렇게 일회성으로 사용하는 함수는 listening으로 받는 것보다는 데이터를 받아놓는 것이 편하므로 async & await 문법을 사용하여 순차적으로 하는 것이 편할 것이다. firebase 9에서 데이터를 한번에 받는 것에는 두 가지 방식이 있는데 get( ) 방식과 관찰자를 사용하는 방식이 있다. 관찰자 방식은 적용하려고 애써보았지만 계속 오류가 나서 get( ) 방식으로 작성하였다.
  • 참고로 async & await 문법을 더 알고 싶다면 아래의 링크에서 더 공부하길 바란다.
  • https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

 

• memi dev 유튜브 강의 보기
• https://memi.dev/board/lecture/1597406432499
• https://www.youtube.com/watch?v=4sFUGB9MV0M 

16 realtime 쓰고 읽기 : memi

 

 

 

---

해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---