firbase는 원래 DB였지만 구글이 양육했다.
언제?
실제프로젝트에서는 firebase를 잘 사용하지 않는다. 아이디어를 테스팅하는 프로토타입을 만드는 용도로 아주좋다. 이후, 아이디어가 시장성이 있다고 생각되면, 그때 본격적으로 프로젝트를 착수한다.
근데 실제로 가격정책을 확인해보면 걱정하지 않아도 될 것 같다.
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);
도텐브를 사용해도 빌드한 이상 보안은 사실 소용이 없다. github에만 보안이 적용된다. 물론 이후에 보안설정을 할 것이다.
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;
파일구조는 위 사진과 같다.