Firebase | 채팅 웹 애플리케이션 (3) 웹 앱 프로젝트에 세팅하기(React JS)

1. React 프로젝트 생성

create-react-app을 이용해 빠르게 만들어~~

 

 

그 후 navigating에 필요한 react-router-dom과 firebase 패키지를 인스톨해주기

npm i react-router-dom firebase

 

components / pages / helpers / services 폴더를 추가하였음

 

프로젝트 구조

✔️components - 재사용 가능한 컴포넌트들이 추가될 폴더

✔️helpers - 재사용 가능한 메서드들이 추가될 폴더

✔️pages - view들이 추가될 폴더

✔️services - 서드파티 서비스들

 

2. App.js에 Route 설정

 

PrivateRoute와 PublicRoute HOC 만들기 👇

PrivateRoute - 로그인 한 유저만 접근 가능

import React from "react";
import { Route, Redirect } from "react-router-dom";

function PrivateRoute({ component: Component, authenticated, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        authenticated === true ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { from: props.location } }}
          />
        )
      }
    />
  );
}

export default PrivateRoute;

 

PublicRoute - 로그인 하지 않은 유저만 접근 가능

import React from "react";
import { Route, Redirect } from "react-router-dom";

function PublicRoute({ component: Component, authenticated, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        authenticated === false ? (
          <Component {...props} />
        ) : (
          <Redirect to="/chat" />
        )
      }
    />
  );
}

export default PublicRoute;

 

+) useReducer Hook을 이용해 상태값을 관리..

✔️initialState - 상태값의 초기값

✔️reducer - 상태값을 변경해주는 곳. 순수 함수로 작성되어야 함. state인자값으로 가장 처음엔 initialState가 들어오게 됨.

✔️useReducer - 리액트에서 제공하는 hook으로, 상태값 관리에 유용함.

const initialState = {
  authenticated: false,
  loading: true,
};

function reducer(state, action) {
  switch (action.type) {
    default:
      return state;
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const { authenticated } = state;
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <PublicRoute
          path="/signup"
          authenticated={authenticated}
          component={SignUp}
        />
        <PublicRoute
          path="/login"
          authenticated={authenticated}
          component={Login}
        />
      </Switch>
    </Router>
  );
}

3. Firebase Configuration

src/services/firebase.js

import firebase from "firebase";

그리고 필요한 configuration 정보들을 작성.

* databaseURL은 저 가려놓은 부분의 URL입니다.

필요한 값만 작성함

 

만약 저번에 소중히 보관해두었던 SDK 코드를 잃어버렸다면...? 👇

톱니바퀴 아이콘 클릭

설정 > 일반 > 스크롤 밑으로,,,

CDN을 복사해도 되고, 구성을 복사해도 됨