[react, 카클개 6-4]ToDo Application- 1. 시작

1. 프로젝트 생성하고 필요한 라이브러리 설치

1) 프로젝트 생성 

yarn create react-app 프로젝트명

 

2) 필요한 라이브러리 

터미널에 설치 

yarn add sass-loader sass classnames react-icons open-color

- sass-loader: scss 파일을 사용하기 위해서 설치

- sass
: scss 파일을 사용하기 위해서 설치

- classnames
: css를 작성할 classname을 편리하게 작성하기 위한 라이브러리

- react-icons
: 아이콘을 사용하기 위한 라이브러리, https://react-icons.github.io/react-icons

- open-color
: 색상을 직접 값으로 설정하는 것이 아니고 색상 이름과 정수 1개의 농도를 가지고 설정할 수 있도록 해주는 라이브러리, https://yeun.github.io/open-color/

 

 

3) src 디렉토리의 index.css를 수정

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding:0;
  background:#e9ecef;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Web Application 에서 body 나 모든 box 태그에 margin과 padding을 0으로 설정하는 경우가 있는데 이유는 IE 구버전 과의 호환성 문제 때문입니다. IE 구버전은 width와 height 안에 padding과 margin 그리고 border의 크기가 포함되고 나머지 브라우저는 content의 크기만 포함됩니다.

 

4) App.js 수정

App.js

function App() {
  return (
    <div>
      To Do List
    </div>
  );
}

export default App;