"Firebase 만져 보았다"

개요

처음으로 Firebase를 사용해 보았습니다.
앞으로 새롭게 앱을 만들 때 곧바로 어느 정도까지 진행되도록 순서를 정리합니다.

한 번 해보겠다고 생각했던 것보다 쉽게 ​​만들 수 있으므로 추천합니다.

사용한 서비스

Cloud Firestore → 서버를 통하지 않고 Firestore에 직접 액세스할 수 있으며 실시간으로 업데이트된 데이터를 얻을 수 있습니다.

Authentication → 애플리케이션에 쉽게 인증 기능을 추가할 수 있다

Hosting → 배포가 편해질 수 있음

환경을 만들 때까지의 흐름

Node.js 설치 (LTS)

Firebase 계정 만들기

프로젝트 만들기

자신이 만들고 싶은 앱의 이름을 입력하고 만듭니다.

Firestore로 DB 만들기

만들 때 프로덕션 모드 또는 테스트 모드를 선택할 수 있습니다. 프로덕션 모드는 미세한 사용 권한을 설정할 수 있습니다.

Firestore의 데이터 구조는 Collection, document, data라고 하는 식으로 나누어져 있어, 조금 이해하기 어렵습니다만 만져 보면 곧바로 이해할 수 있다고 생각합니다.

.env 만들기

Firebase의 ProjectSetting → Firebase SDK snippet에서 Config를 체크하면 스크립트가 표시됩니다.
이 스크립트를 바탕으로 Firebase의 APIKEY 등의 파라미터를 기재합니다.

Authentication 설정

Authentication으로 이동하면 화면에 다양한 인증 방법이 표시되므로 원하는 것을 선택합니다.
선택하고 체크를 넣는 것만으로 Firebase측의 하는 것은 끝입니다.


Login.tsx

const Login: React.FC = (props: any) => {
  const [isLogin, setIsLogin] = useState(true);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  useEffect(() => {
    const unSub = auth.onAuthStateChanged((user) => {
      user && props.history.push("/");
    });
    return () => unSub();
  }, [props.history]);

// 省略
  return (
  );
};

export default Login;

호스팅 설정

Hosting으로 이동하여 Firebase CLI 설치 명령 입력

sudo npm install -g firebase-tools
firebase init

그리고 터미널에 배포할 프로젝트를 선택합니다.

firebase deploy

그러면 Hosting URL이 표시되므로 여기에 액세스

요약

업무에서는 너무 쓸 기회가 없는 것 같지만, 실제로 사용해 보고, 빠르고 편리하다고 느꼈기 때문에 앞으로 좀 더 만져보고 싶습니다.