React, TypeScript, Styled-Components (with CRA)

React, TypeScript, Redux Middleware, Styled-Components를 통해 개인 프로젝트를 만들어보려 한다. 이곳에 차근차근 정리해야지 ^_^

1. 라이브러리 설치

타입스크립트

타입스크립트로 새로운 create-react-app 프로젝트를 생성하고 싶다면

npx create-react-app <프로젝트> --template typescript

스타일 컴포넌트

npm install --save @types/styled-components

스타일 리셋

npm install --save styled-reset

리액트 라우터 돔

npm install --save @types/react-router-dom

리덕스

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

2. 불필요한 파일 삭제

• public 내부: index.html의 주석, logo.png, manifest.json, robots.txt
• src 내부: App.test.tsx, App.css, index.css, logo.svg, setupTests.ts

react-app-env.d.ts 역할

이 파일은 src 폴더 안에 존재하는데 CRA로 만들어진 프로젝트에 특정하는 타입스크립트 타입 유형을 알려준다. 여기에 있는 타입 유형은 bmp, gif, jpeg, jpg, png, webp, svg와 같은 파일의 임포트를 지원해준다.

import logo from './logo.svg';

결국 위와 같은 형태의 임포트를 지원하는 것.

에러를 피하기 위해서 지우지 않는 것을 추천한다.

reportWebVitals.ts 역할

CRA 프로젝트의 성능과 responsiveness를 측정하게끔 도와주는 역할을 한다.
to be continue