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(..

현재 상태에서 배포를 하더라도 서버를 실행중이지 않을 경우에는 올려둔 레시피가 확인이 불가능하다.(백엔드가 없음) 그래서 구글에서 제공하는 클라우드 서비스 데이터 베이스를 사용해서 배포할것 https://console.firebase.google.com/ 로그인 - Google 계정 이메일 또는 휴대전화 accounts.google.com 회원가입이 필요하다. 애널리틱스 가져오지 않기 Firestore은 기존에 사용하던 db(mySql, oracle)와는 (관계형 데이터베이스) 다르게 비관계형 데이터베이스이다. 문서 형식의 데이터베이스로 되어있다. 문서 ID는 유니크해야함 -> 자동으로 만듬 나머지 DB들도 db.json으로 추가한다. 입력한 DB를 프로젝트에 연결한다. 라이브러리 설치하는데 이번 앤에서..

구글 폰트 -> 아이콘에서 원하는 아이콘 svg파일로 다운받아서 assets폴더에 넣음 state 초기값을 변경한다.( 모드: dark) 테마 리듀서에 case추가한다. action이 업데이트 할 명령어랑 내용임. payload : 업데이트 할 값 프로바이더에 추가해서 전역으로 사용이 가능하도록 한다. import { createContext, useReducer } from "react"; export const ThemeContext = createContext(); const themeReducer = (state, action) => { switch (action.type) { case "CHANGE_COLOR": return { ...state, color: action.payload }; ca..