작업 목록 만들기 – 2. 프로젝트 설정

by

CRA로 기본 React 프로젝트를 설치했습니다. 

npx create-react-app my-react-todo

필요한 Redux, Styled-Components 및 json-server 라이브러리도 설치했습니다. 

// redux 설치
npm install redux react-redux;

// styled-components 설치
npm install --save styled-components

// json-server 설치
npm install -g json-server

그러면 아래와 같은 형태로 json-server를 실행할 수 있습니다. 저는 data 폴더와 data.json 파일을 만들어서 사용하기로 했습니다. 이와 같이 목업 서버를 사용할 때는 클라이언트 포트 번호와 다른 포트 번호에서 실행해야 합니다. 

json-server --watch data.json --port 3001

나는 public/index.html에 구글 머티리얼 아이콘에 대한 링크를 넣었다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="http://1ncomparable.m/%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>My React To-Do List</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Styled-Components의 createGlobalStyle을 사용하여 스타일 폴더를 만들고 전역 스타일을 적용했습니다.

전역 스타일로 reset.css의 내용이 먼저 적용됩니다. 

// 전역 CSS 작성
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  border: 0;
}
// ...
`

import GlobalStyle from "./style/GlobalStyle";

function App() {
  return (
    <>
      <GlobalStyle />
      <div className="App">투두앱을 만들거에용</div>
    </>
  );
}

export default App;