Project - Todo

입사 후, 기본적인 것들을 익히기 위한 프로젝트
2022년 03월 18일 금요일 한 것

1. 앱 레이아웃 구성

• 어떤 라이브러리를 사용할 것인지
  -> Apollo Client, Styled-Components, Ant Design, React-router-dom, Type Script
• 어떤 구조(folder structure)를 채용할 것인지
  -> 기능 중심(feature)
  -> 페이지 중심
  두가지로 구분 가능 여기서 이번에는 소규모 프로젝트라, 페이지 중심으로 가기로 했다.

2. 커밋 등은 최대한 세세하게 하기(한글이어도 상관없음 -> 영어공부좀 하자..)

3. React-router-dom을 통한 라우팅
   보통은 진행할때 그냥 바로 App에다가 Route를 나열해서 라우팅했는데, 이것을 좀 더 관리하기 용이하도록 다음과 같이 설정했다.

// App.tsx
function App() {
  return <RouterContainer />;
}

// RouterContainer.tsx
import ROUTES from "./utils/routeName";

function RouterContainer() {
  return (
    <Router>
      <Switch>
        {Object.keys(ROUTES).map((route) => {
          const { path, component } = ROUTES[route];
          return <Route key={route} path={path} component={component} exact />;
        })}
      </Switch>
    </Router>
  );
}

// utils/routeName.tsx
interface RoutesValue {
  path: string;
  component: () => JSX.Element;
}

interface RoutesType {
  [key: string]: RoutesValue;
}

const ROUTES: RoutesType = {
  HOME: { path: "/home", component: HomeContainer },
  LOGIN: { path: "/", component: LoginContainer },
};

이렇게하면, 추가적인 라우팅 소요가 발생했을때, 그냥 저기에 하나만 더 추가해주면 바로 적용이 가능해졌다.