전체 글

Zustand 스토어에서 expends의 초기값을 설정하는 방법으로 useQuery를 사용할 수 있지만, useQuery는 React 컴포넌트 내부에서만 사용할 수 있습니다. 대신 Zustand와 Tanstack Query를 함께 사용하여 상태를 관리할 수 있는 패턴을 사용할 수 있습니다.다음은 Zustand와 Tanstack Query를 함께 사용하여 초기 데이터를 설정하는 방법입니다.1. Tanstack Query와 Zustand 설정먼저, react-query 라이브러리와 Zustand를 설치해야 합니다.npm install @tanstack/react-query zustand2. Zustand 스토어 설정Zustand 스토어를 설정하고, expends 상태를 관리하는 방법을 정의합니다.import..

리액트에서 Context API를 사용하지 않고 Tanstack Query를 사용하여 Supabase의 인증 상태를 관리하고 확인하는 방법은 다음과 같습니다.1. Tanstack Query 설정import { QueryClient, QueryClientProvider, useQuery } from 'react-query';import { supabase } from './supabaseClient';const queryClient = new QueryClient();function App() { return ( );}2. 인증 상태 확인const fetchSession = async () => { const { data: { session }, error } = await ..

슬라이딩 윈도우(Sliding Window)는 알고리즘 문제 풀이에서 자주 사용되는 기법으로, 고정된 크기의 윈도우(부분 배열)를 사용하여 배열이나 문자열을 순회하면서 부분 배열의 합이나 최대값, 최소값 등을 효율적으로 계산할 때 사용됩니다.슬라이딩 윈도우 기법의 기본 아이디어는 다음과 같습니다:윈도우의 크기를 설정합니다.처음 윈도우의 값들을 계산합니다.이후로는 윈도우를 한 칸씩 오른쪽으로 이동하면서 새로운 값을 추가하고, 이전 값을 제거하여 계산을 갱신합니다.예를 들어, 배열에서 고정된 크기 k의 부분 배열의 합을 구하는 문제를 슬라이딩 윈도우 기법으로 해결해 보겠습니다.예제 문제: 길이가 k인 부분 배열의 최대 합을 구하기주어진 배열에서 길이가 k인 모든 부분 배열의 합을 계산하여 그 중 최대 합을 ..

useMutation, Optimistic Update 패턴useMutation 훅은 비동기 작업(특히 서버에 데이터를 추가, 수정, 삭제하는 작업)을 처리할 때 사용됩니다.이 예제에서는 addTodo 함수가 서버에 새로운 할 일을 추가하는 비동기 작업을 수행합니다.useMutation 훅을 사용하여 이러한 작업의 상태(성, 실패, 진행 중 등)를 관리하고, 해당 작업이 애플리케이션의 상태에 미치는 영향을 제어할 수 있습니다.주요 콜백 및 설정mutationFn:mutationFn은 실제로 변이를 수행하는 비동기 함수입니다. 여기서는 addTodo 함수가 이 역할을 합니다.onMutate:onMutate는 변이가 시작될 때 호출됩니다.서버에 요청을 보내기 전에 로컬 상태를 업데이트하여 응답 지연을 사용자..

useQuery 의 queryKey 배열에 대해 설명해주세요useQuery의 queryKey는 React Query에서 캐싱 및 상태 관리의 핵심 요소입니다. queryKey는 쿼리의 고유한 식별자로 사용되며, React Query는 이를 기반으로 데이터 캐싱, 데이터 무효화, 리패칭 등을 관리합니다.queryKey의 역할데이터 캐싱 및 식별:queryKey는 쿼리의 고유 식별자입니다. 동일한 queryKey를 가진 쿼리는 동일한 데이터 캐시를 공유합니다.React Query는 queryKey를 사용하여 캐시된 데이터를 저장하고 검색합니다.쿼리 무효화 및 리패칭:특정 queryKey를 가진 쿼리를 무효화하면, React Query는 해당 queryKey에 대한 데이터를 무효화하고, 필요에 따라 다시 패칭..

01) Tanstack Query life cycle(1) (캐시 데이터에 대한) LifeCycle 설명TanStack Query의 생명주기는 데이터가 캐시되고, 사용되고, 갱신되는 과정을 포함합니다.아래는 주요 상태들에 대한 설명입니다.상태설명fresh데이터를 새로 패칭할 필요가 없는 상태입니다. staleTime이 지나지 않은 상태로, 캐시 데이터를 그대로 사용할 수 있습니다.stale데이터를 새로 패칭해야 하는 상태입니다. staleTime이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행됩니다.active현재 컴포넌트에서 사용 중인 쿼리 상태입니다. 컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 말합니다.inactive더 이상 사용되지 않는 쿼리 상태입니다. 컴포넌트가 언마운트되거나 쿼리..

initializeUser 등의 메서드는 필요없다Tanstack Query 로 Auth 를 구성 할 때, 로그인 등의 경우,initializeUser 등을 따로 실행할 필요가 없습니다.staleTime을 infinity 로 설정하고 로그인 등의 함수에 invalidateQueries 를 해주는 것이 더 좋습니다!class AuthAPI { private axios: Axios; private token: string | null; constructor(axios: Axios) { const accessToken: string | null = localStorage.getItem("accessToken"); this.axios = axios; this...

완전탐색완전탐색은 가능한 모든 경우의 수를 전부 탐색하여 정답을 찾는 알고리즘 방법입니다. 이 방법은 문제 해결에 있어서 가장 기본적이고 직관적인 접근 방식으로, 문제의 모든 가능한 해를 생성하고 이를 모두 검사하여 최적의 해를 찾습니다.완전탐색은 보통 다음과 같은 경우에 사용됩니다:문제의 입력 크기가 작을 때최적의 해를 반드시 찾아야 할 때문제 해결을 위한 다른 더 효율적인 알고리즘을 모르거나 구현하기 어려울 때완전탐색의 단점은 일반적으로 시간 복잡도가 매우 높다는 것입니다. 가능한 모든 경우를 모두 탐색하기 때문에 입력 크기가 커지면 시간 내에 문제를 해결하기 어려울 수 있습니다.예제: 모든 부분 집합 찾기다음은 주어진 집합의 모든 부분 집합을 찾는 예제를 자바스크립트로 구현한 것입니다. 이는 완전탐..

오늘은 PrivateRoute / ProtectedRoute 의 구현 방법을 정리해 보려고 합니다.PrivateRoute / ProtectedRoute 는 사용자 인증 상태를 확인하여 인증된 사용자만 특정 경로에 접근할 수 있도록 하는 것입니다. 이를 위해 리액트 라우터를 사용하여 인증 로직을 추가할 수 있습니다.1. React Router 설치먼저, 리액트 라우터가 설치되어 있는지 확인합니다. 설치되어 있지 않다면 아래 명령어를 사용하여 설치합니다.npm install react-router-dom2. Auth 설정인증 상태 관리는 Context API, Redux, Zustand 무엇이 되었든 user 정보나 isLoggedIn 등의 상태를 받을 수 있으면 됩니다. 여기서는 Zustand 와 Tans..

Dompurify 라이브러리사용 목적Dompurify는 악성 코드 삽입 공격(XSS)을 방지하기 위해 HTML, SVG, MathML 등의 사용자 입력을 정화하는 라이브러리입니다. 이를 통해 웹 애플리케이션에서 안전하게 사용자 콘텐츠를 렌더링할 수 있습니다.사용 방법설치:npm install dompurify사용 예시:import DOMPurify from 'dompurify';const dirty = ' bold';const clean = DOMPurify.sanitize(dirty);document.getElementById('content').innerHTML = clean;CDN 사용:Html-React-Parser 라이브러리사용 목적html-react-parser는 HTML 문자열을 React ..