React

json-server

? 아주 간단한 DB와 API 서버를 생성해주는 패키지

json-server 설치

yarn add json-server

json-server 사용법

1. DB 파일 필요

db.json 파일 만들기

//db.json

{
	"todos": []
}

2. 실행
   터미널 (* 새로운 거!!)

yarn json-server db.json --port 4000

잘... 되면 이렇게 귀여운 이모티콘까지 쓱 만들어준다... 뭐지... 백앤드 사람들은 이런 거에 행복을 느끼나봄.... (귀엽긴 하다...)

이모티콘도 다양하다....

아무튼간에 db.json에 데이터를 직접 넣어도 되고, 혹은 매서드를 통해서 넣어도 된다. 그건 axios랑 연결해서 넣기 가능

axios

? node.js와 브라우저를 위한 promise 기반 http 클라이언트
http를 이용해서 서버와 통신하기 위해 사용하는 패키지
fetch와 기능 유사

axios 설치 방법

yarn add axios

axios 사용 방법

const data = await axios.get("url")

data를 콘솔에 찍어 보고, url에 따라 data 안에 또 data가 있고, 거기에만 필요한 정보가 있다면,

const { data }  = await axios.get("url")

구조 분해 할당으로 바로 접근하기~

fetch와 다르게 response로 받는 부분이 한 번 생략되어 편리함

Redux Middleware

액션이 리듀서에 도달하기 전에 중간에 가로채서 추가적인 작업을 수행할 수 있게 해주는 함수
비동기 로직 처리, 기록, 에러를 처리하는 등의 작업을 한다.

redux middleware인 redux thunk에 대해 알아보자

Redux Thunk

액션 객체가 아니라 thunk 함수를 넣는다.

Redux Thunk 장점 및 단점

장점
로딩, 에러 관리가 가능

단점
복잡성이 증가
테스트가 복잡

=> 한계점 때문에 TanStack Query를 사용하게 됨

TanStack Qurey

? 서버 상태 관리 라이브러리

TanStack Qurey 주요 기능

1. 데이터 캐싱 : 동일 데이터를 캐싱하여 성능 향상
2. 자동 리패칭 : 데이터 변경됐을 때 자동 리패칭하여 최신 상태 유지
3. 쿼리 무효화 : 특정 이벤트 발생시 쿼리 무효화하고 데이터 다시 수집

TanStack Qurey 사용 방법

yarn add @tanstack/react-query

//main.jsx

const queryCliect = new QueryCliect();

<QureyClientProvider cliect={queryClient}>
	<App />
</QureyClientProvider>

//App.jsx
const fetch@@ = async () => {
	const response = await axios.get("url");
    return response.data;
}

const {data, isPending, isError} = useQuery({
	queryKey : [""],
    queryFn : fetch@@
})

	if(isPending) {
    	return <div>loading...</div>
	}
    if (isError) {
    }

언능 하자...