# swr

wns450

요즘 리펙토링과 최적화를 진행하면서 어떻게 하면 좀 더 업그레이드할 수 있는지 고민하고 있었다. 그러던 중 계기 토스ㅣSLASH 22 - 잃어버린 유저의 시간을 찾아서 : 100년을 아껴준 SSR 이야기 를 보다가 자극을 받았다. 어떤 내용이었냐면 기존의 CSR 방식에서 SSR로 미리 데이터를 받아오는 방식을 통해 LCP를 단축 시켰다는 이야기였다. > LCP(Largest Contentful Paint) : LCP는 페이지가

jeong_lululala

키워드 usehooks-ts useBoolean useEffectOnce useFetch useInterval useEventListener useLocalStorage useDarkMode swr react-query 최종 목표 간단한 서버를 만들고, custom hook 을 사용하여 서버에서 데이터를 받아올 수 있다. 현재 목표 usehook-ts 라이브러리에 대해 알아보자. usehooks-ts 란? usehooks-ts 공식문서 타입스크립트로 만들었지만 자바스크립트에서도 사용 가능하다. 모든 Hook 에 대해 어떻게 만들었는지 나와있어서 Hook 을 만드는데 많은 영감을 얻을 수 있다. usehooks-ts 설치하기 useBoolean 이란? [useBoolean 공식문서](https://

ckdgus5189

로그인 후 각 페이지로 넘어갈 경우 새로고침해야 로그인 유저 데이터가 불러와지는 문제가 발생했다. 처음에는 전역관리를 못해서 생기는 문제인가 싶어 유저데이터 전역관리 시도를 하거나, 불러오는 타이밍 문제일 수도 있겠다 싶어서 유저 데이터가 불러와졌을 경우 게시글 데이터가 리렌더링 되도록 시도도 해봤지만 실패했다. 도대체 뭐가 문제일까 싶어, 로그인과 유저쪽 담당하던 팀원에게 물어봤는데, 본인도 잘 모르겠다고 했다. 포스트맨으로 로그인 유저 엑세스 토큰을 헤더에 넣어보니 잘되는 걸 확인했다. 혹시나 해서 팀원에게 프론트에서 헤더에 토큰 넣어주는 로직엔 문제가 없냐고 물어봤을 땐 문제가 없다고 얘기했었다. 이제부터 무한의 굴레에 빠졌다,,, 도대체 왜 안되는건지 이해가 안됐다... 또 새로고침을 하면 되고,,,? 도저히 안되겠다 싶어, 크몽에서 전문가에게도 물어봤는데 본인들도 모르겠다고 하거나, 비용이 너무 비싸서 차마 더 진행하지 못했다.... 그러다가 문뜩 생각이 났는데, 혹시 팀

ckdgus5189

위 코드는 기존 무한스크롤을 구현 해둔 코드에 SWR mutate메서드를 추가해, 스크롤을 최하단까지 내렸을 경우 페이지네이션 다음 페이지에 데이터를 10개씩 불러오도록 구현한 코드다. 코드를 위처럼 구현하고 로컬에서 테스트를 진행했는데, 스크롤을 최하단까지 내리고 다음 데이터를 불러올 때 스크롤이 다시 최상단으로 올라가는 문제, 마지막 데이터까지 불러오고 나서, 빈 데이터 배열을 불러오는 문제가 발생했다. 그래서 위처럼 데이터가 빈 배열일 경우 이전 데이터만 반환하도록 시도해보고, 여러 시도를 해봤는데, 결론적으로 안먹혔다... swr 공식 문서를 살펴보자,,,, swr 페이지네이션 적용법 알고 보니 swr로 페이지네이션 적용하려면 애초에 swr를 바로 사용하는게 아니라 useSWRInfinite를 사용해야했다... 이거 하나 때문에 며칠이나 고생하고 있었는데,,, 처음부터 공식문서 열심히 읽어

aroo_ming

💎 SWR 데이터 가져오기를 위한 react hook 캐시(stale)로부터 데이터 반환 → fetch 요청 → 최신화된 데이터 가져오기 즉, 다른 컴포넌트에서 동일한 상태를 사용하고자 하는 경우 이전에 캐시했던 상태를 그대로 사용 서버로 재요청 하는 방식 ❌❌ 서로 다른 컴포넌트에서 동일한 상태 공유 가능! 한 줄의 코드로 데이터 가져오기 가능 💎 SWR ! React Query와 비교하여 자세히 알아보기 🔥 React Query 리액트 어플리케이션에서 서버 상태를 가져오고, 캐싱, 동기화, 업데이트하는 것을 쉽게 해줌. 🌊 SWR 캐시에서 데이터를 반환한 후, 서버에 데이터를 가져오는 요청을 보내고, 마지막으로 최신 데이터를 제공함. 1. Provider 🔥 React Query Provider로 컴포넌트를 감싸지 않을 경우, 에러 발생함. 🌊 `SWR

wisdom-13

1. SWR 시작하기 > 공식문서 : https://swr.vercel.app/ko SWR을 설치합니다. 그 다음, useSWR을 import하고 아래 코드와 같이 사용할 수 있습니다. fetcher는 fetch할 때 어떤 방식(fetch, axios 등)으로 사용할지 설정할 수 있습니다. 2. SWR Context 만들기 하지만 모든 곳에서 fetcher를 설정해주는 것은 번거롭기 때문에 Context를 사용하여 fetcher를 전역으로 설정할 수 있습니다. SWR은 CSR 환경에서 동작하기 때문에 별도의 Context 파일을 생성해준 뒤 layout.tsx 파일에서 호출해주도록 합니다. 생성한 SWRConfigContext로 children을 감싸줍니다. 3. SWR 사용하기 fetcher를 생략하고 아래와 같이 사용할 수 있습니다.

evelo

SWR / GROQ 를 활용 sanity에 저장한 데이터 불러오기 SWR - https://swr.vercel.app/ko/docs/getting-started , https://swr.vercel.app/docs/global-configuration SWR을 global configuration으로 활용하기 위해서 layout.tsx 파일에 children 감싸주기 fetch 뿐만아니라 axios와 같은 라이브러리도 사용 가능 fetcher를 글로벌하게 적용시켰기때문에 useSWR를 import해서 url만 작성해주시면 바로 적용가능 예시로 api/test 폴더로 서버를 구축하고 'hello'를 response로 return 한다고 가정하고 SWR 사용 app/api/test/route.ts 생성 NextResponse - https://nextjs.org/docs/app/api-reference/functions/next-respo

oknuh1501

문제점 > swr에 의한 업데이트시마다 axios interceptor로 인해 오류 지속적으로 발생. 현재 나의 코드 문제 판단 >axios 인스턴스를 생성했을 때 다른 api에서도 사용하는 인스턴스를 swr 코드에 사용해서 난 것이 아닐까? 바로 이 코드를 swr에서도 공유하기 때문에 업데이트시마다 불필요하게 interceptor가 발동된 것이라고 판단하였다. 문제 해결을 위한 시도 >swr에서만 사용하는 전용 인스턴스 생성 결과 ![](https://velog.velcdn.co

h_jinny

문제 상황: 댓글 기능을 만드는 중 댓글이 등록되어 해당 댓글이 속한 리스트 데이터가 변경 되었는데, 변경된 데이터가 클라이언트 측으로 바로 갱신되지 않는 문제가 발생했다. 이 때문에 사용자가 댓글을 쓴 바로 직후 화면이 업데이트 되지 않고 새로고침을 하고 나서야 화면에 반영되는 것이다. SWR 을 이용해서, 서버에 보낸 변경된 데이터가 실시간으로 클라이언트에도 적용되도록 하고싶은데 바로 반영이 안되었던 이유는, SWR 이 캐싱과 재사용을 기반으로 동작하기 때문에 데이터의 변경이 즉시 반영되지 않을 때가 있기 때문이었다. 😱 그렇기에 데이터를 변경한 후 캐시를 새로 갱신해야했고, SWR 에서 제공하는 mutate 라는 함수를 사용하여 데이터를 캐싱 및 업데이트 할 수 있었다. mutate 함수는 캐시된 데이터를 직접 갱신하고 컴포넌트를 리렌더링 해준다. 예를 들어, 데이터를 변경한 후에 mutate 함수를 호출하여 캐시된 데이터를 갱신할 수 있다. 이렇게

koyk0408

이전에 무한스크롤을 구현했으나, 스크롤이 없으면 기능이 제대로 작동하지 않는 에러를 발견했다. 디폴트로 10개씩의 아티스트 리스트를 불러오는데, 20개를 불러오는것으로 간단하게 해결하고 싶은 마음이 들 정도로 쌩고생을 했는데😭 결국 해냈다. 문제를 발생시키기 위한 조건 큰 모니터(스크롤이 안생김) 문제의 원인 ref가 null에서 업데이트되지 않음 10개의 리스트를 swr이 받아오고 화면에 뿌린다. 이때 가장 마지막 요소에 ref를 할당했다. 내가 의도한 동작은 새로운 리스트를 받아올때마다 ref가 리스트의 가장 마지막 요소로 업데이트되는 것이다. 그런데 ref를 아무리 봐도 null이 나왔다. 초기 렌더링시 아직 데이터가 없는 상태에서 ref=null로 할당되는 것으로 보였다. useEffect의 의존성배열에 target을 넘겨 mount되었을때 ref가 설정되도록 하고 target이 업데이트될 때 감지할 수 있도록 했으나 작동되지 않았다. > u

hyeseong0914

이번에 개발하는 앱에 중고거래하는 서비스가 들어가면서 최신화된 데이터를 꾸준히 가져와서 관리해야 하는 결제와 주문 데이터들이 들어가면서 SWR이라는 것을 알게 되었다. 데이터 가져오기를 위한 React Hooks이라는 SWR에 공부한 것을 글로 남겨보려 한다. SWR이란? SWR은 Stale-While-Revalidate의 약자로, React 컴포넌트에서 사용할 수 있는 훅 형태의 SWR 라이브러리이다. SWR을 사용하면 간편하게 데이터를 가져오고, 캐시 하여 이전 데이터를 재사용하며, 신선한 데이터를 가져와서 사용자 경험을 향상할 수 있다고 한다. 설치 적용 우선, 데이터를 가져오는 API를 호출하는 함수 fetcher 함수를 생성한다. 이 핵심 함수와 같이 use

nninnnin7

FOUC는 Flash Of Unstyled Content의 줄임말이다. 아래 이미지에서처럼, 스타일링이 미처 완료되지 않은 컨텐츠가 사용자에게 잠시간 노출되는 것을 의미한다. FOUC styled-components를 이용해 자바스크립트로 클라이언트 사이드에서 스타일링이 적용되기에 발생하는 문제이다. 두가지를 적용하여 FOUC를 고칠 수 있었다. 1) styled-components에 SSR 설정 적용 (세팅 후 Next.js에서 페이지를 SSR 설정하면 스타일링 또한 자동적으로 서버사이드에서 적용된다) 2) 토큰 리스트도 서버사이드에서 가져와 미리 렌더링할 수 있도록 만들어주었다. 데이터를 서버사이드에서 가져올 수 있도록 SWR을 사용했다. 서버사이드 페칭 이후, 클라이언트 사이드에서 추가적으로 re

turtlemana

SWR, React-Query 왜 쓰는걸까? 프론트엔드 개발자라면 '상태(state) 관리'라는 말에 어느정도 익숙할 것이다. 상태 관리를 매우 축약해서 말하자면, 어플리케이션에서 활용되는 데이터들의 형태를 관리한다는 것이다. React를 기준으로 상태는 일반적으로 세 가지로 구분된다. > 지역 상태 (Local) 전역 상태 (Global) 서버 상태 (Server) 1. 지역 상태 -> React Component 내에서만 정의되는 상태로 보통, useState, useRef 등으로 관리된다. 2. 전역 상태 -> Context Proivder의 자식 Component이면, 어디서든 접근 가능한 상태이며, React에서는 보통 context api와 useReducer을 통해, 전역 상태를 관리한다. (Context api기준 설명이며, 이외에도 Redux, MobX 등도 자주 활용된다)

taeyooooon

아래 사진처럼 검색 키워드가 변경될 때 마다 불필요하게 네트워크 요청을 계속 보내는 모습입니다. 개인 프로젝트 수준에서는 무시해도 될 수준이지만 실제 현업에서는 이런 불필요한 요청들이 모이면 비용 문제가 은근 클거 같아서 이번 기회에 개념만 알고있던 를 이용해서 최적화를 해보았습니다. 1. Debounce와 Throttle이란? 디바운스와 쓰로틀은 특정 함수의 실행이 반복적으로 실행될 때 네트워크 또는 Cpu등의 과부화를 막기위한 프로그래밍 기법입니다. 다수의 호출로 인한 성능저하를 방지하기 위해 호출 수 자체를 줄이면 됩니다. 는 다수의 호출을 묶는 것이다. 100번의 요청이 단기간에 몰릴 경우 마지막 요청만을 실행한다고 생각하면 되고, 은 다수의 호출에 간격

wns450

이번에 무한 스크롤 구현하기로 하였다. 코드를 직접 작성하고 추가하는 식으로 추가하려고 하였지만, SWR 공식 문서를 보던 중, ReactQuery 와 같은 방식으로 구현하는 것이 있어서 활용하게 되었다. 활용하는 이유는 2가지이다. 1번째는 라이브러리를 설치하였어서 활용도를 높이기 위함이고, 2번째는 캐싱 최적화가 잘되어있어서 그렇다. SWR 훅 중에 useSWRInfinite 로 하나의 후크를 통해 여러 요청을 트리거할 수 있다. 이를 활용할 것이다. SWR에서 활용하는 예제를 보면 load more를 클릭하면 데이터를 더 받아오거나 refresh를 통해 데이터를 업데이트할 수 있고, clear를 통해 초기화 할 수 있다. ![](https://velog.velcdn.c

creyon0215

상태 관리 라이브러리 ContextAPI, Redux, MobX, SWR는 상태 관리 라이브러리 혹은 패턴으로 React 프레임워크에서 사용되는 대표적인 상태 관리 방법이다.(State) Context API Context API는 React에서 기본적으로 제공하는 상태 관리 방법 중 하나이다. Context API를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있다. 이를 통해 props를 이용한 데이터 전달이 필요 없어지므로, 중간 단계의 컴포넌트에서 별도의 코드 없이 데이터를 전달할 수 있다는 장점이 있다. 아래는 간단한 예시 코드 Redux Redux는 React에서 가장 많이 사용되는 상태 관리 라이브러리 중 하나이다. Redux는 전역 상태를 관리하는데에 사용되며, 상태를 변경하는 방법

hawnbin

DOTORI 란? Dormitory(기숙사) 줄임말인 Dotori 프로젝트는 기숙사 자습신청 등 잡다한 것들이 모두 사감 선생님의 수기로 작성되어야 한다는 점에서 불편함을 느끼게 되어서 기숙사의 자습신청, 안마의자 사용, 규정 위반, 기상음악 신청 등을 웹사이트로 간편하게 관리 할 수 있도록 만든 웹사이트다. DOTORI-v2 ? 기존에 만들어진 도토리는 디자이너가 따로없어서 사용자가 디자인이 아쉽다는 평이 많았고 파일구조도 제대로 짜고 만든게 아니라 잘 구조화되지 않았고 인증로직도 재대로 짜여져 있지 않는등 여러가지 문제로 인해 도토리 v2 를 내기로 했다. 이번에 v2에는 디자인변경, 다크모드, Next.js 로 migratio

resyve

SWR에는 useSWRInfinite hook이 존재합니다. 이를 이용해서 무한스크롤을 쉽게 만들 수 있는데요, 같이 볼게요! useSWRInfinite에는 size와 setSize라는 인자를 받아올 수 있습니다 이는 주석처럼 현재 페이지가 어디인지, 그리고 끝에 도달했을 때 다음 페이지를 읽어줄 수 있도록 변경 함수를 사용할 수 있습니다 이 때 주의해야 할 점은 useSWRInfinite를 사용해서 데이터를 가져오게 되면 배열에 한 번 더 감싸져서 반환하기 때문에 .flat함수를 사용하거나, lodash에 있는 flatten 함수를 사용해 벗겨준 후 사용해 주어야 합니다. 그리고 무한스크롤의 원리는 유저가 어떤 요소에 접근했을 때 다음 데이터를 불러와 보여주는 것인데 useRef를 사용하는 방법도 있겠지만 오늘은 react-intersection-observer 라이브러리를 같이 사용해볼 예정입니다. 사용 방법 우선 패키지를 설치해 줍니

resyve

SWR SWR은 stale-while-revalidate에서 유래되었고, 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다 데이터를 가져오기 위한 React Hooks고 Next.JS를 개발한 zeit 그룹에서 사용하는 라이브러리고, 백그라운드에서 캐시를 재검증(revaildate)하는 동안에 기존의 캐시 데이터(stale)를 사용하여 화면을 그려줍니다 도중에 에러를 반환하더라도 캐시된 데이터를 활용할 수 있게 함으로써 불필요한 데이터 호출과 렌더링에 시간을 쓰지 않고 효율적으로 동작합니다 장점 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 내장된 캐시 및 요청 중복 제거 실시간 경험 전송 및 프로토콜에 구애받지 않음 SSR / ISR / SSG support 설치 방법 사용 방법 API **파라

chltpgus

프론트 개발을 하면서 모든 작업을 프론트단에서 할 수 있으면 좋겠지만, 아쉽게도 대부분의 프로젝트가 api 호출이 필요하다. 프로젝트 마다 다르지만 많은 api를 호출하고 사용하기 위해서는 관리가 필요하다. 더 효율적이고 가독성이 좋고 편리하게 api 호출을 하기위해서 react query를 사용해보자. react로 데이터를 fetching하는 기본 코드는 이런 형태이다. useEffect에서 fetchData 함수를 선언하고 사용해서 data state에 저장하여 사용한다. 정상적으로 작동하고 문제가 없는데, 데이터를 가져오는 부분과 state가 분리되어 있어서 코드의 양이 늘어나면 가독성이 현저하게 떨어진다. react query 기본 형태다. 위에 react 기본 형태 처럼 fetching부와 state 선언부가 나눠져있지 않고 선언적이다. 따로 state를 만들어서 사용하지 않아도 되어서 구조 자체가 편리한 것 같다. 그리고 loading 상태와 refetch