전체 글

react-query staleTime vs cacheTime

최근 tanstack사의 react-query가 버전 4를 정식 릴리즈 했다. 그리고 공식 이름을 tanstack-query로 변경하고 하위 패키지로 react-query를 제공한다. 이름을 변경한 이유는 react-query v4부터 react 뿐만 아니라 vue, solid, svelte도 지원하기 때문이 아닐까 추측해본다. 회사에서 진행하는 프로젝트에 활발하게 react-query를 도입 중이다. react-query에는 비슷하지만 다른, 헷갈리는 개념들이 몇 개 있다. isFetching과 isLoading, staleTime과 cacheTime이 그러하다. 이번 글은 staleTime과 cacheTime의 개념과 차이점을 정리한 내용이다. staleTime stale의 뜻은 "신선하지 않은"이다..

react-query props drilling 피하기

react-query는 상태 관리 도구이다. 상태 관리 도구를 사용하는 이유 중 큰 부분을 차지하는 것이 props-drilling을 피하기 위해서일 것이다. 이 포스트는 react-query를 사용할 때 props drilling을 피하기 위해 고민했던 내용을 다룬다. 서버에 부담 주지 않기 react-query는 동일 키의 쿼리를 동시에 여러 개 요청하면 내부적으로 하나의 요청으로 만든다. export default function App() { const { data: posts1 } = useQuery(['posts'], fetchPosts); const { data: posts2 } = useQuery(['posts'], fetchPosts); const { data: posts3 } = use..

react-query로 클라이언트 상태 관리 하기

'서버 상태 관리'라는 멋진 키워드로 등장한 react-query는 리액트 생태계에 큰바람을 불러일으키고 있다. 많은 프로젝트에서 redux + redux-saga 조합을 사용한다. 이 조합은 UI와 비동기 작업의 관심사 분리에 있어 해법처럼 사용되곤 했다. 하지만 프로젝트 규모가 커짐에 따라 redux 본연의 가치가 redux-saga의 거대한 덩치에 가려지기 일쑤이다. 그리고 이 조합은 리액트의 학습 곡선을 가파르게 한 주범이기도 하다. 그래서 redux + redux-saga 조합을 새로운 패러다임인 react-query로 대체하려는 움직임이 많이 보인다. 마이그레이션 과정에서 클라이언트 상태 관리 방법에 대한 고민이 늘 따랐다. 이번 포스트는 해당 고민을 정리한 글이다. 서버 상태, 클라이언트 상..

부스트캠프 웹 풀스택 6기 후기

2021년 7월 19부터 2021년 12월 3일까지, 138일간 주중 주말할 것 없이 달렸다. 이 글에서 138일간의 회고와 다음 기수를 위한 정보를 두서없이 작성했다. 왜 했을까? 지금 생각해보면 부스트캠프에 지원하는 것은 정말 대책 없는 행동이었다. 수료 이후 바로 진행되는 '네트워킹 데이'에서 기업이 채용 설명을 한다. 선착순으로 기업별 개인 상담도 진행했다. 그리고 수십 개의 회사가 부스트캠프 수료생을 대상으로 채용을 진행한다. 대부분 기업은 졸업 예정자 또는 졸업자에게만 지원 자격을 준다. 하지만 나는 졸업 예정은커녕 3학년 1학기를 수료한 그냥 대학생이다. 기업들의 채용 공고가 올라오고 지원조차 못 할 때마다 졸업장 없는 설움을 절실히 느꼈다. 부스트캠프를 지원한 주목적이 취업이 아니었음에도,..