수정중 --- 안 쓸 것 다 쓰는 todo-list

 

요즘 공부하는 ‘리액트’를 이용하여 todo-list를 만들어 볼게요 !

skills

  • react
  • redux
  • react-router
  • bootstrap4
  • typescript

고작 todo-list 만드는데 뭐 이렇게 거창하게 하냐구요 ?

거창하게 한번 해보고 싶기는 한데 거창하게 시작하면 끝을 못 볼 것 같거든요 … !

사실 router는 어디에 써야하지 고민하다가 home을 만들기로 했답니다 !

타입스크립트 기반의 리액트 앱 생성

create-react-app 을 사용하면 굉장히 쉽게 리액트 어플리케이션을 만들 수 있답니다.

우리는 타입스크립트를 이용할 것이기 때문에 뒤에 --typescript 옵션을 붙여줄게요

이미 만들어진 프로젝트에 타입스크립트를 추가하고 싶다면 링크를 따라하시면 됩니다 !

$ npx create-react-app todo-list --typescript

src/App.tsx 파일을 확인해보세요 ! 확장자를 보면 타입스크립트를 사용하는 리액트 컴포넌트인 것을 알 수 있죠 ?

$ npm install redux react-redux @types/react-redux

redux도 설치하구요.

react-redux는 타입스크립트를 지원하지 않기 때문에 앞에 @types를 붙여줘야 해요.

$ npm install react-router-dom

react router도 설치해줍니다.

$ npm install bootstrap

bootstrap도 설치해주고 src/index.tsx에서 import 해줍니다.

import "bootstrap/dist/css/bootstrap.css"