코딩연습장

캐시 데이터에 대한 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..

DELETE 요청delete 명령은 아래와 같이 하면 된다.const BASE_URL = "http://localhost:4000";const onDeleteHandler = async (id) => { await axios .delete(BASE_URL + `/todos/${id}`) .then(({ data }) => setTodos(todos.filter((todo) => todo.id !== data.id)));};좀 더 json-server에서 제공해주는 Routes와 비교하기 쉽게 base url을 분리해놓았다. {todos?.map((el) => { return ( {el.title} onDeleteH..

json-server 세팅1. 라이브러리 설치yarn add json-server 2. root 위치에 db.json 파일 생성 3. db.json에 데이터 테이블 생성{ "todos": [ { "id": 1, "title": "json-server", "content": "json-server배우기" } ]} 4. json-server 구동yarn json-server db.json --port 4000로컬 4000번 포트로 json server 구동 axios 세팅 1. axios 설치yarn add axios 2. axios 사용import axios from "axios";import React, { u..

Startify여러분들은 계절마다 즐겨 듣는 노래가 있으신가요?'Startify'는 계절마다 어울리는 노래를 공유하고, 그 음악을 통해 사람들과 추억을 나눌 수 있는 공간입니다. 🔥배포 링크Startify - 내일배움캠프 6기 14조 📦폴더 구조폴더구조``` 📦react-startify┣ 📂public┃ ┗ 📜favicon.png┣ 📂src┃ ┣ 📂assets┃ ┃ ┣ 📜2024-09-03_12.32.21.png┃ ┃ ┣ 📜blankProfile.png┃ ┃ ┣ 📜delete.png┃ ┃ ┣ 📜dislike.png┃ ┃ ┣ 📜dislike01.png┃ ┃ ┣ 📜edit.png┃ ┃ ┣ 📜fall.png┃ ┃ ┣ 📜like.png┃ ┃ ┣ 📜like01.png┃ ┃ ┣ 📜li..

const PostItemList = ({ songs, title, index }) => { const [isListOpen, setIsListOpen] = useState(false); const a = matchMedia("screen and (min-width: 1660px)"); const b = matchMedia("screen and (min-width: 1200px) and (max-width: 1659px)"); const c = matchMedia("screen and (min-width: 840px) and (max-width: 1199px)"); const d = matchMedia("screen and (max-width: 839px)"); // co..

원래 메인페이지와 검색페이지에서 보여지는 아이템 하나마다 좋아요를 추가, 취소할수 있는 기능을 넣고자 하였다.하지만 모든 데이터가 한 객체로 관리되고 있었다.const [total, setTotal] = useState({'전체':[], '봄':[], ...생략})이런식으로 한 객체에 키값을 달리해 관리하고있었는데 const toggleLikedSearched = async (isLiked, postId, e) => { e.stopPropagation(); if (!userId) { let goToSignIn = confirm("로그인 후 사용가능합니다. 로그인페이지로 이동하시겠습니까?"); goToSignIn ? navigate("/..