전체 글 (96) 썸네일형 리스트형 TanStack Query 알아보기 3 (Query Cancellation, Optimistic Updates, Prefetching, Paginated, Infinite Queries) Query Cancellation 📖불필요한 네트워크 요청을 제거하기 위해 사용합니다. 대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소시켜 불필요한 네트워크 비용을 줄일 수 있습니다. queryFn의 매개변수로 Abort`Signal`을 받을 수 있고 이를 활용해 Query 취소가 가능합니다. 사용 방법queryFn은 매개변수로 `QueryFunctionContext`객체를 받습니다.export const getTodos = async (queryFnContext) => { const { queryKey, pageParam, signal, meta } = queryFnContext; // queryKey: 배열형태의 쿼리키 // pag.. TanStack Query 알아보기 2 (동작 원리) SWR 전략 📖stale을 사전에 검색해 보면 `신선하지 않은``오래된`이라는 뜻을 가지고 있습니다. 말 그대로 `SWR(stale while revalidate)`은 최신 데이터가 도착하기 전까지 기존 캐시 데이터를 사용하는 전략입니다. ❓그런데 이`캐시 데이터`어디에 보관되는 걸까요캐시 데이터 📖TanStack Query는 `캐시 데이터`를 전역적으로 관리합니다. `QueryClientProvider`를 사용해 React 애플리케이션 전체에서 캐시 데이터에 접근할 수 있습니다. 이렇게 될 수 있는 이유는 TanStack Query는 내부적으로 `React Context API`를 사용해 구현되어 있어서 모든 자식 컴포넌트가 캐시 데이터에 접근할 수 있기 때문입니다. 데이터 흐름 ✨ 주요 흐름 ✨ .. TanStack Query 알아보기 1 (기본 사용법) TanStack Query 📖서버 상태를 관리하기 위한 라이브러리로 서버 상태를 페칭, 캐싱, 동기화, 업데이트하는 작업을 아주 쉽게 해 줍니다.주요 기능`데이터 캐싱`: 동일한 데이터를 여러 번 요청하지 않도록 캐싱하여 성능을 향상합니다.`자동 리페칭`: 데이터가 변경되었을 때 자동으로 리페칭하여 최신 상태를 유지합니다.`쿼리 무효화`: 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있습니다. 사용 방법 📖설치yarn add @tanstack/react-query 적용할 범위에 Provider를 이용해 적용합니다.// main.jsximport ReactDOM from "react-dom/client";import App from "./App.jsx";import "./ind.. axios 알아보기 axios 📖axios란 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트입니다. 설치yarn 사용하기yarn add axios 요청 방법 📖GET`get`은 데이터를 조회할 때 사용합니다.axios.get(url[, config])const { data } = await axios.get("http://localhost:4000/todos"); url은 요청에 사용될 서버 url입니다. config는 여러 가지 옵션을 넣을 수 있습니다. 요청 Config | Axios Docs요청 Config 다음은 요청을 만드는 데 사용할 수 있는 config 옵션들 입니다. 오직 url만 필수입니다. method를 지정하지 않으면 GET방식이 기본값 입니다. { url: '/user', .. [팀 프로젝트] 방콕 스타일 회고 Keep (현재 만족하는 부분) 😁새로운 시도기능 구현을 다 했더라도 어떻게 하면 더 좋은 코드가 될 수 있을까 고민하고 시도를 해보면서 발전하려고 하는 모습이 좋았습니다! 서로의 장점서로의 코드를 보면서 잘 작성한 코드는 보고 배울 수 있다는 점에서 좋았습니다! 의견 공유PR과정에서 서로의 의견을 공유하고 개선점이 있다면 반영해 좋은 PR을 작성하려고 노력했습니다! Problem (불편하게 느꼈던 부분) 😥마이크 음량마이크 음량이 작아서 소통하는 데 다소 어려웠던 부분이 살짝 아쉬웠습니다. 소극적질문, 의견 제시 과정에서 다소 소극적이었던 부분이 살짝 아쉬웠습니다. Try (해결책, 실행 가능한 것) 😊질문을 두려워하지 않기이해를 못 했을 때 주저하지 말고 적극적으로 질문하기! 회고 🧐다음 .. [팀 프로젝트] 방콕 스타일 팀 프로젝트 소개 📖방콕 스타일방콕 스타일은 재택근무, 원격 수업 등 집에서 나가지 않고도 스타일리시한 OOTD를 완성할 수 있는 패션 뉴스피드 서비스입니다. 배포 링크 : https://bangkok-style.vercel.app/깃허브 링크 : https://github.com/smu06030/bangkok-style파일 구조 🗂️📦src┣ 📂assets┃ ┣ 📂fonts┃ ┗ 📂images┣ 📂components┃ ┣ 📂Layout┃ ┣ 📂MyPage┃ ┗ 📂UI┣ 📂constant┣ 📂Context┣ 📂hooks┣ 📂modules┣ 📂pages┃ ┣ 📂private┃ ┣ 📂public┣ 📂routes┣ 📂services┣ 📂styles┣ 📂utils┣ 📜Ap.. [트러블 슈팅] 방콕 스타일 (새로고침 시 좋아요 랜덤 활성화 이슈) 팀 프로젝트 방콕스타일을 진행하면서 발생한 트러블 슈팅입니다.발생한 오류 🔥방콕 스타일 뉴스피드 프로젝트에서 게시물 목록을 렌더링 하던 중 페이지를 새로고침했을 때, `좋아요`가 랜덤으로 활성화된 상태로 표시되는 오류가 발생했습니다. 좋아요가 랜덤으로 표시되는 건 아주 큰 문제였기 때문에 해결이 시급했습니다. 해결 과정 🔎useOnAuthStateChange supabase에서 auth 관련 event가 발생할 때마다 알림을 받는 메서드입니다. 그래서 session이 있으면 컨텍스트에 `session.user`정보를 보내서 컨텍스트에서 유저 정보를 저장하게 됩니다.// 유저정보를 context에 저장하는 함수const useOnAuthStateChange = () => { const { signI.. [트러블 슈팅] 방콕 스타일 (supabase RLS 오류) 팀 프로젝트 방콕스타일을 진행하면서 발생한 트러블 슈팅입니다. Supabase RLS(행 수준 보안) 상태 업데이트 오류발생한 오류 🔥supabase를 사용하면서 좋아요 테이블 상태 업데이트를 시도할 때 결과가 반영되지 않고 빈 배열만 반환하는 오류가 발생했습니다. 해결 과정 🔎RLS에 대해 인지하지 못하고 있을 때 요청을 보내는 쿼리문이 잘못됐나 여러 번 확인을 거치고 칼럼명과 쿼리문을 확인해 봤는데 아무런 문제가 없었습니다. 그래서 오류를 발견하기까지 오랜시간이 걸렸습니다. 그러다가 빈 배열을 반환하는 이유가 RLS 정책에 관련된 걸 알게 되었고 확인을 진행했습니다. 정책 확인 우선, RLS 정책이 올바르게 설정되었는지 점검했는데 설정이 안되어 있는 것을 확인했습니다. 그래서 해당 정책을 다시 한.. 이전 1 2 3 4 5 6 7 ··· 12 다음
