firbase는 원래 DB였지만 구글이 양육했다.

언제?
실제프로젝트에서는 firebase를 잘 사용하지 않는다. 아이디어를 테스팅하는 프로토타입을 만드는 용도로 아주좋다. 이후, 아이디어가 시장성이 있다고 생각되면, 그때 본격적으로 프로젝트를 착수한다.
근데 실제로 가격정책을 확인해보면 걱정하지 않아도 될 것 같다.

Setup

firebase에서 프로젝트를 만들어주고, 웹을 선택한다.
https://firebase.google.com/docs/reference/node?hl=ko&authuser=0를 확인해보자
npm i firebase@9.6.1
npm i react-router-dom@5.3.0

firebase.js

import * as firebase from "firebase/app";

const firebaseConfig = {
  apiKey: "AIzaSyBJU6MmddOEkOP560vFLwhKFVtVz1EzMEA",
  authDomain: "nwitter-1bba1.firebaseapp.com",
  databaseURL: "https://nwitter-1bba1.firebaseio.com",
  projectId: "nwitter-1bba1",
  storageBucket: "nwitter-1bba1.appspot.com",
  messagingSenderId: "556543978252",
  appId: "1:556543978252:web:5fb7e6a2a4560867e5b729",
};

export default firebase.initializeApp(firebaseConfig);

dotenv setup

도텐브를 사용해도 빌드한 이상 보안은 사실 소용이 없다. github에만 보안이 적용된다. 물론 이후에 보안설정을 할 것이다.

Router setup

Components/Router.js

import React, { useState } from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";

const AppRouter = ({ isLoggedIn }) => {
  return (
    <Router>
      <Switch>
        {isLoggedIn ? (
          <>
            <Route exact path="/">
              <Home />
            </Route>
          </>
        ) : (
          <Route exact path="/">
            <Auth />
          </Route>
        )}
      </Switch>
    </Router>
  );
};
export default AppRouter;

App.js

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";
import { useState } from "react";
import AppRouter from "./Router";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return <AppRouter isLoggedIn={isLoggedIn} />;
}

export default App;

파일구조는 위 사진과 같다.