# useSWR

NextJS + useSWR 얕은라우팅을 이용한 데이터 패치
개발중에 URL 파라미터를 통해 상태를 관리하고 데이터를 받아오는 경우가 있는데요.useSWR를 사용하여 데이터를 가져오고 또 어디서나 사용할 수 있도록 커스텀 훅을 만들어어디서든 데이터를 가져오게 하고 얕은 라우팅을 통해서 데이터를 패치하는 회사내 사용 사례로 방법을

useSWR 똑똑하게 사용하기
useSWR이 좋은 라이브러리라고는 이미 널리 알려져 있음에도 불구하고 useSWR에 관련된 글들에는 csr에 있어서 거의 완벽에 가까운 라이브러리인데도 불구하고 여러가지 방법으로 응용하여 사용하는 경우는 많이 보지못했기에 가볍게 useSWR의 좀더 섹시한 사용방법중
useUser, useSWR, cls
\*\*들어가기1\. front에서 모든 page에서 공통적으로 자주 사용하게 될, useUser hook을 만든다. 로그인된 사람의 정보를 확인하는 hook,useSWR을 이용해서 useUser hook을 완성한다. https://swr.vercel.
SurveyProject_admin) 클론코딩 정리하기
survey프론트단을 클론 코딩하고 바로 뒤이어 시작한 어드민페이지 클론코딩. 만들어낸 설문페이지의 각 설문들을 관리하는 영역이다. 이것도 프론트와 마찬가지로 흐름을 이해하고 라이브러리를 사용하는 이유를 살펴보기에 좋은 프로젝트였다. >1. 프론트단과 마찬가지로 기획

[react] SWR을 쓰는 이유
최근들어 이직고민이 많아 기술면접을 볼 일이 종종 있었다. 불합격이든 거절이든 최종적으로 옮기지는 않았지만 면접을 보면서 한가지 꺠달은 것이 있었다. 나는 해당 기술을 왜 쓰는가? 라는 고민을 너무 안하고 살았다. 라이브러리를 도입할 때 비슷한 종류끼리 비교하고

Cross-domain 환경에서 oauth를 통한 access-token 쿠키 등록하기
Cross-domain 환경에서 cookie 사용 시 발생할 수 있는 문제점과 oauth 인증 서버를 거쳐 cookie를 등록할때에 발생할 수 있는 문제점들에 대한 해결방법

[React] 비동기 통신 useSWR의 모든것
리액트를 다루면서 사용할 수 있는 비동기 통신은 여러개가 있다. 내가 알고 있는 방법으로는 redux-saga, useSwr, react-query 정도? 가 있는 것 같다. 자주 사용했던 것은 redux-saga, 간단해 보여서 사용하고 싶었던 것은 useSwr과

[react] 쓰로틀링과 useSWR을 이용해 검색 구현하기 (Next.js + Typescript)
검색 API는 다음과 같다. GET /search/?name={keyword}사용자가 검색어를 입력하는 도중 500ms에 한 번씩 검색을 시킬 것이다.조건부 가져오기를 이용했다. search 가 undefined | "" 일 때는 요청을 날리지 않는다.useSWR은 k
2021 09 04
상태관리 및 swr 간략한 사용법 익히기로그인, 피드 호출(getFeeds)(/GET) 시에만 redux 혹은 useContext에 action dispatch(swr 이용)그 외 post, put delete 는 상태 dispatch 없이 api만 호출 하고 다시