전체 글125 hard mode 완성 + soft mode 완성 오늘 한 내용 도장 on off 도장 여러개 on off soft mode 생성 클릭 날짜 표기 오늘 배운 내용 도장 한개 저장 let hardCliked = hardBox.isClicked; const [isClicked, setClicked] = useState(hardCliked); function toggleStamp() { setClicked(!isClicked); } useEffect(() => { updateHardBox({ ...hardBox, isClicked, }); }, [isClicked]); 도장 여러개 저장 const [isClicked, setClicked] = useState(hardCliked); function toggleStamp(index) { setClicked((s.. 2021. 12. 29. React에서 shape divider color-black으로 나올 때 사용법 https://www.shapedivider.app/ Shape Divider App Create fully responsive shape dividers for your next web project www.shapedivider.app shape divider를 이용해 포트폴리오 디자인을 살려보려고 했다. 사용법이 알려주는대로 그대로 복사하고 붙여넣기를 했는데,,, ...???? PostCSS를 사용해서 그럴까 일반 class로는 색상이 먹히지 않았다. className= {styles.어쩌구}로 바꿔줘도 전혀 먹질 않는데.. 포기하려는 찰나, 'DOWNLOAD SVG'가 보인다. 저걸 잘 활용하면 할 수 있지 않을까? 일단 다운로드를 받아본다. 파일을 열어보니 이거다!! 바로 작업하고 있던 reac.. 2021. 12. 24. hover시 안에 글자까지 hover 효과 안녕 전체를 감싸는 div 상자가 있고 그 안에 span 글자가 있다. 만약 마우스를 올려놓는 hover를 했을 때 상자와 글자의 색이 바뀌는 효과를 주고 싶다면..? 둘 다 hover 효과를 주면 되겠지 하고 .box{ background-color: white; } .box: hover{ background-color: green } .title{ color: green; } .title: hover{ color: white; } 이런식으로 코드를 작성한다면 (동영상을 첨부하려 하였으나 이상하게 올라감...) hover하면 코드에 충실하게 div만 색이 바뀐다. 글자에 hover 해야 글자도 색이 바뀌는 것을 볼 수 있다. 우리가 원하는 것은 이게 아니다. 둘 다 동시에 바뀌는 것. 이때는 코드를 다.. 2021. 12. 24. hard mode 개발 3 오늘 한 내용 컴포넌트 삭제 firebase real time database 쓰기, 읽기 오늘 배운 내용 컴포넌트 삭제 const deleteHardBox = (hardBox) => { setHardBoxes((hardBoxes) => { const updated = { ...hardBoxes }; delete updated[hardBox.id]; return updated; }); }; 캡쳐 소감 눈물 좔좔. 너무나 고난의 시간이었다. 이거 해결한다고 다른 것도 다 미루고 뛰어들었다. 밤 12시 넘어서 컴퓨터 끄는 것도 다반사. 하지만 해 결할 때 그 짜릿함은 말로 못한다. 조금 더 발전한 내가 된 것 같아 자랑스럽다. 어제보다 한 걸음만 더 나가자! 오류 일지 firebase 쓰기 이렇게 뒤에 de.. 2021. 12. 21. hard mode box 개발2 오늘 한 내용 box update box 배열 → object로 변경 표에 도장 채우기 표에 날짜 분배 click시 해당 도장 변경 오늘 배운 내용 box update const onSubmit = async (event) => { event.preventDefault(); const hardBox = { id: Date.now(), title: titleRef.current.value || "", color: color, }; formRef.current.reset(); onAdd(hardBox); }; const addHardBox = (hardBox) => { const updated = [...hardBoxes, hardBox]; setHardBoxes(updated); }; 배열 → object.. 2021. 12. 17. hard mode box 개발 오늘 한 내용 nav app.jsx로 이동 더미 상자 추가 add button modal 추가 더미 값 받아오기 오늘 배운 내용 router v6 사용법 nav 선택 시 스타일링 (굳이 activeStyle 사용 안 해도 됨) const activeTab = (location, path) => { if (location.pathname === path) { return { backgroundColor: "rgba(255, 255, 255, 0.5)", borderRadius: "7px", }; } }; 자식에서 부모에게 데이터 전달 **** const [color, setColor] = useState("클릭"); 자식 요소에게 전달 {color} **** onClick={() => { props.set.. 2021. 12. 11. 이전 1 ··· 12 13 14 15 16 17 18 ··· 21 다음
