https://cloud.google.com/firestore/docs/query-data/order-limit-data?hl=ko 데이터 순서 지정 및 제한 | Firestore | Google Cloud 의견 보내기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 데이터 순서 지정 및 제한 Firestore는 컬렉션에서 검색할 문서를 지정할 수 있는 강력한 쿼리 기 cloud.google.com useFireStore.js // doc 삭제 const deleteDocument = async (id) => { dispatch({ type: "IS_PENDING" }); try { await ref.doc(id).delete(); dispatchIfNotCancelled(..

TransactionForm.jsx생성 import React from "react"; const TransactionForm = () => { const [name, setName] = useState(""); const [amount, setAmount] = useState(""); const handleSubmit = (e) => { e.preventDefault(); console.log({ name, amount, }); }; return ( 거래 추가 거래명: setName(e.target.value)} value={name} /> 가격(원): setAmount(e.target.value)} value={amount} /> 추가 ); }; export default TransactionForm..

네비게이션 가드란? ​ 네비게이션 가드(navigation guard)란 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법을 말합니다. 예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다 https://blog.naver.com/drv983/223182320993 네비게이션션 가드 : 인증된 유저와 안된유저에 따라서 페이지 요청시 막기 네비게이션 가드란? 네비게이션 가드(navigation guard)란 뷰 라우터로 특정 URL에 접근할 때 해당 UR... blog.naver.com App.jsx import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; impor..

작업이 끝나기전에 화면이동이나 종료를 하면 오류가 발생할 수 있으므로 현재 진행중인 작업을 취소하는 클린업 함수를 추가할것 useLogout.js에 취소 여부를 담는 state를 생성한다. const [isCancelled, setIsCancelled] = useState(false); useEffect(() => { setIsCancelled(false); // 로그아웃 작업중 중간에 사라진다면 // useEffect의 return이 unmount될때의 작업(클린업)이 된다. return () => setIsCancelled(true); }, []); return { logout, error, isPending }; }; 그리고 위의 try catch도 바꿔준다. const logout = async ..

import { useState } from "react"; import { useAuthContext } from "./useAuthContext"; import { fireauth } from "../firebase/config"; export const useLogout = () => { const [error, setError] = useState(); const [isPending, setIsPending] = useState(false); const { dispatch } = useAuthContext(); const logout = async () => { setError(null); setIsPending(true); try { //파이어베이스 로그아웃 await fireauth.signO..

App.jsx, App.css, index.css 정리 index.css @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); /* base styles */ body { font-family: Poppins, sans-serif; margin: 0; font-size: 1.1em; } ul, li, p, h1, h2, h3, h4 { margin: 0; padding: 0; } ul { list-style-type: none; } .btn { background: none; border: 2px solid #1f9751; padding: 6px ..

알라딘API를 사용해서 책 검색 기능을 추가하려고 한다. 나중에 기억할 수 있도록 과정을 기록하기 위해 포스팅 작성함 요청해야할 쿼리스트링은 아래와 같음 https://docs.google.com/document/d/1mX-WxuoGs8Hy-QalhHcvuV17n50uGI2Sg_GHofgiePE/edit#heading=h.npqn2iowpse8 알라딘 Open API 매뉴얼 1. 요청 (Request) 1) 상품 검색 API 2) 상품 리스트 API 3) 상품 조회 API 4) 중고상품 보유 매장 검색 API 2. 응답 (Response) 1) 상품 검색/상품 리스트/상품 조회 API 2) 상품 조회 API : 부가정보 3) 중고상품 보 docs.google.com 요청 URL샘플 : http://www..

:login 은 변수임 여기에 깃허브 아이디가 들어감 GithubContext.jsx user 객체를 추가 및 프로바이더 값에 추가 테스트한것 처럼 아래의 //한명 유저 찾기 const getUsers = async (login) => { setLoading(); //로딩상태 true const response = await fetch(`${GITHUB_URL}/users?${login}`, { headers: { Authorization: `token ${GITHUB_TOKEN}`, }, }); //만약 찾지 못했을 경우(404) -> notfound 페이지로 이동 //결과가 있을 경우 dispatch로 user를 업데이트한다 if (response.status === 404) { window.load..

현재 내용을 입력해주세요 메세지가 출력되는 해당 Alert을 컨텍스트로 만들어보겠음. AlertReducer.js function AlertReducer(state, action) { switch (action.type) { case "SET_ALERT": return action.payload; case "REMOVE_ALERT": return null; default: return state; } } export default AlertReducer; AlertContext.jsx import { createContext, useReducer } from "react"; import AlertReducer from "./AlertReducer"; const AlertContext = createCon..

const githubReducer = (state, action) => { switch (action.type) { case "GET_USERS": return { ...state, users: action.payload, loading: false, }; default: return state; } }; export default githubReducer; GithubContext.jsx의 useState대신에 reducer를 사용할거임 리듀서는 한꺼번에 여러개의 state를 처리 기존 state는 주석처리하고 아래에 useReducer을 사용한다. setUsers와 setLoading도 주석처리하고 dispatch로 변경한다. state에 모든 데이터가 있으므로 state.users, state.l..