원티드 3월 프리온보딩 챌린지(2)

사전 과제 제출 결과물

홈페이지 기본 화면

로그인 화면

사이드바를 통한 페이지 이동

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";

import Layout from "./layout/Layout";import 
LoginLayout from "./layout/LoginLayout";
import Home from "./pages/Home";
import LoginPage from "./pages/LoginPage";
import PageA from "./pages/PageA";
import PageB from "./pages/PageB";
import PageC from "./pages/PageC";

function App() {
  return (
    <Router>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="/pageA" element={<PageA />} />
          <Route path="/pageB" element={<PageB />} />
          <Route path="/pageC" element={<PageC />} />
        </Route>
        <Route element={<LoginLayout />}>
          <Route path="/login" element={<LoginPage />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

Outlet을 이용한 중첩 레이아웃 구현

페이지 이동은 React-Router-Dom을 이용한 라우팅을 했으며, React-Router-Dom에 있는 'Outlet'을 사용하여 레이아웃을 구성했다. 로그인 페이지는 헤더와 사이드를 적용시키지 말아달라는 조건이 있었기 때문이다.

페이지별 로그인 여부는 [IsLogin, SetLogin]= useState(false)와 useEffeect를 사용한 방법과 react-cookie 둘 중 어떤 방법이 더 효율적인지 고민 중이다.

3월에는 레이아웃과 로그인에 관한 커리큘럼을 진행한다고 한다. 챌린지를 진행하는 동안 해당 사전 과제를 어떻게 하면 더 깔끔하고 유지보수성이 좋게 짤 수 있는지 고민해볼 수 있는 좋은 기회라고 생각한다. 현재 프로젝트도 같이 하고 있지만 둘 다 잡을 수 있게 열심히 해야겠다. 😥