현재 내용을 입력해주세요 메세지가 출력되는 해당 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..

이번에는 기존에 만들어 놓은 이미지 갤러리를 REACT로 변환할 것임 새로운 프로젝트 생성 import Gallery from "./Gallery"; import SearchForm from "./SearchForm"; import ThemeToggle from "./ThemeToggle"; function App() { return ( ); } export default App; 기존에 사용하던 css index.css에 붙여넣기 /* 폰트는 항상 제일 위에 Import Google font - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); /* 초기화 작업 *..

참고) ctrl + u 하면 소스 나옴 기존에 사용하던 HTML,CSS,JS 파일을 REACT로 변환해 보도록 하겠다. vite로 새로운 폴더를 만들어준다. html파일의 images 폴더를 정적 파일의 경우 (변하지 않는) public 폴더에 넣어준다. html파일의 폰트오썸와 타이틀도 복사해서 넣어준다. 그리고 images 폴더 내에 있는 페비콘을 링크해서 페비콘도 변경한다. 변경됨을 확인 가능하다. 이제 CSS를 넣어본다. Index.css 기존의 css를 삭제하고 style.css를 복사해서 붙여넣음 App.jsx도 필요없는 부분은 다 삭제하고 정리한다. 그리고 html파일에서 nav 부터 footer까지 복사해서 App.jsx에 붙여넣기한다. 그리고 class => className으로 변경한다..

현재 config.js에 api키가 그대로 저장되어있어서 .env파일을 따로 만들어서 관리한다. config.js 넷플리파이에서 배포를 하는데 위의 키는 꼭 넣어줘야 작동한다.

https://fonts.google.com/icons?subset=korean&noto.script=Kore&icon.query=delete Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com RecipeList.jsx import React, { useContext } from "react"; import "./RecipeList.css"; import { Link } from "react-router-dom"; imp..

현재는 홈화면만 파이어 베이스로 DB연결이 되어있어서 요리하기를 클릭해서 상세보기를 눌러도 출력되지 않는다. Recipe.jsx도 Home.jsx와 동일하게 파이어베이스를 연결한다. import { useParams } from "react-router-dom"; import "./Recipe.css"; import { useContext, useEffect, useState } from "react"; import { ThemeContext } from "../../context/ThemeContext"; import { firedb } from "../../firebase/config"; export default function Recipe() { const { mode } = useContext(..