프론트엔드로 가는 길/portfolio 제작 여정기 👩🏻💻16 04 BookBucket - 내가 읽을 책을 localStorage에 저장하자!📚[7.20] 책을 localStorage저장하는 과정에서 오류가 발생했다. 오류 : 새로고침하면 최근에 작성한 book은 없어진다. let [addInputValue, setAddInputValue] = useState(""); let [listBook, setListBook] = useState([]); const saveLocalStorage = () => { window.localStorage.setItem("bookList", JSON.stringify(listBook)); }; increaseId : listBook.id lncrease validateInput : 정규식테스트 원인 : React의 상태 업데이트가 비동기적으로 처리 listBook 상태가 업데이트되는 동안saveLocalStorage(lis.. 2023. 7. 20. 03 BookBucket - 내가 읽지 않을 책을 삭제하자!📚[2.21] 3. 읽지 않을 책 삭제하기 1) 삭제 버튼 눌렸을 때 (1) 플러스 버튼 색 변경되고, 체크 버튼 생성 ⓵ minusBtn state 생성 let [minusBtn, setMinusBtn] = useState(false); ⓶ minusBtn 클릭시 상태값 true로 변경 const deleteBefore = () => { setMinusBtn(!minusBtn); }; ⓷ minusBtn이 true일 때 circlePlus class에 on을 부착하고, faSquareCheck -> faSquareMinus 아이콘 변경 // 왼쪽 +버튼 // 오른쪽 -버튼 (2) 포스트 잇에 드롭쉐도우 효과 생김 ⓵ minusBtn 상태값 true일 때 img2 class에 on 붙이기 [main.css] .im.. 2023. 2. 22. 02 BookBucket - 내가 추가할 책을 참고해보자!📚[2.20] 2. Api로 베스트셀러 보여주기 1) 📕 아이콘 눌렀을 때 (1) 베스트 셀러 페이지로 이동 ⓵ router 설치 npm install react-router-dom@6 ⓶ BrowserRouter 컴포넌트를 최상위 태그에 감싸주자. [index.js] import React from "react"; import ReactDOM from "react-dom/client"; //import import { BrowserRouter } from "react-router-dom"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( {/*이렇게 감싸라*/} ); import.. 2023. 2. 21. 01 BookBucket - 내가 읽고 싶은 책을 추가해보자!📚[2.14~2.15] 1. Input 작성으로 책 추가 1) ➕ 플러스 버튼 눌렀을 때 (1) 하단에 input 창 띄우고 아이콘 ☑️ 버튼으로 변경 input 창 띄우기 ⓵ true/false값을 저장하는 state 생성 let [plusBtn, setPlusBtn] = useState(false); 기본 값은 false ⓶ ➕ btn을 눌렸을 때 plusBtn 상태값을 true로 바꿔주는 openInput 함수 생성 const openInput = () => { setPlusBtn(true); }; ⓷ plusBtn 상태 값이 true 일때, class registration옆에 on을 붙인다. ⓸ css를 꾸며보자. // false 일때 .registration{ display: none; } //true 일때 .reg.. 2023. 2. 19. 이전 1 2 3 4 다음
