Firebase 설정

이에 대한 코드는 Github Branch에서 찾을 수 있습니다.

지금 약간의 닭 또는 계란 상황이 있습니다. 나는 그것을 사용할 수 있도록 DB 설정을 선호하지만 먼저 Vuex 설정에서 내 상태를 관리하는 것으로 시작할 수 있다고 생각합니다. 데이터베이스를 설정하고 나중에 한 곳에서 인증을 추가하기 위한 빠른 솔루션을 제공하기 위해 Firebase에 갈 것입니다. 이제 Firebase를 설치하고 초기화해 보겠습니다.

설정 #

첫 번째는 Firebase 콘솔로 이동하여 새 프로젝트를 설정하는 것입니다. 완료되면 Firebase 프로젝트에 대한 액세스 권한을 부여할 새 애플리케이션을 추가하려고 합니다. 프로젝트 개요를 선택한 다음 +Add app를 선택하고 웹앱을 선택합니다.





그런 다음 애플리케이션에 이름을 지정하면 앱이 생성되고 앱을 초기화할 때 필요한 SDK 구성이 제공됩니다. 해당 데이터를 저장하면 곧 main.js 파일에 추가하여 Firebase가 초기화된 상태로 실행됩니다.





NPM으로 Firebase SDK를 설치하는 방법은 다음과 같습니다.

npm install firebase

기본 파일에 설치되면 이 앱용으로 생성된 구성 파일을 사용하여 Firebase를 초기화합니다.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import firebase from 'firebase/app';

// Initialize Firebase
const firebaseConfig = {
  apiKey: 'AIzaSyDbYPvxMaECPwjgR06njRfTLFa_skZ9-Qo',
  authDomain: 'pantry-fe77c.firebaseapp.com',
  databaseURL: 'https://pantry-fe77c-default-rtdb.firebaseio.com',
  projectId: 'pantry-fe77c',
  storageBucket: 'pantry-fe77c.appspot.com',
  messagingSenderId: '235929136377',
  appId: '1:235929136377:web:23a498fc887466ce76c628',
  measurementId: 'G-S4ER2JYTKZ',
};
firebase.initializeApp(firebaseConfig);

createApp(App)
  .use(router)
  .mount('#app');

이를 통해 이제 애플리케이션에서 firebase를 사용할 수 있습니다. 그럼 재료를 가져와서 DB에 올리는 메소드를 추가해봅시다.