구버전
-
[SWR] Data의 reavalidate, mutate 활용구버전/React 2023. 11. 3. 11:39
swr의 기본적인 사용방법에 대해서는 다른 글을 참고하는게 낫다 이것은 오로지 swr을 통해서 가져온 data를 어떻게 revalidate하는게 좋고 mutate를 어떨 때 사용하는게 좋고 optimistic UI를 어떻게 사용해야하는지에 대해서 내가 볼려고 적어 놓은 것임 개요 SWR의 이점 revalidate란? mutate란? optimisticUI란? key의 활용 (조건부 데이터 가져오기, token전달) SWR 장점 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 React-query와 마찬가지로 데이터를 불러올 때 사용되는데 SWRconfig를 통해 전역설정만 하고 fetcher만 설정해 놓는다면 간단하게 사용할 수 있는 구조이다. (전역설정 안해도 됨 그러면 따로 fetcher를 매번 작성..
-
[전역상태관리] Recoil구버전/React 2023. 11. 2. 21:03
recoil을 사용하기에 앞서 상태관리라이브러리로써 가장 많이 사용되는 Redux와 비교를 안해볼 수 없다. 상태관리 비교 개요 RecoilRoot Atom Selector Recoil-persist RecoilRoot export const App = () => { return ( ) } Atom import {atom} from 'recoil'; export const todoState = atom({ key: "todoState", default: [] }) 장점 Redux에 비해 적은 boilder plate 사용하기 편한 구조 Recoil에서 가장 좋은 점은 학습하기 쉬운 구조로 되어있다는 것이다. React를 사용하면 기본적으로 사용하게 되는 useState와의 구조가 매우 흡사하기 떄문이다...
-
[AWS] AWS용어 및 CloudFront, S3, 배포구버전/AWS 2023. 10. 24. 20:23
Cloud Front란? CloudFront를 이해하기 위해서는 CDN과 엣지로케이션에 대해서 이해를 할 필요가 있음. 간단하게 CDN은 AWS 저장공간은 미국에 있다고 하고 내가 만든 프로그램은 한국에서 배포를 해서 미국에 있는 저장공간에다가 요청을 하면 거리도 멀고 하니깐 한국 근처에 미국에 있는 저장고보다 작은 저장고를 만들어 놓고 자주 사용하거나 하는 것들을 여기다가 가져다 놔서 한국 근처에 있는 저장고에서 꺼내쓰게 하는 것임. (이때 이 저장고가 엣지로케이션임 ) 근처에 있는 저장고에 없으면 미국에 있는거 가져오지만 대체로 여기서 해결가능하게끔 알잘딱하게 설계되어있음. 이걸 왜 알아야하냐?? CloudFront가 바로 이러한 방식을 사용한 CDN서비스이기 때문임! 간략: 본래서버에서 받아와서 캐..
-
[React] react-router-dom의 사용구버전/React 2023. 10. 4. 21:45
1. 중첩 라우팅 Outlet & 직접표기 비교 > Router.js > Web.js const Web = () => { return ( This is Web Post #1 // 여기서 Outlet을 통해서 불러오는 곳 ); }; > Router.js > Web.js const Web = () => { return ( This is Web Post #1 // 비교부분 ); }; 결론 : 중첩라우팅을 통해서 Router.js 부분에 Route를 한눈에 볼 수 있게 되었음 2. useLocation && useParams && useNavigate 1) useLocation Hook 경로정보를 담고있는 객체를 return한다. { pathname: '/product/1', search: '', hash: '..