vite-plugin-next-react-router을사용해 next를 사용하는 것처럼 라우팅을 했다.
하면서 정말 흥미로운걸 보게되었는데
이전에 react-router-dom을 사용할 때는 아래와 같이 사용했었다.
<Routes>
<Route path='/' element={<Example/>}/>
</Routes>근데 useRoutes를 사용해서 이런식으로도 가능하다
import React from "react";
import { Outlet } from "react-router-dom";
export const routes = [
{
path: "/",
element: <Outlet />,
children: [
{ path: "/", element: <DynamicIndex />, index: true },
{ path: "/cart", element: <DynamicCartIndex />, index: true },
{ path: "/products", element: <DynamicProductsIndex />, index: true },
{ path: "/products/:id", element: <DynamicProductsId /> },
],
},
];
--------------
//App.tsx에서는
import {useRoutes} from 'react-router-dom';
import {routes} from '.....'
function App(){
let el = useRoutes(routes)
return <div>{el}</div>
}
리액트 쿼리
https://tech.osci.kr/2022/07/13/react-query/
React-Query 도입을 위한 고민 (feat. Recoil) - 오픈소스컨설팅 테크블로그 - 강동희
Web Frontend 개발을 할 때 React 를 사용하면서 마주하게 되는 여러 가지 문제점 중 하나는 state, 상태 관리에 관한 부분입니다. 프론트엔드 개발자라면 state 와 뗄 수 없는 인연을 맺고 있습니다.오늘
tech.osci.kr
이글이 도움이 컸다. 리액트 쿼리를 왜 사용하는지, 캐싱처리를 어떻게 하는지 알 수 있었다.
다만 사용하는 방법을 정확히 알지는 못해서 공식 링크를 보면서 익힐 예정이다.
위의 라이브러리를 사용하면서 계속 오류가 발생을 했는데, 계속 들어가면 너 왜 비동기 동기처리하냐+ 라우터에 뭔가 에러가 있다는 에러메세지가 계속 떴다. 알고보니 자동으로 이 라이브러리가 React.lazy를 걸어주는데, 부분에서 문제가 생긴듯 했다. 수정하니 아주 멀쩡해졌다^^...내가 놓친게있나 다시한번 살펴보기!
이번에 알게된 나의 오해아닌 오해!
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
gap이 브라우저에서 지원을 많이 안하는줄 알았는데 다 한다. 이제 유용하게 쓸 일만 남았다...!