firebase setting

firebase : 백엔드 서버 서비스 혹은 앱 개발 플랫폼(시간을 절약하는 데 사용할 수 있는 서비스)

계정생성, 로그인, 로그아웃, 배포 등등 아주 편리하게 사용가능!

 

firebase를 쓰면 안되는 상황

: 현업에서도 쓰기는 좋다! 하지만 앱이 성장하여 커스텀 해야하는 상황에서는 좋지 않다.

⇒ 기본적으로 모든 응용 프로그램에 사용될 수 있도록 설계 되었기 때문

 

1. firebase 사이트에서 기본 setting

firebase 로그인 후 프로젝트 생성 후 프로젝트에 firebase를 연결(웹) npm firebase를 설치하고 sdk 코드가 나오면

src → firebase.tsx 파일을 만들고 코드를 복붙

 

2. firebase auth setting

firebase 사이트 빌드 들어가서 auth 클릭 후

로그인/ 비밀번호 설정으로 완료 후

firebase.tsx에 getAuth import

 

3. db 생성

firebase 사이트 좌측 빌드> firestore Database로 접속해 데이터베이스를 만들고 테스트 모드에서 시작을 선택

cloud firestore의 위치는 그렇게 상관없지만 최대한 가까운 asia로 설정해주자. 

//firebase.tsx



import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "AIzaSyD-3KUkE5uaMWlKpe2ObTqRRzOEi5x-m9E",
  authDomain: "ntwitter-reloaded-8d95c.firebaseapp.com",
  projectId: "ntwitter-reloaded-8d95c",
  storageBucket: "ntwitter-reloaded-8d95c.appspot.com",
  messagingSenderId: "19506617330",
  appId: "1:19506617330:web:17346fb389d13be394e96b"
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

export const storage=getStorage(app);

export const db=getFirestore(app);

 

컴포넌트에서 자주 사용될 수 있기 때문에 auth, db, storage는 export 해주자!

 

//app.tsx

function App() {
  const [isLoading, setIsLoading]=useState(true);
  const init = async() => {
    await auth.authStateReady();// 
    setIsLoading(false);
  };
  useEffect(()=>{
    init();
  },[]);
  return (
    <>
    <GlobalStyles/>
    {isLoading ? <LoadingScreen/>:<RouterProvider router={router} />}
    
    </>
  )
}

 

authStateReady() : 최초 인증 상태가 완료 될 때 실행되는 promise를 return함

⇒ firebase가 쿠키와 토큰을 읽고 백엔드와 소통해서 로그인 여부를 확인하는 동안 기다리겠다는 뜻!

 

*firebase authentication을 작동하는 방식은 기본적으로 firebase SDK와 firebase server이다!(쿠키와 토큰 다 해결)

firebase는 사용자가 로그인했는지 여부와 사용자가 누구인지 알기위한 시간 필요!

⇒ 그러긴 위해서는 loading screen이 필요함

 

이제 내 프로젝트에 사용자가 회원가입과 로그인, 로그아웃과 함께 db 생성도 가능하다!