사이퍼즈 성향 테스트 프로젝트 - index 파일 생성

프로젝트는 CRA로 빌드했다.

필요없는 파일들은 삭제하고, index.js를 다음과 같이 수정해 주었다.

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import Main from "./pages/Main";
import Test from "pages/Test";
import { ThemeProvider } from "@mui/material/styles";
import { theme } from "styles/theme";
import CssBaseline from "@mui/material/CssBaseline";
import GlobalStyle from "styles/GlobalStyles";
import "assets/font/font.css";
import { StylesProvider } from "@mui/styles";
import Container from "components/base/Container";
import { store } from "store";
import { Provider } from "react-redux";
import Result from "pages/Result";
import Loading from "pages/Loading";

ReactDOM.render(
  <React.StrictMode>
    <StylesProvider injectFirst>
      <Provider store={store}>
        <Router>
          <Switch>
            <ThemeProvider theme={theme}>
              <GlobalStyle />
              <CssBaseline />
              <Container>
                <Route exact path="/" component={Main} />
                <Route path="/test/:qs" component={Test} />
                <Route path="/loading" component={Loading} />
                <Route path="/result" component={Result} />
              </Container>
            </ThemeProvider>
          </Switch>
        </Router>
      </Provider>
    </StylesProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

개발이 어느 정도 진행된 상태에서 쓰는 개발기라 여러 가지가 섞여 있다.

index.js에서 react-router-dom 5버전을 이용해서 라우팅 설계를 했는데, 나중에 보니까 6버전이 새로 나왔고 되게 많은 기능들이 나온 모양이다..?
프로젝트 자체는 예전에 빌드해뒀던 연습용 프로젝트를 그대로 쓴 거라 5버전이 깔려 있었다. 6버전이 나온 줄 몰랐다...
다음 프로젝트는 시작할 때 새로 빌드해서 신버전들을 써야겠다....

StylesProvider, ThemeProvider, GlobalStyle은 스타일을 위한 태그이다.
스타일 적용을 위한 라이브러리로는 Mui - Material UI를 사용했다.
이번 프로젝트는 익숙한 라이브러리를 쓰자! 여서... 결정이 오래 걸리지 않았다.

머테리얼 ui에서는 Theme이라고, 스타일과 관련된 색상 코드 등을 전역 객체 데이터로 저장할 수 있는 기능을 제공한다.
또 theme 파일에서 primary, secondary 등 정해진 키워드로 색상을 지정하면 mui 컴포넌트들에 자동으로 해당 색상이 적용되기도 한다.
이게 써봤을 때 참 편하더라. 그래서 ThemeProvider로 theme을 지정해 주었다.

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
  palette: {
    cyphers: "rgb(196,49,19)",
    cyphers_y: "rgb(255,231,31)",
    primary: {
      main: "rgb(196,49,19)",
    },
    secondary: { main: "rgb(255,231,31)" },
  },
});

theme 파일은 위와 같다.