본문 바로가기
반응형

전체 글

 (115)
[개인 프로젝트] MBTI 테스트 - useQuery, useMutation 커스텀 훅 리팩토링 리팩토링 이유 📖Tanstack Query를 사용하면서 여러 컴포넌트에서 중복되는 로직이 발생해 유지보수가 어렵다는 생각이 들었습니다. 그래서 `useQuery`와`useMutation`을 커스텀 훅으로 리팩터링 하고 `queryKey`를 상수화 해 코드의 가독성과 재사용성을 높인 방법에 대해서 공유해보려고 합니다. 기존 코드 📖useQuery, useMutation기존에는 `useQuery`와 `useMutation`을 각 API 호출마다 직접 사용했는데, 여러 컴포넌트에서 중복되는 로직이 많아지고 가독성이 떨어 지는 문제가 있었습니다.const { data: results, isLoading } = useQuery({ queryKey: ["results"] queryFn: getTestResu..
Zustand 동작 원리 알아보기 오늘은 zustand가 내부적으로 어떻게 동작하는 알아보기 위해 zustand github를 확인해 봤습니다.  GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.github.com 파일이 타입스크립트로 작성되어 있는데 보기 편하기 위해 GPT의 힘을 빌려 자바스크립트로 변경했습니다.  react.ts 📖`react.ts`파일의 전체 코드이고, React와의 연동을 해줍니다.import ReactExp..
Zustand 알아보기 Zustand 📖Zustand는 React 애플리케이션에서 상태 관리를 쉽게 할 수 있게 도와주는 가벼운 상태 관리 라이브러리입니다.설치yarn add zustand 사용 방법사용 방법은 이게 끝입니다! 정말 간단하죠!// src > store > bearsStore.jsimport { create } from "zustand";const useBearsStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }),}));export default useBearsStore;// src > App...
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 (해결책, 실행 가능한 것) 😊질문을 두려워하지 않기이해를 못 했을 때 주저하지 말고 적극적으로 질문하기!  회고 🧐다음 ..

티스토리툴바