10장 일정 관리 웹 애플리케이션 만들기

10.1 프로젝트 준비하기

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

Prettier 설정(.prettierrc)

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

index.css 수정

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

App 컴포넌트 초기화

import React from 'react';

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

export default App;

10.2 UI 구성하기

예제 소스는 책을 참조

//대상창이 닫혀있을 때 자동완성이 작동하지 않을 경우 최상위 디렉토리에 jsconfig.json파일 추가하고 아래 내용 기입
//ex> <Test 까지 쳐도 자동완성 작동x
{
  "compilerOptions": {
    "target": "es6"
  }
}

10.3 기능 구현하기

예제 소스는 책을 참조

크롬의 확장플러그인 리액트 개발자 도구(React Developer Tools)를 통해 컴포넌트 내의 변화를 관찰할 수 있습니다.