Tanstack Query 캐시데이터의 생명주기

Life Cycle fresh데이터를 새로 패칭할 필요가 없는 상태입니다. **staleTime**이 지나지 않은 상태로, 캐시 데이터를 그대로 사용할 수 있습니다.stale데이터를 새로 패칭해야 하는 상태입니다. **staleTime**이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행됩니다.기본 staleTime 은 0으로 설정돼있음! (바로 stale 상태가 됨)active현재 컴포넌트에서 사용 중인 쿼리 상태입니다. 컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 말합니다.inactive더 이상 사용되지 않는 쿼리 상태입니다. 컴포넌트가 언마운트되거나 쿼리가 더 이상 필요하지 않을 때를 말합니다.deleted캐시에서 제거된 쿼리 상태입니다. gcTime(cache Time) 이 지나면 쿼리..

• format_list_bulleted React
• · 2024. 9. 5.
• textsms

TanStack Query

서버상태 관리를 위한 라이브러리데이터를 패칭하고 캐싱, 동기화, 무효화 등의 기능을 제공이전보다 비동기 로직을 간편하게 작성하고 유지보수성을 높일 수 있음 주요 기능1) 데이터 캐싱: 동일한 데이터를 여러번 요청하지 않도록 캐싱하여 성능을 향상시킴2) 자동 리페칭: 데이터가 변경되었을 때 자동으로 리페칭하여 최신상태를 유지3) 쿼리 무효화: 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있음  사용해보기주요 hooks1) get: useQuery2) modify: useMutation3) refresh: invalidateQueries  설치yarn add @tanstack/react-query ProviderQueryClientProvider로 서버상태의 영향권에 들어올 App ..

• format_list_bulleted React
• · 2024. 9. 5.
• textsms

[React] 비동기 작업, HTTP

Promise.all(처리할 비동기 작업의 배열)function App() { useEffect(() => { Promise.all([ fetch(url).then(response => response.json()), fetch(url2).then(response => response.json() ]).then(function([response1, response2]) => { console.log("response 1: ", response1); console.log("response 2: ", response2); }); }, []);}-> Promise.all을 이용해 두가지 fetch를 동시에 실행-> response 또한 배열로 반환되기 때..

• format_list_bulleted React
• · 2024. 9. 5.
• textsms

[React/supabase] 변경된 column만 업데이트하기

팀프로젝트에서 게시글 작성, 수정 기능을 메인으로 담당하게 됐다처음엔 주요 요구사항들 위주로 빠르게 진행하느라 게시글 내용을 저장해둔 여러 column들 중 제목만, 제목이랑 내용만 이런식으로 수정한 부분만 테이블 update하는 부분을 처리하지 않고 넘어갔는데 결국 처리해야하는 순간이 다가왔다 ㅋㅋㅋ supabase를 사용했고, 게시글의 썸네일을 저장하기위해 supabase에서 storage에 저장 -> storage에서 해당 이미지의 publicUrl을 받아오기 -> 그 publicUrl을 posts table에 저장하는 과정을 거쳤는데, 이미지는 수정에 있어 여러 경우로 나뉠 수 있어 수정 페이지에 들어온 첫 순간과 수정을 마무리하는 순간에 파일이 변했는지 확인하는 과정이 필요했다. 게시글 수정에서..

• format_list_bulleted React
• · 2024. 9. 3.
• textsms

[React] react-router-dom Outlet 이동하지 않을 때

원하는 페이지로 이동하지 않는 오류시도한 방법알고보니 Outlet과 관련된 문제였고 내가 Outlet의 개념을 정확히 몰라서 ㅎㅎ ㅠ 설정을 잘못 한 것이 문제였다우선 라우팅되는 경로들을 확인했을 때 로그인 후 ProtectedRoute로 이동 -> 로그인 되지 않은 경우 (예외처리) SignIn 페이지로 이동 -> 그렇지 않은 경우 Outlet 반환인 것을 확인했다. const routesForAuthenticatedOnly = [ { path: "/", element: , }, { path: "", element: , }, { path: "/profile", element: , }, ]; export const ..

• format_list_bulleted React
• · 2024. 8. 27.
• textsms

[React] 컴포넌트에 styled-components 로 스타일 적용하기

개인프로젝트로 열심히 기능 구현을 하고 styled-component를 처음 활용해보려는데.. 시작부터 난관에 막혔다 🥹일반적인 div 태그 등에는 잘 적용이되는데 내가 만든 컴포넌트에는 아무리 시도해도 적용이 안됐다겨우겨우 해결하고 원인을 좀 더 알아봤다 ** 튜터님께 여쭤보니 globalStyle을 제외하고는 따로 분리를 잘 하지 않는다고 한다! jsx 파일에서 필요한 곳에서 styled component 생성해서 사용해주면 된다 기존 코드지금 스타일을 적용하려는 컴포넌트는 NavButton이고 이 컴포넌트는 button을 감싸는 Button에 추가 기능이 적용된 컴포넌트다// Home.styles.jsimport styled from "styled-components";import NavButto..

• format_list_bulleted React
• · 2024. 8. 23.
• textsms