[노마드 코더] ReactJS 트위터 클론 코딩 - Router

이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)

https://nomadcoders.co/nwitter

트위터 클론코딩 – 노마드 코더 Nomad Coders

---

 

 

이번에는 여러 가지 기본 global styels 중에 styled components를 사용해 routing설정을 해 보자.

App 파일에서 새로운 라우터를 생성할 것이다. 

 먼저 src 폴더 아래에 componentes 폴더를 생성 후 layout.tsx 파일을 생성해 준 후 여기에 Outlet Compnent를 반환해 준다.  그리고 마찬가지로 src 폴더 아래에 routes 폴더를 생성 후 home.tsx와 profile.tsx를 생성해 준다. 그리고 구분 가능한 문자를 리턴해주자.

 

layout.tsx

import { Outlet } from "react-router-dom";

export default function Layout() {
    return (
        <>
            <h2>layout</h2>
            <Outlet />
        </>
    )
}

 

home.tsx

export default function Home() {
    return <h1>Home!</h1>;
}

profile.tsx

export default function Profile() {
    return <h1>Porfile</h1>
}

 

이제 App.js에 routing 관련 코드를 입력해 준다.

import { createBrowserRouter, RouterProvider } from "react-router-dom"
import Layout from "./components/layout"
import Profile from "./routes/profile"
import Home from "./routes/home"

const router = createBrowserRouter([
  {
    path:"/",
    element: <Layout />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "profile",
        element: <Profile />
      },
    ]
  }
])


function App() {
  return <>
    <RouterProvider router={router} />
  </>
}

export default App

 Outlet을 이용하면 중첩된 라우트를 랜더링 할 수 있다. 기본 주소인 "/"에 접속하게 되면 가장 상위의 <Layout />이 먼저 랜더링 되고, 그 후에 하위에 설정된 주소에 따라 Home과 Profile이 랜더링 된다. 여기서 Home은 주소값이 없기 때문에 "/"기본 주소에서 보일 것이고 "/profile"의 주소를 추가로 입력하면 profile 페이지가 보일 것이다.

기본 "/' 주소

"/profile" 주소

 이렇게 Outlet Component를 이용해 기본적인 큰 틀의 Layout 아래에 해당 주소들을 중첩해서 관리할 수 있다. 

 

 여기에 추가로 routes 폴더에 login.tsx, create-account.tsx를 만들어 준다.

export default function Login() {
    return <h1>login</h1>
}

export default function CreateAccount() {
    return <h1>create-account</h1>
}

 login과 create-account의 경우 layout안에 생성하지 않을 것이다. layout과는 별개의 페이지로 회원가입과 로그인 페이지를 구성할 것이기 때문이다. 따라서 router에서 새롭게 주소를 추가해 준다.

import { createBrowserRouter, RouterProvider } from "react-router-dom"
import Layout from "./components/layout"
import Profile from "./routes/profile"
import Home from "./routes/home"
import Login from "./routes/login"
import CreateAccount from "./routes/create-account"

const router = createBrowserRouter([
  {
    path:"/",
    element: <Layout />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "profile",
        element: <Profile />
      },
    ]
  },
  {
    path: "/login",
    element: <Login />
  },
  {
    path: "/create-account",
    element: <CreateAccount />
  }
])


function App() {
  return <>
    <RouterProvider router={router} />
  </>
}

export default App

 "/login"과 "/create-accrount" 페이지를 열어 보면 layout에 감싸지지 않은 독립적인 페이지로 나타난다.

"/login" page

"/create-account" page

 routing의 뼈대를 살펴보면 다음과 같을 것이다.

 

┌ Layout ┌ Home

│             └ Profile

├ Login

└ Create-Account

---

 이제 style components를 이용해 글로벌 스타일을 만들어보자. 

const GlobalStyles = createGlobalStyle`
  ${reset};
  * {
    box-sizing: border-box;
  }
  body {
    background-color: black;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  }
`;

style-reset을 이용해 기본적인 스타일을 초기화시켜 주고, 배경색, 글자색, 폰트 등의 간단히 전체적인 페이지의 색을 설정해 준다. 그리고 <GlobalStyles />을 같이 return 시켜주면 적용이 된다.

import { createBrowserRouter, RouterProvider } from "react-router-dom"
import Layout from "./components/layout"
import Profile from "./routes/profile"
import Home from "./routes/home"
import Login from "./routes/login"
import CreateAccount from "./routes/create-account"
import { createGlobalStyle } from "styled-components"
import reset from "styled-reset"

const router = createBrowserRouter([
  {
    path:"/",
    element: <Layout />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "profile",
        element: <Profile />
      },
    ]
  },
  {
    path: "/login",
    element: <Login />
  },
  {
    path: "/create-account",
    element: <CreateAccount />
  }
])

const GlobalStyles = createGlobalStyle`
  ${reset};
  * {
    box-sizing: border-box;
  }
  body {
    background-color: black;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  }
`;

function App() {
  return <>
    <GlobalStyles />
    <RouterProvider router={router} />
  </>
}

export default App

 

이제 로그인을 위한 간단한 Authentication을 구현해 보자. 기본적으로 Firebase authentication을 작동하는 방식은 Firebase SDK와 Firebase sever이다. 사용자가 서버에 들어오면 Firebase SDK는 쿠키와 토큰을 가져와서 서버와 함께 확인한다. 따라서 유저의 정보 및 확인과 데이터를 가져오는 시간을 기다리는 동안 보여줄 로딩화면을 만들어야 한다.

App() 함수에 다음과 같이 작성해 보자.

function App() {
  const [isLoading, setLading] = useState(true);
  const init = async() => {
    // wait for firebase
    setIsLading(false);
  }
  useEffect(()=>{init();},[])
  return <>
    <GlobalStyles />
    <RouterProvider router={router} />
  </>
}

 useState로 로딩 변수를 설정하고 페이지가 시작될 때 init() 함수가 실행될 것이다. 

 components 폴더에 loading-screen.tsx파일을 생성 후 로딩 페이지를 만들어 주자.

import styled from "styled-components"

const Wrapper = styled.div`
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
`;

const Text = styled.span`
    font-size: 24px;
`;

export default function LoadingScreen() {
    return <Wrapper><Text>Loading...</Text></Wrapper>
}

 이제 App()에서 3항 연산자를 이용해 Loading시에는 <LoadingScreen />를 보여주고 아닐 경우 <RouterProvider />를 보여주도록 수정하자. 그리고 확인을 위해 setTimeout() 함수를 이용하여 2초 동안만 표시되도록 확인해 보자.

function App() {
  const [isLoading, setLading] = useState(true);
  const init = async() => {
    // wait for firebase
    setTimeout(() => setIsLading(false), 2000);
  }
  useEffect(()=>{init();},[])
  return <>
    <GlobalStyles />
    {isLoading ? <LoadingScreen /> : <RouterProvider router={router} />}
  </>
}

 api의 요청시간을 메워주는 페이지이기 때문에 아주 중요하다. 

---

Firebase Project

https://firebase.google.com/?hl=ko

Firebase | Google's Mobile and Web App Development Platform

firebase로 이동 후 이제 firebase 프로젝트를 생성해 준다.

웹앱으로 앱을 추가해 준다.

프로젝트 설정에서 npm 설정을 복사할 수 있다.

먼저 firebase를 인스톨한다.

npm install firebase

그리고 src폴더 아래에 firebase.ts 파일을 만든 후 SDK내용들을 복사해서 붙여 넣자.

이렇게 firebase의 초기설정을 할 수 있다.

 

 

다음 글 :

[노마드 코더] ReactJS 트위터 클론 코딩 - Authentication
[노마드 코더] ReactJS 트위터 클론 코딩 - Github Login
[노마드 코더] ReactJS 트위터 클론 코딩 - Tweeting

[노마드 코더] ReactJS 트위터 클론 코딩 - Uploading Images with S3
[노마드 코더] ReactJS 트위터 클론 코딩 - Fetching Timeline

[노마드 코더] ReactJS 트위터 클론 코딩 - Realtime Tweets & Delete

[노마드 코더] ReactJS 트위터 클론 코딩 - Edit tweet(code challenge)

[노마드 코더] ReactJS 트위터 클론 코딩 - Pfofile page