CRA로 리액트 기본 프로젝트를 설치했다.
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에 google material icons 링크를 넣어주었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%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>
style 폴더를 생성하고 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;
'study > React' 카테고리의 다른 글
| To-Do List 만들기 - 1. 기획 및 구현기능 정리 (0) | 2023.03.26 |
|---|---|
| React에서 이모지 사용하기 (0) | 2023.03.24 |
| [React] HTML과 다른 Attributes (0) | 2023.02.27 |
| [React] 바닐라 JS 게시판 리팩토링 (3) - axios (0) | 2023.02.18 |
| [React] 바닐라 JS 게시판 리팩토링 (2) - Delete, Update (0) | 2023.02.16 |
