작업이 끝나기전에 화면이동이나 종료를 하면 오류가 발생할 수 있으므로 현재 진행중인 작업을 취소하는 클린업 함수를 추가할것 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..

Postman으로 깃허브 api 테스트한다. 내 ID로 검색해봤다. 검색어로도 유저 검색이 가능하다. Body-> headers 깃허브 토큰 없이 api를 사용하면 10번이 한계이고 9번 남았다는 뜻 그래서 깃허브에서 토큰 발급을 해볼것 토클 발급 후 포스트맨으로 돌아가서 토큰 번호를 입력한 후 다시 api 데이터를 받아봤다. 리밋이 늘어난게 보임 10->30 그리고 토큰을 .env 파일에 넣어서 보관한다. url도 추가 import { useEffect } from "react"; function UserResults() { useEffect(() => { fetchUsers(); }, []); //앱 시작시 실행됨 const fetchUsers = async () => { //onsole.log(`$..

https://tailwindcss.com/docs/guides/vite Install Tailwind CSS with Vite - Tailwind CSS Setting up Tailwind CSS in a Vite project. tailwindcss.com App.css와 App.jsx 초기화 테일윈드 적용됐는지 테스트해보기 https://daisyui.com/ daisyUI — Tailwind CSS Components ( version 4 update is here ) Best Tailwind Components Library - Free UI components for Tailwind CSS daisyui.com https://daisyui.com/docs/install/ Install dais..

App.css 삭제하고 App.jsx 안의 내용 비우기 https://www.figma.com/file/XtVr3JRCGWyZESYxd9EhZK/Contentful?node-id=2%3A8&mode=dev Figma Created with Figma www.figma.com 이와 같이 만들 예정 Hero.jsx와 Projects.jsx 만듬 React Projects Single-origin coffee deep v sus small batch. Gorpcore vape lumbersexual normcore four dollar toast drinking vinegar. Twee 90's taiyaki small batch bitters, bespoke jianbing leggings marxism k..