트위터 클론코딩 개발환경 설정 firebase + react

react app 생성

npx create-react-app 파일명

firebase 콘솔로 이동

npm i firebase@9.6.1

src > firebase.js에 firebase 계정 내용 추가

import { initializeApp } from "firebase/app";
const firebaseConfig = {
  apiKey: "AIzaSyC-4uKw9IU-Q2oWkYjHhZaGlmRYJEUsryg",
  authDomain: "nwitter-f4232.firebaseapp.com",
  projectId: "nwitter-f4232",
  storageBucket: "nwitter-f4232.appspot.com",
  messagingSenderId: "420565893759",
  appId: "1:420565893759:web:3865349e1b9623df89354a",
};
export default initializeApp(firebaseConfig);

=>.env파일을 통해 정보키를 암호화할 수 있음

index.js 내용 추가

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";

react-router-dom 설치

npm i react-router-dom@5.3.0

realtime database 생성

fbase 9 버전 이상

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

firebase authentication 설정

Authentication>sign-in method>새제공업체 추가

• 깃허브 설정 방법
  github 로그인 > settings > OAuth apps > new application
  Home pageURL : Authentication에서 제공하는 url의 .com까지
  Authorization callback URL : Authentication에서 제공하는 url 기입
  => 생성된 clinent ID와 secrets를 Authentication에 저장

firebase api key 오류

code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly.", a: null}

1. .env파일이 루트에 있는지 확인하시고

2. .env파일 내용에 각 key 마다 , 가 붙어있나 확인해보세요!
   그대로 firebase 홈페이지에서 js SDK파일 복사해왔으면
   각 키마다 뒤에 ,가 붙어있을거에요 그러면 안돼요!

ex) 잘못된상황
REACT_APP_API_KEY: apiKey내용,
REACT_APP_AUTH_DOMAIN: AUTH도메인키 내용,
ex) 잘된 상황
REACT_APP_API_KEY: apiKey내용
REACT_APP_AUTH_DOMAIN: AUTH도메인키 내용

로그인한 상태 확인

콘솔>application>indexedDB