생각하다 생각하다

TanStack Query(React Query) 사용하기 편의상 ReactQuery라고 부를텐데 이 reactQuery를 이용해서 서버 fetch를 더 간단하고 편리하게 할 수 있다. https://tanstack.com/query/latest TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com TanStack Query 설치하기 $ npm i @tanstack/react-query src/index..

데이터 fetch하기 django에서는 시스템을 보호하고 있기 때문에 아무데서나 fetch를 해올 수 없기 때문에 이를 설정하기 위해 cors-headers를 설치할 필요가 있다. 데이터를 fetch하기 위해서 먼저 django-cors-headers 설치하기 그런데 django-cors-headers란? cors-headers는 특정 도메인에서 '나의 서버에서 브라우저로 fetch할 수 있는 사람'을 지정할 수 있게 해준다. 1. 백엔드에 cors-headers를 설치해준다. python -m pip install django-cors-headers poetry 환경일 경우 poetry add django-cors-headers 나는 poetry 환경을 사용하고 있기 때문에 아래 코드를 입력했다. 2...

React Router v6 이전의 react 라우터 작성 방식 6.4의 새로워진 라우터 작성 방식 import { createBrowserRouter } from "react-router-dom"; const router = createBrowserRouter([]) createBrowserRouter라는 함수를 이용해서 이 안에 라우터 배열을 두고 사용한다. path = "url" element = 해당 링크에서 보여줄 컴포넌트 import { createBrowserRouter } from "react-router-dom"; import Root from "./components/Root"; const router = createBrowserRouter([ { path: "/", element: }..

interface type을 이용하여 타입스크립트를 적용한 리액트에서 props 전달하기 //Javascript function App({name, age}) { const text = `나는 ${name}이고, ${age}살 이다.` return {text} } //혹은 function App(props) { const text = `나는 ${props.name}이고, ${props.age}살 이다.` return {text} } //Typescript interface propsType { name:string; age:number; } function App(props:propsType) { const text = `나는 ${props.name}이고, ${props.age}살 이다.` return ..

src폴더 내부에 components 폴더와 routes 폴더를 만든다. components/Router.js import React, {useState} from "react"; import { HashRouter as Router, Route, Switch } from "react-router-dom"; import Auth from "../routes/Auth"; import Home from "../routes/Home"; const AppRouter = () => { // 로그인 상태관리 const [isLoggedIn, setIsLoggedIn] = useState(false); return( // 로그인 된 상태일 경우 { isLoggedIn ? // home 을 보여주고, // 로그인 상태..

https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com firebase 홈페이지에서 프로젝트 생성 src/firebase.js 생성 src/firebase.js import firebase from "firebase/compat/app"; import "firebase/compat/auth"; import "firebase/compat/firestore"; import "firebase/compat/storage"; const firebaseConfig = { apiKey: "AIzaSyA5mG6njbjd4flGqr8TMo4Nn7tu-Rc..

npm i gh-pages 결과물을 github pages에 업로드할 수 있게 해주는 패키지 깃 레포지토리 생성 후 push까지 완료한 후에 아래 작업들을 수행한다. package.json }, "homepage": "https://[깃아이디].github.io/[레포지토리명]" } git remote -v 레포지토리명 확인 package.json "deploy": "gh-pages -d build", "predeploy": "npm run build" "scripts": { } 안에 위 코드 추가해주기 npm run deploy 배포하기

import { useState, useEffect } from "react"; function App() { const [counter, setCounter] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setCounter((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value); // console.log("i run all time."); useEffect(() => { console.log("i run only once."); }, []); useEffect(()=>{ console.log("i run when '..