Firebase 사용해보기 2 (데이터 넣어보기, plugin type 정의, nuxt에서 firebase Type 쉽게쓰기 9.ver 대응)

이전 단계에서 기본적인 셋팅이 끝났으니 실제로 데이터를 넣어보자

 

우선 내가 쓰는 Firebase 요소들 (Realtime은 안쓴다.)

 

1. Nuxt + Composition API + Firebase에서 type추론이 잘 되는 firebase 플러그인화

https://typescript.nuxtjs.org/cookbook/plugins/#iii-combined-inject

Nuxt TypeScript

위의 this에도 context에도 변수를 넣기위해 combined-inject라는 기술을 이용했다.. (솔직히 아직 완벽하게 이해한것은 아님)

nuxt/firebase는 안썼다.. 뭔가 설정하는게 이것저것 귀찮기도 하고 최근에 플러그인을 깊게 배워봐서 그걸 이용해 보고 싶었음 ㅎ

 

~/plugins/firebase.ts

// version 8
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'

// version 9
import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'
import 'firebase/compat/auth'
import 'firebase/compat/storage'

import { Plugin } from '@nuxt/types'



const firebaseConfig = {
  // 본인 설정
}

firebase.initializeApp(firebaseConfig)

declare module 'vue/types/vue' {
  interface Vue {
    $firebase: firebase.app.App
    $auth: firebase.auth.Auth
    $db: firebase.firestore.Firestore
    $storage: firebase.storage.Storage
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions { // root or this 부분 fetch할때 아마 안됨 ssr 설정안해서
    $firebase: firebase.app.App
    $auth: firebase.auth.Auth
    $db: firebase.firestore.Firestore
    $storage: firebase.storage.Storage
  }
  interface Context { // context 부분
    $firebase: firebase.app.App
    $auth: firebase.auth.Auth
    $db: firebase.firestore.Firestore
    $storage: firebase.storage.Storage
  }
}

const myPlugin: Plugin = (_, inject) => {
  inject('firebase', firebase)
  inject('auth', firebase.auth())
  inject('db', firebase.firestore())
  inject('storage', firebase.storage())
}

export default myPlugin

 

nuxt.config.js

  plugins: [{ src: '~/plugins/firebase.ts', mode: 'client' }],

 

잘 들어가 있다

타입추론도 문제없다.

 

Firebase가 9 version으로 되면서 작성법이 조금 바뀌었다.

버전 8에서 모듈식 웹 SDK로 업그레이드  |  Firebase Documentation

  // version 9 insert data
  try {
    const result = await setDoc(doc(root.$db, 'tetete', 'test'), {
      id: 2313,
      to: 'test@example.com',
      message: {
        subject: 'Test1',
        text: 'text2',
      },
    })
    console.log(result)
  } catch (e) {
    console.error(e)
  }