개발환경세팅

타입스크립트로 리액트app 만들기(CRA)

npx create-react-app 폴더이름 --template typescript

craco 설치

yarn add @craco/craco

• craco 설치 후 package.json으로 가서 react-scripts → craco로 변경

emotion 설치

yarn add @emotion/react
yarn add @emotion/styled

바벨 플러그인 설치

• emotion을 쉽게 사용하기 위해서

yarn add -D @emotion/babel-preset-css-prop

• craco.config.js 파일 설치 후 바벨 설정 넣기

스토리북 설치

npx -p @storybook/cli sb init

api 통신

• axios

yarn add axios

라우터

• react-router-dom

yarn add react-router-dom

ESLint, prettier

yarn add -D eslint prettier
yarn add -D eslint-config-prettier eslint-plugin-prettier

나중에 할 것

지도

• mapbox api
mapbox를 사용하는 이유?
• 세계지도를 활용할 수 있음
• 지도 디자인 커스텀이 가능함

yarn add react-map-gl

lottie

Test 관련

• jest

• react-testing-library

경로 설정

react-query, swr