[6장] 라우트 설계를 어떻게 하시나요?

jasongoose commented 1 week ago

🧐 Question

이번에 공부했던 챕터가 클라이언트 라우팅 시스템을 다루다보니 궁금한 점이 생겼는데, 다들 신규로 개발할 페이지의 경로는 어떻게 지정하시나요?

전반적인 경로의 구조, 경로 매개변수 네이밍, 프로젝트에서 라우트를 관리하는 방법 등이 궁금합니다!

📝 Reference

horang-e commented 1 week ago

아무래도 저는 Nextjs를 사용하다 보니 따로 경로 구조를 생각하지 않고 개발을 하는것 같습니다. 네이밍은 기획 문서명, 서비스 명 위주로 영문으로 작성했습니다! 다만 저희 서비스가 늘어날수록 사용하지 않는 서비스를 경로에서 제거하지 못해서 (언젠간 다시 쓸수도 있으니 지우지는 말라하셔서...) 그냥 유저단에 페이지 이동할 수 있는 방법만 막아뒀었습니다.. 어떻게 하는게 좋았을까요? 스크린샷 2024-11-03 오후 8 47 11

kimfield98 commented 1 week ago

https://nextjs.org/docs/getting-started/project-structure

Joie-Kim commented 1 week ago

저희 프로젝트는 메뉴 트리가 정해져 있어서, 그거에 맞춰서 폴더 구조를 만들고 라우터도 폴더명이랑 대부분 동일하게 맞추고 있습니다. (Vue3 사용 중)

예를 들어, 게임 현황 페이지가 있다면 아래와 같이 구성했습니다.

games/status/index.vue ➡️ {도메인}/games/status

그런데 같은 데이터를 노출하는 페이지이지만 데스크탑과 모바일 화면의 메뉴 트리가 다르고, 페이지명이 다를 때.. 라우터를 어떻게 해야하는가....이게 너무 고민 되더라구요. 모노레포로 구성되어 있어서 core, desktop, mobile 폴더가 따로 있고, 각각 라우터는 desktop, mobile에 있지만, URL을 정의한 파일은 core에 있는 상황이거든요............. (왜 데스크탑이랑 모바일이랑 페이지 이름이 다른가... 😭)

예를 들어, 데스크탑에서는 '사용/판매 내역'인데, 모바일에서는 '게임 내역'으로 되어 있음

(데스크탑) games/sells/index.vue ➡️ {도메인}/games/sells

(모바일) games/history/index.vue ➡️ {도메인}/games/sells

아직 해결되지 않은.. 고민입니다......키키..

kimfield98 commented 1 week ago

export const router = createBrowserRouter([
  ...dashboardRoutes,
  ...authRoutes,
  ...orderRoutes,
// 등등 ...
])

export const authRoutes = [
  {
    path: 'auth',
    element: <UnAuthorizedAuthLayout />,
    children: [
      {
        index: true,
        element: <MainPage />
      },
      {
        path: 'sign-up',
        element: <SignUpPage />
      },
      {
        path: 'callback',
        element: <CallbackPage />
      }
    ]
  }
]

FE-StudyWithMe / FE-without-framework

[6장] 라우트 설계를 어떻게 하시나요? #45

🧐 Question

📝 Reference