(1) 일정 관리 애플리케이션 만들기 1

* 지금까지 리액트의 기본기부터 시작해서 컴포넌트를 스타일링하는 방법까지 배워 보았다. 이 장에서는 지금까지 배운 지식을 활용하여 프론트엔드를 공부할 때 많이 구현하는 일정 관리 애플리케이션을 만들어 볼 것이다.

* 이번 실습은 다음 흐름으로 진행한다.

---

1. 프로젝트 준비하기

(1) 프로젝트 생성 및 필요한 라이브러리 설치

* create-react-app을 사용하여 프로젝트를 생성해 보자.

$ yarn create react-app todo-app

* 프로젝트가 생성되면 todo-app 디렉터리로 들어가서 yarn을 사용하여 필요한 라이브러리를 설치하자.

$ cd todo-app
$ yarn add node-sass classnames react-icons

* 이 프로젝트에서 Sass를 사용할 예정이므로 node-sass를 설치해 주었다. classnames는 나중에 조건부 스타일링을 좀 더 편하게 하기 위해 설치했다. react-icons는 리액트에서 다양하고 예쁜 아이콘을 사용할 수 있는 라이브러리이다. 아이콘 리스트와 사용법은 다음 주소에서 확인할 수 있다.

https://react-icons.github.io/react-icons/

React Icons

* 이 라이브러리의 장점은 SVG 형태로 이루어진 아이콘을 리액트 컴포넌트처럼 매우 쉽게 사용할 수 있다는 것이다. 아이콘의 크기나 색상은 props 혹은 CSS 스타일로 변경하여 사용할 수 있다.

---

(2) Prettier 설정

* 이전에 배웠던 Prettier를 설정하여 코드를 작성할 때 코드 스타일을 깔끔하게 정리할 것이다. 프로젝트의 최상위 디렉터리에 .prettierrc 파일을 다음과 같이 생성하자.

{
    "singleQuote" : true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
}

---

(3) index.css 수정

* 프로젝트의 글로벌 스타일 파일이 들어 있는 index.css를 조금 수정해보자. 기존에 있던 폰트 설정은 지우고 background 속성을 설정해 주자.

body {
  margin: 0;
  padding: 0;
  background: #e9ecef;
}

---

(4) App 컴포넌트 초기화

* 이제 기존에 있던 App 컴포넌트의 내용을 모두 삭제한다.

import React from 'react';

const App = () => {
  return <div>Todo App을 만들자!</div>;
};

export default App;

* 이제 기본적인 준비는 모두 끝났다! 프로젝트 디렉터리에서 yarn start 명령어를 입력하여 개발 서버를 구동하자.

* 이 화면처럼 회색 배경이 나타났는가? 그럼 이제 본격적으로 UI 개발을 시작해 보자!