본문 바로가기

분류 전체보기402

로그인 하지 않은 상태에서는 헤더가 렌더링 되지 않게 조건부 렌더링 설정하기 헤더를 라우팅하는 컴포넌트에서 아래와 같이 설정해주면 된다.  useLocation 훅 import 하기import { useLocation } from "react-router-dom"; 로그인 되어 있지 않으면 로그인 페이지로 이동시키기const location = useLocation();const isLoginPage = location.pathname === "/login";...return ( {!isLoginPage && } ); Programing/React 2024. 6. 14.
마우스 호버 시 살짝 커지는 CSS /* 필요한 CSS를 작성하고 아래 속성을 이어 붙인다 */transition: transform 0.3s ease-in-out;&:hover { transform: scale(1.2);} Programing/CSS 2024. 6. 14.
2024-06-14 프로젝트 관리 중인 데이터를 json-server로 RESTful하게 리팩토링 하기 상황현재 본인의 프로젝트는 App 컴포넌트에서 expeness라는 상태를 만들고 여기에 json 형태의 데이터를 입력하여 이를 컴포넌트에 props를 내려 디테일 페이지에서 렌더링 하고 있다.function App() { const [expenses, setExpenses] = useState([ { id: "59454ecd-0f61-422a-89d9-3213915343f2", month: 1, date: "2024-01-05", item: "식비", amount: 100000, description: "세광양대창", }, { id: "4f60bace-03dc-458d-b0dc-d89ada034b29", month:.. Programing/TIL 2024. 6. 14.
TanStack Query 기본 사용법 TanStack Query란?HTTP 요청을 할 때 서버에서 응답 받은 내용을 가공해서 별도의 상태를 만들 필요 없이 곧바로 사용이 가능하게 해주는 라이브러리이다.기본 코드 스니펫import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider,} from '@tanstack/react-query'import { getTodos, postTodo } from '../my-api'// Create a clientconst queryClient = new QueryClient()function App() { return ( // Provide the client to your App )}.. Programing/React 2024. 6. 14.
2024-06-13 axios, json-server, TanStack Query - RESTful axiosaxios의 장점1. 요청/응답 시 json 데이터 형식을 기본으로 함 (vs fetch API)axios는 요청을 보낼 때 자동으로 JSON 형식을 사용함. fetch API에서는 이 작업을 하려면 수동으로 해주어야 함.예를 들어 아래는 같은 작업임.// axiosaxios.post('/api/data', { key: 'value' }).then(response => { console.log(response.data);})// fetch APIfetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })}).then(res.. Programing/TIL 2024. 6. 13.

티스토리툴바