파이어베이스 사용기

파이어베이스 로그인 후 프로젝트를 하나 생성한다.

애널리틱스 사용하지 않으면 체크 안해도 됨.


밑에있는 </>모양 클릭한다.


파이어베이스 호스팅을 하지않아 체크를 안하고 넘어간다.


이 구문들을 복사해놓자

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: 'AIzaSyATJcybddzK1Kkqr98erjUhaq3iEiLlye0',
  authDomain: 'example-fa01a.firebaseapp.com',
  projectId: 'example-fa01a',
  storageBucket: 'example-fa01a.appspot.com',
  messagingSenderId: '946125928362',
  appId: '1:946125928362:web:2bdc886f782c05c6ca5dd3',
  measurementId: 'G-QPR8QBRSTD',
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);


Authentication 로 넘어가 추가할 부분들을 추가하자.


로그인 제공업체 추가시 코드로 넘어간다.

리액트 코드 작성

yarn create react-app someThing

npm 사용시

npm install firebase

yarn 사용시

yarn add firebase

src folder에 들어가 firebase.js파일을 만든 후 전에 복사해놓은 내용들을 넣는다.

const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
  measurementId: '',
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

그 후엔 자신이 어떻게 사용할지 구현하며 로그인에 작성할 코드를 만들면 된다.