# swr
Learn 상태 관리 라이브러리
ContextAPI, Redux, MobX, SWR는 상태 관리 라이브러리 혹은 패턴으로 React 프레임워크에서 사용되는 대표적인 상태 관리 방법이다.(State)Context API는 React에서 기본적으로 제공하는 상태 관리 방법 중 하나이다. Context A
SWR로 무한스크롤 구현하기 (난이도 중하)
SWR에는 useSWRInfinite hook이 존재합니다. 이를 이용해서 무한스크롤을 쉽게 만들 수 있는데요, 같이 볼게요!useSWRInfinite에는 size와 setSize라는 인자를 받아올 수 있습니다 이는 주석처럼 현재 페이지가 어디인지, 그리고 끝에 도달했
react query를 적용하자
프론트 개발을 하면서 모든 작업을 프론트단에서 할 수 있으면 좋겠지만, 아쉽게도 대부분의 프로젝트가 api 호출이 필요하다. 프로젝트 마다 다르지만 많은 api를 호출하고 사용하기 위해서는 관리가 필요하다. 더 효율적이고 가독성이 좋고 편리하게 api 호출을 하기위해서
React) SWR
SWR이란CSR(Client Side Rendering)측면에서 데이터 fetching 로직을 단순화하고 다양한 옵션을 통해 만들어주는 라이브러리SWR 데이터 캐싱 \-useSWR 훅을 사용하여 데이터 캐싱을 진행하는데, 한번 fetch한 원격상태의 데이터를 내부적으
SWR로 infinite scrolling 구현하기 + 기타등등
웹 페이지에서 검색 결과를 탐색할 때, 처음에는 일정한 수의 검색결과만 표시되다가, 스크롤을 끝까지 내리면, 새로운 검색결과들이 로딩되는 것을 본적이 있을 것이다. SWR을 사용해서 이러한 Infinite Scrolling을 구현하는 방법을 살펴보자
SWR 및 기타 등등
SWR, cookie, gravatar, css transition, event bubbling과 stopPropagation 및 내 얘기
[프로젝트: 포트폴리오] 진행중 회고
포트폴리오 금방 만들 수 있을 것 같았는데 더디다...내가 게을러진 탓도 있겠고.디자인을 처음에 잡고 가는데 그게 안돼서 그런것도 있고.처음 써보는 것들을 공부하면서 하다보니 그런것도 있고.그래서 자꾸 풀어지는 마음가짐을 다져보고자 회고를 써보려고 한다.next를 꼭
[Next.js, Typescript] 포트폴리오 만들기
명절연휴동안 포폴을 만들어서 배포까지 하기로 계획을 세웠다.원래 주말동안에는 웹소켓을 공부해보려고 했는데...포폴은 못참지사실 포트폴리오만들기 스터디를 들어가서 포트폴리오를 만들었다.문제는... 구글 프레젠테이션을 사용했다는것.나 개발자인데? 싶은 생각이 있어서 구글
[React Query] stale-while-revalidate: 너 상한데이터니?
타입스크립트에 이어서 리액트쿼리까지 투두 앱에 적용해보았다.그런데 리액트쿼리를 쓰면서 기시감이 느껴졌다.이거... 리덕스랑 똑같은거같은디?결론적으로 리덕스는 상태관리를 위해 쓰는데, 리액트쿼리는 이 상태 에서 서버상태를 분리해 관리할 수 있도록 한다.이렇게 UI sta
SWR 사용해보기
SWR 이란? > "SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로
Next.js 공식문서를 보면서 커머스 사이트(와이즐리) 구현하기 (7)
이번 포스팅은 레퍼런스 사이트와 유사하게 장바구니 페이지를 구현하고비교해보고자 합니다.먼저 UI를 구현하였습니다.Tailwind를 사용하다보니 점점 자주 사용하는 클래스명이 암기되면서빠른 UI구현이 가능해집니다.또한 Tailwind에서 제공하는 가이드를 어느정도 참고하
Preload & Prefetch 이미지
사이트를 들어가면, 첫 렌더링에 로딩이 상당히 오래걸리는 사이트들이 몇 있습니다. js, css, html 불러오는데 그렇게 오래걸릴리는 없잖아요대부분 이러한 로딩은 이미지, 비디오, 폰트 처럼 크기가 큰 assets 을 로딩하는데 걸리는 시간입니다.이 글에서는 rea
[React]데이터 페칭 라이브러리(SWR)
SWR "SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된
SWR과 Intersection Observer API로 무한 스크롤 구현하기
😵이번 글은 무한 스크롤을 구현하기 위한 일대기를 담은 포스팅입니다…
Next.js 공식문서를 보면서 커머스 사이트(와이즐리) 구현하기 (5)
추천 상품 리스트 페이지 작업이 끝났습니다. 이제 해당 페이지의 노출될 상품의 리스트를 서버를 통해 가져와야 하는데요. 아래처럼 아주 심플하게 3개의 API가 필요해 보입니다 장바구니 조회 API(현재 내 장바구니에 담긴 상품의 개수) 메인 배너(캐루셀)에 노출시