2021-06-23 :: 폴더 구조와 리액트 라우터

폴더구조

프로젝트별로 많이 다르다. 뭘 사용해도 크게 상관없다. 

 

oldschool

//container

//components

 

//pages - 서비스 페이지

//components -페이지의 컴포넌트들

//layouts -페이지들간의 공통 레이아웃

 

SPA지만 결국 페이지가 다 있다

그냥 페이지 안에 폴더를 만들고 그 안에 index와 style을 둔다.

webpack.config.ts

    alias: {
      // 경로 간소화
      '@hooks': path.resolve(__dirname, 'hooks'),
      '@components': path.resolve(__dirname, 'components'),
      '@layouts': path.resolve(__dirname, 'layouts'),
      '@pages': path.resolve(__dirname, 'pages'),
      '@utils': path.resolve(__dirname, 'utils'),
      '@typings': path.resolve(__dirname, 'typings'),
    },

tsconfig.json

    "paths": {
      "@hooks/*": ["hooks/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"],
      "@utils/*": ["utils/*"],
      "@typings/*": ["typings/*"]
    }

위와 같이 설정을 해 두면

client.tsx에서

import App from '@layout/App';

위와 같이 설정이 가능하다. 경로설정을 간단히 할 수 있다.

 

라우터 설정을 먼저 하자

npm i react-router react-router-dom

npm i @types/react-router @types/react-router-dom

  <Switch>
      <Redirect exact path="/" to="/login" />
      <Route path="/login" component={LogIn}/>
      <Route path="/signup" component={SignUp} />
  </Switch>

Switch는 여러개의 라우터 중 하나만 반드시 실행되도록 한다.

redirect인 경우 /면 login 라우터로 간다

 

npm run dev

http://localhost:3090

 

React-Router 사용할 때 <BrowserRouter> tag 사용해 주어야 한다.

 

webpack.config

historyApiFallback: true

주소를 사기쳐준다? SPA에서는 원래 url이 없다. index.html만 있음. 페이지가 하나 이기 때문에

하지만 historyApi를 이용해서 url의 가짜 주소를 준다. 새로고침할 때 브라우저의 url은 서버로 간다. 이때 뒤에 붙는 경로는 원래 무시되지만, historyApiFallback값을 지정해 줌으로 dev서버가 가짜 주소를 진짜 있는 주소처럼 해결해준다.