넷플릭스 클론코딩 11 라우팅 페이지

기본적으로 접속을하면 로그인 권한에 따른 브라우저 라우트 설정을 한다.

app.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Home, Browse, SignIn, SignUp } from './pages';
import * as ROUTES from './constants/routes';
import { IsUserRedirect, ProtectedRoute } from './helpers/routes';
import { useAuthListener } from './hooks';

export default function App() {
  const { user } = useAuthListener();

  return (
    <Router>
      <Routes>
        <Route path={ROUTES.SIGN_IN} element={<IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE}><SignIn /></IsUserRedirect>} />
        <Route path={ROUTES.SIGN_UP} element={<IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE}><SignUp /></IsUserRedirect>} />
        <Route path={ROUTES.BROWSE} element={<ProtectedRoute user={user}><Browse /></ProtectedRoute>} />
        <Route path={ROUTES.HOME} element={<IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE}><Home /></IsUserRedirect>} />
      </Routes>
    </Router>
  );
}

src/hooks

index.js

export { default as useAuthListener } from './use-auth-listener';
export { default as useContent } from './use-content';

use-auth-listener.js

import { useState, useEffect, useContext } from 'react';
import { FirebaseContext } from '../context/firebase';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

export default function useAuthListener() {
  const [user, setUser] = useState(JSON.parse(localStorage.getItem('authUser')));
  const { firebase } = useContext(FirebaseContext);
  const auth = getAuth(firebase);

  useEffect(() => {
    const listener = onAuthStateChanged(auth, (authUser) => {
      if (authUser) {
        localStorage.setItem('authUser', JSON.stringify(authUser));
        setUser(authUser);
      } else {
        localStorage.removeItem('authUser');
        setUser(null);
      }
    });

    return () => listener();
  }, [auth]);

  return { user };
}

use-content.js

import { useEffect, useState, useContext } from 'react';
import { FirebaseContext } from '../context/firebase';
import { collection, getDocs } from 'firebase/firestore';
import { getFirestore } from "firebase/firestore";

export default function useContent(target) {
  const [content, setContent] = useState([]);
  const { firebase } = useContext(FirebaseContext);

  const db = getFirestore(firebase);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const querySnapshot = await getDocs(collection(db, target));
        const allContent = querySnapshot.docs.map((contentObj) => ({
          ...contentObj.data(),
          docId: contentObj.id,
        }));

        setContent(allContent);
      } catch (error) {
        console.log(error.message);
      }
    };

    fetchData();
  }, [db, target]);

  return { [target]: content };
}

helpers/

routes.js

import { Navigate } from 'react-router-dom';

export function IsUserRedirect({ user, loggedInPath, children }) {
  return user ? <Navigate to={loggedInPath} /> : children;
}

export function ProtectedRoute({ user, children }) {
  return user ? children : <Navigate to="signin" />;
}

트러블 슈팅

대부분의 튜토리얼을 따라가면서 생기는 오류는 Firebase 9버전과 react-router-dom 6버전을 사용하는 현재 상태에 따른 오류들이다 그것을 해결하면된다.

firebase.firestore is not a function 오류는 Firebase 9에서 Firestore를 초기화하는 방식이 변경되었기 때문에 발생 이전에는 firebase.firestore()를 사용하여 Firestore를 초기화했지만, Firebase 9에서는 getFirestore() 메소드를 사용해야 한다.

접속을 하면 바로 browse로 들어가지고 콘솔창을 보면 db가 정상적으로 받아와 지는것을 볼 수 있다.