[노마드코더] #1 Introduction

Firebase

Firebase를 활용해 React 환경에서 Realtime CRUD와 Authentication System을 구현해보자!

 

Firebase의 다음 4가지 기능을 활용할 것이다

Cloud Firestore / Cloud Storage / Authentication / Hosting

 

* Google의 Firebase나 AWS의 Amplify 등 Backend as a Service는 어디까지나 플랫폼의 서버를 빌려서 쓰는 것이기 때문에, 간단한 토이 프로젝트나 실제 서비스의 데모 버전에만 적합하다

 

Firebase Pricing🔽

Firebase Pricing

---

React+Firebase Setup

* Firebase V9 업데이트에 따라 Firebase 'compat' 버전 및 react-router-dom 5 버전을 사용!

 

우선 CRA 프로젝트를 생성하고 사용하지 않을 파일들을 정리해주자!

 

일단 Google Analytics는 제외하고 Firebase 프로젝트를 생성한 후, Web을 선택

호스팅은 설정하지 말고 앱 등록, Firebase SDK 추가

터미널에 다음 명령어를 입력해 firebase를 추가해주자

npm i firebase@9.6.1

 

[src/firebase.js]

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

const firebaseConfig = {
  apiKey: "생성된Key",
  authDomain: "생성된Key",
  databaseURL: "생성된Key",
  projectId: "생성된Key",
  storageBucket: "생성된Key",
  messagingSenderId: "생성된Key",
  appId: "생성된Key",
};

export default firebase.initializeApp(firebaseConfig);

src 폴더에 firebase.js 파일을 생성하고 Firebase SDK 코드를 추가해준다

* databaseURL이 없다면 Firebase의 Realtime Database 탭에서 생성해서 추가

 

[src/index.js]

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import firebase from "./firebase";

console.log(firebase);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

index.js에 firebase를 import하고 콘솔을 찍어보자

 

options에 정보가 잘 넘어온다면 성공!

+++

보안을 위해 Firebase SDK의 Key들은 환경변수로 관리해주자

 

[.env]

REACT_APP_API_KEY=생성된 Key
REACT_APP_AUTH_DOMAIN=생성된 Key
REACT_APP_DATABASE_URL=생성된 Key
REACT_APP_PROJECT_ID=생성된 Key
REACT_APP_STORAGE_BUCKET=생성된 Key
REACT_APP_MESSAGIN_ID=생성된 Key
REACT_APP_APP_ID=생성된 Key

.env 파일을 생성하고 생성된 Key를 넣어주자

* CRA는 앞에 REACT_APP을 붙여줘야 하고, ""(따옴표)는 넣지 않는다

 

[.gitignore]

# key
.env

.gitignore 파일에 .env 파일을 추가

 

[src/firebase.js]

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGIN_ID,
  appId: process.env.REACT_APP_APP_ID,
};

export default firebase.initializeApp(firebaseConfig);

이렇게 .env 파일에서 불러와준다

---

Router Setup

components와 routes 폴더를 생성, App.js를 이동시키고 경로를 수정

해당 프로젝트에서는 '인증/홈/프로필/프로필수정' 화면을 구현할 것이기 때문에,

routes 폴더에 다음 4가지 파일을 추가해준다

 

[src/routes/Auth.js]

import React from "react";

const Auth = () => <span>Auth</span>;
export default Auth;

[src/routs/Home.js]

import React from "react";

const Home = () => <span>Home</span>;
export default Home;

[src/routes/Profile.js]

import React from "react";

export default () => <span>Profile</span>;

[src/routes/EditProfile.js]

import React from "react";

export default () => <span>Edit Profile</span>;

 

npm i react-router-dom@5.3.0

react-router-dom을 5.3.0 버전으로 설치해주자

 

components 폴더에 다음과 같이 Router.js 파일을 추가하자

 

[src/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 = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <Router>
      <Switch>
        {isLoggedIn ? (
          <>
            <Route exact path="/" component={Home} />
          </>
        ) : (
          <Route exact path="/" component={Auth} />
        )}
      </Switch>
    </Router>
  );
};
export default AppRouter;

첫 화면에 로그인 여부에 따라 삼항연산자로 서로 다른 컴포넌트를 띄워주자

* SEO는 배제하고 안정적인 HashRouter 사용

 

[src/components/App.js]

import React from "react";
import AppRouter from "./Router";

function App() {
  return <AppRouter />;
}

export default App;

App.js에 띄워주자

 

본 내용은 노마드코더의 '트위터 클론코딩'을 바탕으로 작성되었습니다.