파이어베이스 auth 연동 방법

1.firebase의 firestore 세팅

1. 프로젝트 생성

2. Authentication에 들어가 원하는 인증 방식 연결

3. 패키지를 다운 받는다

$ npm init
$ npm install --save firebase

4. firebase를 연동할 페이지에 아래 와 같은 코드를 삽입 하면 firebase의 연동은 끝!!

import firebase from 'firebase';
const firebaseConfig = {
    apiKey:                                       , //key는 git에 올리지 말것
    authDomain: "nextsns-e75b1.firebaseapp.com",
    projectId: "nextsns-e75b1",
    storageBucket: "nextsns-e75b1.appspot.com",
    messagingSenderId: "181774016164",
    appId: "1:181774016164:web:330a272847c4dcc85b5031",
    measurementId: "G-4W87LLZGK4"
  };
  firebase.initializeApp(firebaseConfig);

📍여기서 주의 할점!!! : firebase.initializeApp(firebaseConfig); 가 두번 호출 될 경우에는'Firestore has already been started and its settings can no longer be changed' 메세지가 뜨게 되니깐 주의 !! '

🎈추가 적으로 파이어베이스 세팅 코드는 아래 문서 참조!!

Learn more about Web and Firebase

👉페이지 별로 초기화를 하기 때문에 다른페이지에서는 초기화가 안될 수도 있고

또한 새로고침 하여 다시 들어 올 경우 다시 초기화 될 수있는 위험이 있기 때문에 파일로 만들어서 관리하는 것이 효율 적🔨

5. apikey는 git에 올라가면 안되므로 세개의 파일로 나누어서 관리한다

(1) firebaseconfig.js :firebase의 config 내용을 관리하는 파일 (.gitignore 에 이파일을 작성(git에 이 파일을 빼고 업로드가 됨))

const firebaseConfig = {
    apiKey: "                                    ", //key는 git에 올리지 말것
    authDomain: "nextsns-e75b1.firebaseapp.com",
    projectId: "nextsns-e75b1",
    storageBucket: "nextsns-e75b1.appspot.com",
    messagingSenderId: "181774016164",
    appId: "1:181774016164:web:330a272847c4dcc85b5031",
    measurementId: "G-4W87LLZGK4"
  };
  export default firebaseConfig;

(2) db.js: firebase를 초기 세팅하는 코드를 넣은 파일

import firebase from './firebase';

const db = firebase.firestore();
const settings = {timesstampsInSnapshots:true};
db.settings(settings);

export default db;

(3) firebase.js: firebase 를 실행하는 파일

import firebase from 'firebase';
import firebaseConfig from '../config/firebaseconfig';

  // try: 초기화가 되어있으면 실행 
  // catch: 안되어 있으면 초기화 실행 하는 구문
try{
    firebase.app(); 
}
catch{
    firebase.initializeApp(firebaseConfig);
}

  export default firebase;