행복한 딸기 🍓

프로젝트 명 : TailTales 유기동물 보호 현황 open api를 사용해 지역의 유기 동물을 공고일, 품종에 따라 조회하고 지도 상에서 가까운 보호소를 찾아 유기 동물 입양을 돕는 서비스입니다. 유기동물들의 새로운 삶과 행복한 이야기를 나타냅니다. 강아지와 고양이의 꼬리는 그들의 기분을 나타내는 중요한 신호 중 하나이며, 이 웹사이트는 유기견들이 새로운 가정에서 행복한 이야기를 쓸 수 있도록 도와주는 곳으로서의 역할을 하는 사이트입니다. 사용하는 기술 JavaScript v Redux toolkit v React query Figma glitch v json-server v supabase vs firebase react-router-dom styled-components 경기도 데이터 드림 유기동..

로그인을 하고 게시글을 작성하면 그 게시글에 닉네임을 보이게 하고 싶었다. 문제 게시글 작성할 때 들어가는 id 값을 nanoid에서 useEmail로 했다. 그렇게해서 상세페이지에 닉네임을 뜨게 했다. 근데 문제는 해당 이메일이 게시글 작성을 한 번 밖에 못한다는 것이다. 알아보니 json-server는 하나의 아이디로만 쓸 수 있고 여러개를 작성하려면 바뀌는 아이디를 사용해야한다고 한다. 그래서 id값을 다시 nanoid로 바꿔서 다시 생각을 했다. 해결 이메일이 안되면 닉네임으로 가져와야겠다고 생각했다. nanoid를 그냥 두고 author라는 값을 추가해줬다. 새로운 게시글이 추가되는 로직이다. const newData = { id: nanoid(), title: title, choice1: ch..

먼저 회원가입 UI를 만들어줬다. 저장할 4가지 정보를 하나의 useState로 만들었다. // 회원가입 정보 const [signupDatas, setSignupDatas] = useState({ email: "", nickname: "", password: "", passwordConfirm: "", }); // email, nickname, password, passwordConfirm const handleChange = (e) => { e.preventDefault(); setSignupDatas((signupData) => { return { ...signupData, [e.target.name]: e.target.value, }; }); }; firebase 연동 env 파일 만들기 giti..

Edit.js dispatch로 하나하나 불러오지 않아도 된다. ➡️ 스프레드 문법 사용하기 내 코드 : // 수정 버튼 핸들러 const upDatedTodoHandler = (e) => { e.preventDefault(); dispatch( editTodo({ id: todo.id, title, content, // 작성자도 보여주기 author: todo.author, }) ); navigate("/"); }; 수정 코드 : 스프레드 문법으로 todo의 정보를 가져와서 보여줄 수 있다. // 수정 버튼 핸들러 const upDatedTodoHandler = (e) => { e.preventDefault(); // 스프레드 문법 const upDatedTodo = { ...todo, title, c..

Redux Toolkit 패키지 설치 YARN yarn add react-redux @reduxjs/toolkit NPM npm install react-redux @reduxjs/toolkit configStore 파일을 따로 만들지 않고 index.js 파일에 바로 중앙데이터저장소를 만든다. 필요한 기능 ➡️ reducers 안에 만들어준다. (추가, 삭제, 수정) import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import { BrowserRouter } from "react-router-dom"; import { Provider } from "react-redux"; import ..

링크로 페이지 이동을 한다. 태그는 새로고침이 되어 내용이 초기화가 되지만 Link는 새로고침이 되지 않는다. 사용법 import { Link } from "react-router-dom"; 페이지로 이동 예시 // Works.jsx import React from "react"; ⭐import { Link } from "react-router-dom"; export default function Works() { return ( Works ⭐contact 페이지로 이동 ); }

현재 어디 경로에 있는지 알려준다. 사용법 import { useLocation } from "react-router-dom"; const location = useLocation(); 예시 // Works.jsx import React from "react"; import { ⭐useLocation, useNavigate } from "react-router-dom"; export default function Works() { const navigate = useNavigate(); ⭐const location = useLocation(); ⭐console.log("location", location); return ( Works navigate("/")}>Home으로 이동 ); }

패키지 설치 (yarn) yarn add react-router-dom 페이지 생성 페이지 넘어가는 경로? 만들기 // Router.js import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../pages/Home"; import About from "../pages/About"; import Contact from "../pages/Contact"; import Works from "../pages/Works"; const Router = () => { return ( ); }; export default Router; App.jsx에서 Router를 가져온다. // App.jsx import "./App...

value 함수가 return하는 값 값 자체 heavy한 것을 만들 때 사용. 사용 // 기존 const value = 반환할_함수(); // 사용 const value = useMemo(()=>{ return 반환할_함수() },[dependencyArray]); 예시 const heavyWork = () => { for (let i=0; i { heavyWork() },[]) ⚠️ 주의 : 너무 많이 사용하면 별도의 메모리 확보를 너무나 많이 하게 되기 때문에 오히려 성능이 악화될 수 있다.!! 필요할 때만 쓰자!!

❓ 인자로 들어오는 함수 자체를 기억(메모이제이션)한다!! (React.memo : 컴포넌트를 메모이제이션) 버튼을 눌러 숫자를 늘리거나 줄이고 초기화 누르면 0으로 다시 초기화된다. 전 편을 보면 React.memo로 메모이제션해서 +, - 버튼을 눌러도 리렌더링이 되지 않았는데 여기에서는 React.memo를 해도 리렌더링이 된다. ➡️ 함수형 컴포넌트를 사용했기 때문이다. App.jsx에 state를 사용하고 있기 때문에 거기에 초기화 함수를 작성하고, Box1.jsx에 props를 내려 초기화 기능을 가져왔다. //App.jsx const [count, setCounst] = useState(0); . . // count를 초기화해주는 함수 const initCount = () => { setCo..