HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
👻
개발 기록/
📚
CS 스터디/
📚
data fetching 라이브러리 SWR
📚

data fetching 라이브러리 SWR

 
 
SWR & React Query 사용법, data fetching 라이브러리를 사용하는 이유
React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
카카오엔터테인먼트 FE 기술블로그
React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/#swr--react-query
React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
 
SWR vs React Query
React Query vs SWR
리액트 개발자라면 누구나 Redux, MobX 등의 상태 관리 라이브러리를 사용해 본 경험이 있을 것이다. 이 라이브러리들은 클라이언트 상태 관리에는 유용하지만, 서버 상태와 동기화되지 않기 때문에 프론트엔드 개발자들은 직접 상태를 업데이트해 줘야 하는 불편함이 있다. 이러한 불편함을 해소하기 위해 등장한 새로운 방식의 라이브러리가 바로 React Query와 SWR이다.
React Query vs SWR
https://tech.madup.com/react-query-vs-swr/
React Query vs SWR
 
+) bundle size check
Bundlephobia | Size of npm dependencies
Bundlephobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle.
Bundlephobia | Size of npm dependencies
https://bundlephobia.com/
Bundlephobia | Size of npm dependencies
notion image
notion image
 
SWR 2.0 등장
Announcing SWR 2.0 - SWR
We are thrilled to announce the release of SWR 2.0, the popular React data-fetching library that enables components to fetch, cache, and mutate data and keeps the UI up-to-date with changes in that data over time. This new version comes packed with improvements and new features, such as new mutation APIs, improved optimistic UI capabilities, new DevTools, and better support for concurrent rendering.
https://swr.vercel.app/blog/swr-v2
Announcing SWR 2.0 - SWR
 
SWR 퍼포먼스
Performance - SWR
SWR provides critical functionality in all kinds of web apps, so performance is a top priority. SWR's built-in caching and deduplication skips unnecessary network requests, but the performance of the useSWR hook itself still matters. In a complex app, there could be hundreds of useSWR calls in a single page render.
https://swr.vercel.app/docs/advanced/performance
Performance - SWR
 
SWR 원리 이해하기
Understanding SWR - SWR
useSWR returns data, error, isLoading, and isValidating depending on the state of the fetcher function. This diagrams describe how SWR returns values in some scenarios. This pattern is to fetch data and revalidate it later. This pattern is to fetch data and change the key and revalidate it later.
https://swr.vercel.app/docs/advanced/understanding
Understanding SWR - SWR
 
캐싱은 어떻게 하는지
  • key가 cahce를 담당
  • 멀티레벨 캐시 → 그냥 캐시로만 같음을 판단하는 게 아니라 컴포넌트 + 캐시 조합으로 판단함 → 키를 무조건 다르게 줘야 하는 게 아니구나!
  • global state, weakmap으로 관리, cache와 global state를 key, value를 가짐.
 
SWR 테스트 코드 분석
  • 어떤 기능을 제공하느냐 + 어떤 예외사항을 처리하느냐
  • 주석 잘 써놓음. 코드만으로 의도를 표현할 수 없겠다 싶으면 주석을 써주는 것도 좋은 것 같음.
 
 
오픈 소스 보는 방법 팁
오픈소스독해 101
오픈소스독해 101
오픈소스독해 101
https://www.youtube.com/watch?v=-ybVWOHVDyA
오픈소스독해 101
React Source Code Walkthrough 1 - Hello world! debugging | JSer - React Lover
React Source Code Walkthrough 1 - Hello world! debugging | JSer - React Lover
https://youtu.be/OcB3rTln-fI
React Source Code Walkthrough 1 - Hello world! debugging | JSer - React Lover
Codebase Overview - React
This section will give you an overview of the React codebase organization, its conventions, and the implementation. If you want to contribute to React we hope that this guide will help you feel more comfortable making changes. We don't necessarily recommend any of these conventions in React apps.
Codebase Overview - React
https://reactjs.org/docs/codebase-overview.html
Codebase Overview - React