사용법설치yarn add zustand store 생성1) zustand 폴더 > bearsStore.js 생성 2) zustand의 create를 사용해 스토어 생성 (이 때 스토어는 관리할 상태에 따라 여러개가 될 수 있음)import { create } from 'zustand';const useBearStore = create((set) => { return { bears: 0, increase: function() { set(function(state) { return { bears: state.bears + 1 } }) }, // 초기화용 함수 init: function (){ set({ ..
Life Cycle fresh데이터를 새로 패칭할 필요가 없는 상태입니다. **staleTime**이 지나지 않은 상태로, 캐시 데이터를 그대로 사용할 수 있습니다.stale데이터를 새로 패칭해야 하는 상태입니다. **staleTime**이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행됩니다.기본 staleTime 은 0으로 설정돼있음! (바로 stale 상태가 됨)active현재 컴포넌트에서 사용 중인 쿼리 상태입니다. 컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 말합니다.inactive더 이상 사용되지 않는 쿼리 상태입니다. 컴포넌트가 언마운트되거나 쿼리가 더 이상 필요하지 않을 때를 말합니다.deleted캐시에서 제거된 쿼리 상태입니다. gcTime(cache Time) 이 지나면 쿼리..
서버상태 관리를 위한 라이브러리데이터를 패칭하고 캐싱, 동기화, 무효화 등의 기능을 제공이전보다 비동기 로직을 간편하게 작성하고 유지보수성을 높일 수 있음 주요 기능1) 데이터 캐싱: 동일한 데이터를 여러번 요청하지 않도록 캐싱하여 성능을 향상시킴2) 자동 리페칭: 데이터가 변경되었을 때 자동으로 리페칭하여 최신상태를 유지3) 쿼리 무효화: 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있음 사용해보기주요 hooks1) get: useQuery2) modify: useMutation3) refresh: invalidateQueries 설치yarn add @tanstack/react-query ProviderQueryClientProvider로 서버상태의 영향권에 들어올 App ..
개요1. 진행 기간: 2024.08.28 ~ 2024.09.032. 인원: 5명3. 개발환경- React, Vite- 전역상태관리: Context API- 데이터베이스: Supabase- Github, Figma, Slack, Notion 등 활용 4. Github 링크프로젝트 소개주제 선정 계기단순 학습 용도가 아닌 실생활에서 활용할 수 있는 프로젝트를 만들어보고싶어 시작된 아이디어다!내일배움캠프에서 빠르게 여러 프로젝트들을 진행하면서 발표를 듣지못한 다른 팀들의 프로젝트도 궁금하고, 내 프로젝트도 한 곳에 모여있으면 뿌듯할 것 같다는 생각이 들었는데 이 기회에 프로젝트들을 한눈에 모아볼 수 있는 기능을 만들어보기로 했다. 주요 담당 기능1. Post fetch 및 Context Provider2. P..
팀프로젝트에서 게시글 작성, 수정 기능을 메인으로 담당하게 됐다처음엔 주요 요구사항들 위주로 빠르게 진행하느라 게시글 내용을 저장해둔 여러 column들 중 제목만, 제목이랑 내용만 이런식으로 수정한 부분만 테이블 update하는 부분을 처리하지 않고 넘어갔는데 결국 처리해야하는 순간이 다가왔다 ㅋㅋㅋ supabase를 사용했고, 게시글의 썸네일을 저장하기위해 supabase에서 storage에 저장 -> storage에서 해당 이미지의 publicUrl을 받아오기 -> 그 publicUrl을 posts table에 저장하는 과정을 거쳤는데, 이미지는 수정에 있어 여러 경우로 나뉠 수 있어 수정 페이지에 들어온 첫 순간과 수정을 마무리하는 순간에 파일이 변했는지 확인하는 과정이 필요했다. 게시글 수정에서..