00. React 환경 설정 등
React for Beginners
@@@ 프로젝트 생성 및 실행 하기 ===============
npm create vite@latest => 내용 나오는데로 따라 하면됨
npm create-react-app 맵이름
build => npm run build
@@@ 기본 설치 라이브러리(no typescript) @@@
npm i bootstrap react-bootstrap
npm i -D sass
npm i react-icons
npm i axios
npm install react-router-dom localforage match-sorter sort-by
npm i react-hook-form@7.43
@@@ sass 설치 ==============
npm i -D sass 로 설치하시면 됩니다.(node-sass 안됨, 그냥 npm i sass 안됨)
bootstrap 불러 와서 오버라이드 하고, (@import ...scss => 기능 변수 override)
변수를 정의 해서 반복 사용 가능($변수: css)
@@@ react router 설치 ===============
npm install react-router-dom localforage match-sorter sort-by
// 메인 페이지에 라우터를 설정해야함(여러개 설정 못함)
<BrowserRouter>
<Header/>
<Routes>
<Route path="/" element={<BlaBla/>} />
</Routes>
</BrowserRouter>
@@@ bootstrap 라이브러리 설치 ==============
npm i bootstrap
npm i bootstrap@5.3.0
index.tsx OR main.tsx==> bootstrap 사용 설정
npm i react-bootstrap => 별도로 있어서 다양한 테그 들을 지원함
import 'bootstrap/dist/css/bootstrap.css';
@@@ 아이콘 라이브러리 ==============
npm i react-icons@4.7.1
https://react-icons.github.io/react-icons/
import { BsFillCalendarPlusFill } from 'react-icons/bs';
<div><BsFillCalendarPlusFill size='60px' color='green'/></div>
@@@ material UI 복잡함 ==============
이걸로 디자인은 결정... 조금 어렵지만 해놓으면 초기부터 사용하기 좋음///
기본 적인 ui component를 제공하고 그대로 사용하면 기본 적인 디자인이 됨
기능이 많아서... 찾아사면서 하면됨
Default installation
npm install @mui/material @emotion/react @emotion/styled
npm install @fontsource/roboto
npm install @mui/icons-material
@@@ chakra 라이브러리 설치 뭔가 이상함.. 동작이 잘안함 ==============
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
import { ChakraProvider } from '@chakra-ui/react'
tsx, jsx 만 지원 함.. js는 지원하지 않음
<ChakraProvider>
<App />
</ChakraProvider>
@@@ immer 라이브러리 :직관적임 ==============
npm i immer@9.0.19
spread를 안쓰고 자바스크립처럼 코딩이 가능 함
import produce from "immer";
// setBugs(bugs.map(bug => bug.id === 1 ? {...bug, fixed: 'true'} : bug))
setBugs(produce (draft => {
const bug = draft.find(bug => bug.id === 1);
if (bug) { bug.fixed = 'true'; }
}))
==> 객체를 다룰 때 map 쓰면 길어지고 지저분 해 질때 필요..
@@@ react-hook-form 라이브러리 ====================
form input 관리 편하게
npm i react-hook-form@7.43
form에 관련된 다양한 기능 validation, error handling 제공
폼은 이걸로 해야 할 것 같음
@@@ data validation 라이브러리 ================
Joi, Yup, Zod 등의 라이브러리가 있음
npm i zod@3.20.6
import{ z } from "zod"
const schema = z.object({
name: z.string().min(3),
age: z.number().min(1),
})
type FormData = z.infer<typeof schema>
위에 것을 적용하기 위해서는 아래 것을 설치해야함
npm i @hookform/resolvers@2.9.11
import { zodResolver } from "@hookform/resolvers/zod";
@@@ style component 사용(강의 27; 맘에 안듦.사용 안함) ======
npm install styled-components@latest
npm i @types/styled-components
새로운 css를 정의 하는 방법을 제공함
import styled from 'styled-components';
const List = styled.ul`
list-style: none; padding:0; `
@@@ 오래된 라이브러리 설치 시 ==============
npm i nanoid --legacy-peer-deps
npm i showdown --legacy-peer-deps
npm i react-mde --legacy-peer-deps
import 'react-mde/lib/styles/css/react-mde-all.css';
npm i react-confetti --legacy-peer-deps
<Confetti/> => 추가하면 축하하는 꽃 날림
@@@ json dummy data api ==============
jsonplaceholder.typicode.com
rawg.io
https://api.imgflip.com
@@@ axios api fetch util ==============
async api 호출 관리에 편리함.. 좀 알아야 함.
npm i axios@1.3.4
import axios from 'axios'
axios.get(url).then().catch();
axios.delete(url+id).then().catch();
@@@ intellij 함수 자동 생성 =============
{ Trigger Content
rcc class component skeleton
rrc class component skeleton with react-redux connect
rccp class component skeleton with prop types after the class
rcfc class component skeleton that contains all the lifecycle methods
rsc stateless component skeleton /// 이것
rscp stateless component with prop types skeleton
pt empty propTypes declaration
con class default constructor with props
conc class default constructor with props and context
cwm componentWillMount method
cdm componentDidMount method
cwr componentWillReceiveProps method
scu shouldComponentUpdate method
cwup componentWillUpdate method
cdup componentDidUpdate method
cwun componentWillUnmount method
ren render method
bind binds the this of method inside the constructor
hoc higher-order component
cref creates a ref.
cctx creates a context }
@@@ firebase =====
가입하고 web으로 프로젝트 생성하고...
firebase.tsx 에 내용 채우고
Missing or insufficient permissions
우선 해당 프로젝트가 있는 Firebase Console로 이동해주세요.
그리곤 왼쪽에서 두번째 아이콘인 있는 Firestore 버튼을 누르고 규칙탭을 눌러주세요.
그 다음 아래와 같이 allow read,write: if true; 로 바꿔주세요.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if
request.time < timestamp.date(2023, 12, 11);
}
}
}
전에 날짜를 한달로 해놔서 생기는 문제...
mde => firebase 한글입력 깨짐(setInterval 설정 필요 500정도)
git remote add origin git@github.com:slow333/react-vite-chakra-tsx-axios-game-site.git
git branch -M main
git push -u origin main
@@@ 기타 애러 처리
typescript 미사용 변수 애러 발생 시
.eslintrc.cjs => rules
"@typescript-eslint/no-unused-vars": "off"
tsconfig.json => "compilerOptions"
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": false