현재 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..

라우터란? https://blog.naver.com/c-maker/223242027735 [React] 라우터 (Router) 라우팅 (Routing) : 사용자가 요청한 url에 따라 그에 적합한 페이지를 보여주는 작업 ex) 사용자 '... blog.naver.com 라우팅(Routing)이란? 사용자가 요청한 URL에 따라 그에 적합한 페이지를 보여주는 작업임 이전에 만든 movieapp으로 만든다. movieapp2 폴더를 만든 후 movieapp에서 아래의 파일들만 복사해서 넣는다 모듈을 설치한다. 터미널에서 라우터 설치한다. 그리고 index.jsx (vite 사용 시 index.jsx가 main.jsx로 사용) 의 App을 감싸는 태그를 BrowserRouter로 감싼다. Routes와 Ro..

import { createContext } from "react"; export const ThemeContext = createContext(); //children은 하위 컴포넌트를 의미한다. //컨텍스트.프로바이더에서 value값을 전역으로 제공한다. export function ThemeProvider({ children }) { return ( {children} ); } 테스트로 Navbar.jsx에서 네브바 컬러를 바꿔봤다. 리듀서 함수를 추가한다. import { createContext, useReducer } from "react"; export const ThemeContext = createContext(); const themeReducer = (state, action) => ..

import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import "./searchbar.css"; export default function SearchBar() { const [term, setTerm] = useState(""); //검색어 const navigate = useNavigate(); const handleSubmit = (e) => { e.preventDefault(); navigate(`/search?q=${term}`); //q= 검색어로 요청한다. }; return ( 검색: setTerm(e.target.value)} /> ); } .searchbar form { displ..

Create.jsx import { useState } from "react"; import "./Create.css"; export default function Create() { const [title, setTitle] = useState(""); const [method, setMethod] = useState(""); const [cookingTime, setCookingTime] = useState(""); const handleSubmit = (e) => { e.preventDefault(); console.log(title, method, cookingTime); }; return ( 새 레시피를 추가하세요 요리 제목: setTitle(e.target.value)} type="text" ..

hooks 폴더를 생성하여 useFetch 파일을 넣는다. url 주소로 fetch해주고 데이터를 받아줌 Home.jsx import { useFetch } from "../../hooks/useFetch"; import "./Home.css"; export default function Home() { const { data, isPending, error } = useFetch("http://localhost:3030/recipes"); //서버 주소 return ( {error && {error}} {isPending && 로딩중} {data && data.map((recipe) => {recipe.title})} ); } Home.css .home { max-width: 1200px; margin..