라우터란? 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..

pages폴더를 만들어 그 내부에 각 페이지 별 폴더를 만들어서 관리한다. 컴포넌트와 다르게 각 페이지를 담당한다 라우터설치 App.jsx에서 브라우저라우터로 라우터를 사용한다. import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "./pages/home/Home"; import Create from "./pages/create/Create"; import Search from "./pages/search/Search"; import Recipe from "./pages/recipe/Recipe"; import "./App.css"; function App() { return ( ); } export defau..

Index.css @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800&display=swap'); /* base styles */ html, body, #root { height: 100%; } body { font-family: Raleway, sans-serif; margin: 0; font-size: 1.4em; background: #dfdfdf; color: #333; } h1,h2,h3,p { margin: 0; } input, textarea { color: #333; padding: 8px; font-size: 1em; border-radius: 4px; border..

import "./App.css"; import MovieList from "./components Navbar/MovieList/MovieList"; import Navbar from "./components Navbar/Navbar/Navbar"; import Fire from "./assets/fire.png"; import Star from "./assets/glowing-star.png"; import Party from "./assets/partying-face.png"; function App() { return ( ); } export default App; 각 섹션에 id 를 type으로 주어서 위의 네브바에 있는 을 선택하면 해당 스크롤 위치로 이동하게끔 만들거임 이렇게되면 스크롤이 좀..

테마 추가하기 svg 이미지 사용으 위해서 사용하는 플러그인 추가 https://www.npmjs.com/package/vite-plugin-svgr?activeTab=readme vite-plugin-svgr Vite plugin to transform SVGs into React components. Latest version: 4.2.0, last published: 4 days ago. Start using vite-plugin-svgr in your project by running `npm i vite-plugin-svgr`. There are 132 other projects in the npm registry using vite-plugin-svg www.npmjs.com 다크모드 svg파..

https://blog.naver.com/drv983/223202618615 로대쉬 설치및 select 선택에 따라 정렬하기 Lodash 라이브러리 Lodash(로대쉬)는 JavaScript의 인기있는 라이브러리 중 하나로 제이쿼리, 리액트와... blog.naver.com https://lodash.com/docs/4.17.15#orderBy Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chain..