코딩연습장

1. 프로젝트 생성yarn create vite 2. 라이브러리 설치yarn add tailwindcss postcss autoprefixer json-server axios @tanstack/react-query zustand immer @supabase/supabase-js react-router-dom 3. tailwind 세팅파일 생성 및 세팅npx tailwindcss init -p// src/index.css@tailwind base;@tailwind components;@tailwind utilities;//tailwind.config.js/** @type {import('tailwindcss').Config} */export default { content: ["./index.html..

캐시 데이터에 대한 Life Cycle상태설명fresh데이터를 새로 패칭할 필요가 없는 상태, staleTime이 지나지 않은 상태로, 캐시 데이터를 그대로 사용할 수 있다.stale데이터를 새로 패칭해야하는 상태, staleTime이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행된다.active현재 컴포넌트에서 사용중인 쿼리 상태, 컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 의미한다.inactive더이상 사용되지 않는 쿼리 상태, 컴포넌트가 언마운트되거나 쿼리가 더 이상 필요하지 않을 때를 말한다.deleted캐시에서 제거된 쿼리 상태, gcTime이 지나면 쿼리가 캐시에서 삭제되어 이 상태가 된다.fetching데이터를 서버에서 가져오고 있는 상태, 이 상태에서는 isFetching이 ..

import React, { useState, useEffect } from "react";import axios from "axios";const App = () => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); try { const response = await axios.get("http://localhost:4000/todos"); set..

axios instanceaxios에서 제공해주는 create메서드를 사용하면 공통으로 사용하는 axios config를 묶어서 설정해둘 수 있다. config엔 이전에 BASE_URL로 빼두었던 것과 같은 반복되어 동일하게 사용되는 값을 미리 지정해 여러 군데에서 사용할 수 있다.const BASE_URL = "http://localhost:4000";const onSubmitHandler = async (todo) => { await axios.post(BASE_URL + "/todos", todo).then(({ data }) => setTodos([...todos, data]));}; export const api = axios.create({ baseURL: "http://localh..