전체 글

팀플 주간이 끝났습니다!팀원분들의 노력 덕분에 무리없이 프로젝트를 완료 할 수 있었습니다. 아웃소싱 프로젝트(aka 외부 api 사용 프로젝트)에서 저희는 네이버 지도 api 를 활용하여운동 모임 사이트를 기획했고, 5일이라는 짧은 시간동안 요구사항을 대부분 구현했습니다.오늘은 그 중 제가 담당했던 네이버 지도 api 에 관한 사항을 정리하려고 합니다.네이버지도 with React - Step by Step 1네이버 지도 api script 동적 로드네이버 지도 api 를 이용하기 위해서는 https://openapi.map.naver.com/openapi/v3/maps.js 라는 스크립트를 로드해야 합니다index.html 에서 script 태그로 로드해도 되지만, 좀 더 동적인 방식을 고려하였습니다사..

함수형 업데이트Zustand의 set 함수에서 상태를 업데이트할 때, 두 가지 방식 모두 사용할 수 있습니다:단순한 상태 업데이트:이 방식은 상태를 직접적으로 업데이트합니다. set 함수에 객체를 전달하면 Zustand는 해당 객체를 기존 상태에 병합(merge)합니다.setUser: (user) => set({ user }),setLoggedIn: (isLoggedIn) => set({ isLoggedIn }),함수형 상태 업데이트:이 방식은 함수형 업데이트를 사용하여 상태를 업데이트합니다. 이 패턴은 주로 이전 상태에 의존하는 상태 업데이트가 필요할 때 사용됩니다. 예를 들어, 상태의 특정 부분을 변경할 때 이전 상태를 참조해야 할 경우에 유용합니다.setUser: (user) => set(() =>..

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...

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