dukDukz

staleTime 가져온 데이터가 오래되었다고 판단하는 기준 시간 [ms] 기본 값은 0 이다. staleTime : 0 - 데이터를 가져온 즉시 오래된 데이터로 인식함. - 캐시된 데이터를 우선 사용하고 API 를 재 호출하여 새 응답으로 데이터를 교체 stateTime : 3000 최초 요청 이후 데이터를 다시 요청한다고 가정함. - 3초 이전에 데이터 요청하면, 최신 데이터라고 판단. 이전에 캐시된 데이터를 사용 - 3초 이후에 데이터 요청하면 캐시된 데이터를 우선 사용하고 API 를 재 호출하여 새 응답으로 데이터를 교체 쿼리 무효화 (queryClient.invalidateQueries) get - list post - add something and update list by queryClie..

1. Vite 로 React 프로젝트 생성 https://ko.vitejs.dev/guide/ yarn create vite yarn 프로젝트 생성시 React + typescript로 설정 2. Eslint 의존성 설치 yarn add -D eslint vite-plugin-eslint eslint-config-react-app vite.config.ts import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import eslint from 'vite-plugin-eslint'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), ..

vite 설치 yarn create vite 설치 가이드대로 설치 eslint 설치 yarn add -D eslint vite-plugin-eslint eslint-config-react-app 설치하고 vscode relaod 필요함 vite.config.js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import eslint from 'vite-plugin-eslint'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), eslint()], }); .eslintrc.cjs rules 부분 module.exports..

버튼 클릭시 전 후 값으로 상태값을 변경시키는 부분 -> 컴포넌트로 만들었다. export default function MoveCategoryButton({ moveType, category, setCategory, }) { // 카테고리 전체 const categories = ['apple', 'banana', 'grape']; // 버튼 클릭시 이벤트 발생 const changeCategory = (type) => { // 현재 카테고리의 index 값을 찾는다 const currentVaule = categories.indexOf(category); // 배열상에서 인덱스 상으로 전 후에 있는 값을 찾는다. const nextVaule = categories[currentVaule + 1]; co..

error: cannot lock ref 'refs/remotes/origin/*****': 'refs/remotes/origin/*****' exists; cannot create 'refs/remotes/origin/*****/+++++' remote에서 받아올 브랜치와 내 로컬에 있는게 이름이 겹쳐서 충돌이 난 것. remote에서 이미 삭제된 브랜치이지만 내 로컬에 남아있어서 git pull git fetch git remote update ... 명령이 되지 않았다. 모든 원격 저장소의 브랜치 정보를 정리하는 명령어 git fetch --all --prune 원격과 로컬의 싱크를 맞춰서 원격에서 이미 삭제된 브랜치를 정리하자. (소스트리로도 가능함) 참고 더보기 https://jjkim01.ti..

쿠키 html5 부터는 쿠키의 단점을 보완하기 위해 로컬 스토리지를 사용 스토리지 데이터가 소멸되는 시점의 차이 로컬스토리지 -> 브라우저 창을 닫아도 있음. 지우기 전까지. -> key-value 형태로 저장하고 value 에는 객체, string 이 들어갈 수 있음 세션스토리지 -> 탭을 새로 생성할 때마다 세션 스토리지 값이 초기화 되므로 탭을 닫으면 세션 스토리지의 값이 없어진다. -> key-value 형태로 저장하고 value 에는 string 만 들어갈 수 있다. 브라우저간 쿠키 or 로컬스토리지 공유 - 기본적으로 브라우저 간의 쿠키는 공유되지 않음. - 서브 도메인끼리는 공유 가능함. 다만 로컬호스트에서 테스트가 어려움 브라우저간 세션 스토리지 공유 - 브라우저 탭마다 다른 세션을 갖고 ..

const elements = ['Apple', 'Banana', 'Tomato']; console.log(elements.join()); // Expected output: "Apple,Banana,Tomato" console.log(elements.join('')); // Expected output: "AppleBananaTomato" console.log(elements.join('-')); // Expected output: "Apple-Banana-Tomato" join 매서드 배열의 모든 요소를 연결해서 하나의 문자열로 만든다. 매개변수 arr.join([separator]) seperator (optional) 구분자가 들어간다. optional 이며 생략하는 경우 쉼표(,)로 연결 후 구..

createBrowserRouter -> v6.4 부터 사용할 수 있다. https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis Picking a Router v6.10.0 Picking a Router While your app will only use a single router, several routers are available depending on the environment your app is running in. This document should help you figure out which one to use. Using v6.4 Data APIs In v6.4, new routers were int..