😢현재 진행중인 FE 개발 패턴 공부 및 이해하기

[silverttthin]

전반적으로 생성된 프로젝트 구조가 배운 것들이랑 공부한것들이랑 많이 달라 숨이 턱 막혀 일단 제가 모르는 것들을 명확히 하고 그것들을 먼저 해결하는 방향을 택했습니다.

1. 생성 배경을 잘 모르는 파일 및 경로들이 많아 일단 직관적으로 분석해보았다.

   assets: 밀리루틴 로고 사진

   components 폴더

   • Element : Button, Header, Footer, Jumbotron, Navitem 컴포넌트 저장소

     → 내가 만들어야 할 Category 컴포넌트들도 여기에 넣어놔야 할듯?

   • Layout :

     • index.ts : 모르겠음
     • MainLayout.tsx : 화면 전반적인 레이아웃인듯

   • features 폴더

     • auth
       • routes
         • index.tsx : 경로가 login or signup일 때 로드할 element 이끌기
       • types
         • index.ts : 타입 지정해둔 것들
       • index.ts : routes와 type를 export..? 잘모르겠음
     • misc
       • routes
         • index.tsx : 점보트론 관련된 landing.tsx를 export..?
         • landing.tsx : 점보트론 컴포넌트 로드
       • index.ts : routes 전부 export..?

   • routes 폴더

     • index.tsx : 메인 페이지 로드할 것들 지정하는 핵심 파일. 헤더, 푸터, 내부 content(예정) 리턴하도록 돼있음

   .. 등등 이외는 기본 세팅파일이나 위보다 차선순위인듯

   각기 만들어둔 요소들을 index라는 동일한 파일명의 파일들이 export하는 것 같습니다. 다른 파일에서 한번에 index를 임포트해서 그런건가 추측하는데 잘 모르겠음

2. 순수한 css만 사용하다가 css framework를 처음 접해서 tailwind css 사용법이 낯설긴한데.. 일단 구글링 해보면서 공부해보면서 시행착오 겪어봐야할듯?

3. React Route 처음 공부했을 때 <Route path="signup/more"element = {<signupmore / >} /> 이렇게 해두고 signupmore 컴포넌트에서 해당 페이지를 그리는 식으로 했습니다.

   → 그래서 이번에도 일단 auth 디렉토리 아래에 있는 index.tsx에서 <Route path="signup/more" element = {<signupMore />}/>로 일단 만들어두고 해당 path로 들어가서 화면에 그려지는 변경사항들 보면서 작업하려 했습니다. 그런데 생각해둔 컴포넌트가 로드 되지 않고 no routes matched location 오류로 확인되는데 구글링해서 봐도 저희 프로젝트에 맞게 해결하기가 어렵습니다. 진행이 안되니 css 실습도 못해보고 맡은 분량이 시작 전 세팅부터 막혀버리니..ㅠ

사실상 다른 문제를 포괄하는 메인 문제가 3번. 변경사항들을 화면으로 보면서 공부와 동시에 구현해 진행도를 조금씩 느리게라도 늘려나가고 싶은데 시작도 못하고 있습니다.

개인 공부하던 프로젝트에서 규모가 큰 협업 플젝으로 넘어가니 수준이 너무 크게 달라져서 혼자로는 해결이 어려워 이슈로 도움을 요청합니다.

[springkjw]

기존에 공부하시던 React Route 가 V6으로 올라가면서 사용법이 조금 바뀌었습니다. 공식문서 튜토리얼 보시고 감을 익혀보시면 좋을거 같습니다. 각 페이지마다 사용할 Router 설정은 제가 해두겠습니다.

[silverttthin]

알겠습니다! 일단 #23 완료하실때까지는 라우터 다시 공식문서로 짚어보면서 진행하겠습니다.

[springkjw]

23 로 완료했습니다.

[yoopark]

공부 내용 공유합니다!

AppRoutes (/routes/index.tsx)

const commonRoutes = [
    { path: "/", element: <LandingPage /> },
    { path: "/popular", element: <PopularPage /> },
  ];

const element = useRoutes([
    ...protectedRoutes,
    ...publicRoutes,
    ...commonRoutes,
  ]);

  return (
    <>
      <Header />
      <div className="flex-1">{element}</div>
      <Footer />
    </>
  );

• useRoutes : Routes(버전 5의 Switch)와 동일한 기능을 수행하지만, 표현법만 객체 식으로 바꾼 것. 그렇게 생각하고 보면 다를 거 없다.

라우팅 표

path	타입	컴포넌트명	파일
/	Common	<LandingPage />	features/misc/routes/Landing.tsx
/popular	Common	<PopularPage />	features/misc/routes/Popular.tsx
/user/my	Protected	<MyPage />	features/my/routes/MyPage.tsx
/user/my/routine/:routineId/auth	Protected	<MyRoutineAuthPage />	features/my/routes/MyRoutineAuth.tsx
/user/setting	Protected	<SettingPage />	features/my/routes/Setting.tsx
/user/pointshop	Protected	<PointShopPage />	features/my/routes/PointShop.tsx
/routine/make	Protected	<RoutineMakePage />	features/routine/RoutineMake.tsx
/routine/:routineId	Protected	<RoutineDetailPage />	features/routine/RoutineDetail.tsx
/auth/login	Public	<LoginPage />	features/auth/routes/Login.tsx
/auth/signup	Public	<SignupPage />	features/auth/routes/Signup.tsx