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

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

@parcel/transformer-js: Browser scripts cannot have imports or exports. parcel로 웹서버를 띄우려고 하는데 이런 오류가 났다.. 바로바로 index.html type='module'을 안써줘서 그렇다... index.html 전체 코드

구현 목표 1) As is App.js 에서 페이지 이동시마다 loginCheck 함수를 호출시킴 2) To be "페이지를 찾을 수 없음" - NoMatch.jsx 에서 loginCheck 함수를 제외시키고 싶음. useRef를 통해 해결 App.jsx const noMatch = useRef(); useEffect(() => { if (!noMatch.current) { loginCheck(token); } else { return; } }, [token, loginCheck]); noMatch 값을 props로 NoMatch 컴포넌트에 넘겨준다. NoMatch.jsx import React from 'react'; import { useNavigate } from 'react-router-dom';..

import React from "react"; import { Routes, Route, Link, Navigate } from "react-router-dom"; import Home from "./pages/Home"; import Login from "./pages/Login"; function NoMatch() { return ( 페이지를 찾을 수 없습니다. 홈으로 ); } function Router() { return ( ); } export default Router; 1. '/' 로 들어왔을때 '/login' 으로 자동이동함. 2. 없는 링크로 접근하는 경우 NoMatch 를 리턴함.