개발 성장 일ブl

프로젝트 개요🎬이번 프로젝트는 포켓몬 도감 사이트로, dashboard에 포켓몬을 추가,삭제할 수 있다.기술 스택🧷프론트엔드 : React, react-router , redux / context API , styled-components , react-toastify 개발과정🎈아이디어 구상리액트를 기반으로 포켓몬 데이터를 추가,삭제하며, 페이지 이동이 가능한 사이트를 구상하게 되었다.구현반응형포켓몬 추가시 dashboard에 추가되고, 삭제시 dashboard에서 삭제됨이미 포켓몬이 dahsboard에 있거나 dashboard에 6개가 초과됐을시 경고문이 뜸포켓몬 카드 클릭시 detail페이지로 이동detail페이지에서 dashboard기준으로 추가됐다면 삭제버튼이, 없다면 추가버튼이 노출데이터는..

너무 바쁘게 코딩하다보늬... context한건 블로그작성을 패스해버렸다...먼저 redux로 작성후 @reduxjs/toolkit으로 리팩토링해봤다!정말정말 redux가 어려웠다...ㅠㅠㅠ 1. reduxstore에 createStore생성후 export한후에, 최상위 루트에서 Provider store연결!//store.jsimport { createStore } from "redux";const store = createStore(pokemonReducer);export default store;//main.jsximport { Provider } from "react-redux";import store from "./reducers/store.js";......context로 전역상태관리했던 것들..

중복값 필터링추가버튼을 누르면 selected라는 state에 담기는데, 이때 추가하려는 id와 selected에 담긴 id를 비교!const duplicateValue = selected.filter((prev) => prev.id === data.id); 스크롤시 최상단으로 올리는 top버튼 구현! 해당 버튼을 따로 지정한 스타일 컴포넌트를 쓰기위해 Link로 써야했는데,페이지가 새로고침되어서 e.preventDefault()로 막기!const handleScrollToTop = (e) => { e.preventDefault(); scrollTo(0, 0); }; react-toastifyalert 라이브러리!설치후 설정!import { toast, ToastContainer } from..

이번 플젝은 리액트 라우터 돔, 스타일컴포넌트를 사용한다!그래서인가.. 시작부터 에러가 계속... public에 넣어둔 이미지를 가져오려고 이렇게 적었는데👇에러가 떴다...👻👻👻 Vite와 같은 번들러에서는 process 객체가 기본적으로 정의되지 않기 때문에 발생하는 오류임ㅠㅠ💫그래서 코드를 이렇게 수정함!  react router 설치후 경로 설정!const router = createBrowserRouter([ { path: "/", errorElement: , children: [ { index: true, element: }, { path: "dex", element: }, { path: "pokemon/:pokemonId",..