PointRee 프로젝트 2 - front 개발환경 셋팅과 전체적인 디자인
- Projects
- 2021년 1월 24일
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의 브라우저에 포트번호가 변경되며 열릴 것이다.
1. index.js 와 기본 route 구성
1) 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();
2) 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;
3) 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 를 작성하는 것이 보기 좋을 것이라고 생각되어 위와같이 별도로 작성을 해주었다.
2. 각 컴포넌트 디자인 해주기
모든 page에서 사용할 header와 Sidebar등을 Materail-Ui를 이용해 디자인 해주었고, main page에는 사이트를 간단하게 소개하는 page로 작성하고 로그인page까지 작성을 해주었습니다.
이 과정은 이렇다할 건 없고 material-ui의 docs를 살펴보면서 했고 생각보다 시간과 코드가 길어서 간단하게 완성된 모습만 기록을 남기려고 합니다.
