개인프로젝트 - 블로그 만들기 #1

라우트 설정

설계에 맞도록 라우트를 설정

• 우선 블로그의 기준 페이지를 먼저 만들기로 함

//app.jsx
import { RouterProvider, createBrowserRouter } from "react-router-dom"
import Layout from "./components/layout"
import Algorithm from "./routes/algorithm"
import Home from "./routes/home"
import DevTip from "./routes/devTip"
import Project from "./routes/project"
import TechInsight from "./routes/techInsight"
import TechStack from "./routes/techStack"

const router = createBrowserRouter([
  {
    path:"/",
    element: <Layout />,
    children : [
      {
        path:'',
        element: <Home />,
      },
      {
        path:'algorithm',
        element: <Algorithm />,
      },
      {
        path:'devtip',
        element: <DevTip />
      },
      {
        path:'project',
        element: <Project />
      },
      {
        path:'techinsight',
        element: <TechInsight />
      },
      {
        path:'techstack',
        element: <TechStack />
      },
      {
        path:'techtrend',
        element: <Algorithm />
      },
    ]
  }
]) 

function App() {

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

export default App

• 레이아웃 : 사이드바, 각 게시판을 돌아다니는 네비게이션 역할을 함
• 홈페이지(/) : 상단에 내 간단한 소개와 깃헙링크 등 표현 ,조회수가 높은 순으로 인기 게시글 표현, today, total 방문자 수 표현, 하단에 익명으로 실시간 채팅 기능도 표현해볼 예정
• 알고리즘(/algorithm) : 백준, 프로그래머스의 알고리즘 문제 중 기억해두고 싶은 내용을 게시글로 작성할 예정
• 개발 팁(/devtip) : 개발 관련 활동, 공부를 하던 중 알게 된 것들, 자원 절약 방법이나 효율적인 개발 방법 등을 알게 된다면 작성할 예정
• 프로젝트(/project) : 개인, 팀 프로젝트 진행 시 내가 한 것들을 기록할 예정
• 개발 관련 지식공부(/techinsight) : 개발에 필요한 지식, 개념적이고 원론적인 지식들을 작성할 예정
• 기술 스택(/techstack) : 언어의 문법 혹은 라이브러리 등의 활용법에 관련된 내용을 작성할 예정
• 기술 트렌드(/techtrend) : 관심있는 새로운 기술 관련된 동향을 스크랩하여 작성할 예정