개발 환경 셋팅

1. yarn 설치

$ npm install -g yarn

2. 프로젝트 생성 (+ typescript)

$ yarn create react-app {프로젝트명} --template typescript

3. redux 설치

$ yarn add redux react-redux @types/react-redux

4. styled-components 설치

$ yarn add styled-components @types/styled-components

5. styled-reset & GlobalStyle 적용

$ yarn add styled-reset

styled-reset 설치 후 GlobalStyle 적용

import reset from 'styled-reset';
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  ${reset}
`;

function App() {
  return (
    <>
      <GlobalStyle />
    </>
  );
}

export default App;

6. BrowserRouter 설치

$ yarn add react-router-dom @types/react-router-dom

7. 셋팅 완료 코드

// App.tsx

import reset from 'styled-reset';
import { createGlobalStyle } from 'styled-components';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import SignUp from './pages/SignUp';
import SignIn from './pages/SignIn';

const GlobalStyle = createGlobalStyle`
  ${reset}
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/signup' element={<SignUp />} />
          <Route path='/signin' element={<SignIn />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;