2. front 개발환경 셋팅과 전체적인 디자인

Section

mkdir pointRee
cd pointRee
mkdir front
cd front
npm init -y
npm install react-create-app

가장 먼저 vscode를 통해 wsl2에 접속하고 wsl2에 폴더를 만들어 주고 react-create-app으로 간단하게 react프로젝트를 시작했다. 그리고 npm run start로 시작해보면 정상적으로 프로젝트가 실행되는 것을 확인 할 수 있다.

이때 나처럼 wsl2로 실행시킨 사람이라면 window의 브라우저에 localhost:3060을 타이핑해서 들어간다면 접속이 되지 않을 것이다.

wsl2는 별도의 ip를 가지고 있기 때문인데, wsl2의 ip:3060으로 접속하거나 실행시킨 console창의 링크를 클릭하면 window의 브라우저에 포트번호가 변경되며 열릴 것이다.

index.js 와 기본 route 구성

이제 전체적인 틀을 짜야하는데 프로젝트에 기본시작 파일은 index.js가 되기 때문에 index.js와

◾ index.js

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
import App from './App';

ReactDOM.render(<BrowserRouter>{<App />}</BrowserRouter>, document.getElementById('root'));

serviceWorker.unregister();

◾ route.js

import { Navigate } from 'react-router-dom';
import DashboardLayout from 'src/components/layout/DashboardLayout';
import Account from 'src/pages/Account';
import Customers from 'src/pages/Customers';
import Points from 'src/pages/Points';
import Dashboard from 'src/pages/Dashboard';
import Login from 'src/pages/Login';
import LogOut from 'src/pages/LogOut';
import NotFound from 'src/pages/NotFound';
import Register from 'src/pages/Register';
import Introduce from 'src/pages/Introduce';

const routes = [
  {
    path: '/',
    element: <DashboardLayout />,
    children: [
      { path: '404', element: <NotFound /> },
      { path: '/', element: <Navigate to="/pointree" /> },
      { path: '*', element: <Navigate to="/404" /> },
    ],
  },
  {
    path: 'pointree',
    element: <DashboardLayout />,
    children: [
      { path: '/', element: <Introduce /> },
      { path: 'account', element: <Account /> },
      { path: 'logout', element: <LogOut /> },
      { path: 'points', element: <Points /> },
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'customers', element: <Customers /> },
      { path: '*', element: <Navigate to="/404" /> },
      { path: 'login', element: <Login /> },
      { path: 'register', element: <Register /> },
    ],
  },
];

export default routes;

◾ App.js

import { useRoutes } from 'react-router-dom';
import routes from 'src/routes';

const App = () => {
  const routing = useRoutes(routes);

  return { routing };
};

export default App;

앞에서 계획한 기능에 따라 대략적으로 예상한 url경로마다 render할 컴포넌트를 설정해놓은 router를 따로 폴더에 설정을 해주었고, 후에 material-ui, recoil등 componenet depth가 늘어날텐데 index.js에 한번에 작성하는 것보다 별도의 app.js를 작성하는 것이 보기 좋을 것이라고 생각되어 위와같이 별도로 작성을 해주었다.

각 컴포넌트 디자인 해주기

모든 page에서 사용할 header와 Sidebar등을 Materail-Ui를 이용해 디자인 해주었고, main page에는 사이트를 간단하게 소개하는 page로 작성하고 로그인page까지 작성을 해주었습니다.

이 과정은 이렇다할 건 없고 material-ui의 docs를 살펴보면서 했고 생각보다 시간과 코드가 길어서 간단하게 완성된 모습만 기록을 남기려고 합니다. start

3. back 개발환경 셋팅과 db설계