Projects19 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. navbar 디자인 && logout 오늘 한 내용 navbar 디자인 카테고리 별 페이지 이동 logout 오늘 배운 내용 span은 inline 요소이기때문에 margin-top이 먹히지 않음. 따라서 inline-block으로 설정해주면 사용할 수 있음 캡쳐 소감 nav바에 처음으로 다양한 카테고리로 이동하는 기능을 추가했다. 그런데 nav에 logout 기능을 추가하면서 나름의 고민이 생겼다. firebase auth 관련 service를 authService에서 관리하는데 app에서부터 전달한다. 근데 nav가 hard mode / soft mode / collection / home 이 네군데에 다 등장하니까 app.jsx에서 전달 전달... 뭔가 이게 맞는건가 싶다. 원래 이렇게 더럽게 짜는건가...? 오류 일지 이미지 파일을 .. 2021. 12. 5. firebase를 이용한 로그인 오늘 한 내용 firebase google oauth를 이용한 로그인 service 폴더를 따로 만들어주고 firebase.js 파일을 만든다. .env 파일을 만들고 firebase 페이지에서 받아온 api key를 입력한다 (이때, .env 파일은 상단에 위치해야하고, key이름은 'REACT_APP_FIREBASE_KEY이름' 형식으로 작성한다.) firebase.js 파일에 process.env.해당 key를 적어준다. auth_service.js 파일을 만들고 firebase oauth를 위한 코드를 적는다. (firebase login page 참조) 로그인 페이지 스타일링 오늘 배운 내용 p는 block 요소, span은 inline 요소 캡쳐 저번 프로젝트 스타일링을 재사용했다. x 버튼을.. 2021. 12. 4. 3tamp 첫 화면 개발 오늘 한 내용 router 사용 첫 화면 스타일링 svg 파일 사용한 눈 내리는 효과 오늘 배운 내용 router 6.0 버전부터 사용 방식 변경. switch 사용 x version 6.0 이상 작성법 useHistory ⇒ useNavigate로 변경 const navigate = useNavigate(); const onClick = () => { navigate("/home"); }; position: absolute 일 때는 margin: 0px auto 혹은 text-align으로 가운데 정렬이 먹히지 않는다.이 설정이면 가운데 정렬 완료! margin: auto; left: 0; right: 0; 캡쳐 잘보면 눈이 내린다!!! 소감 알고리즘 한다고 오랜만에 리액트를 했더니 그새 다 까먹었다... 2021. 12. 1. 3tamp 기획 ⛳️ 프로젝트 기획 ⛳️ 프로젝트에 대해 프로젝트 명: 3tamp 뜻: 3주마다 stamp를 찍는다. 습관이 형성되는데 3 법칙이 적용된다. 습관을 형성하자 프로젝트 기획 의도 맨날 뭔갈 기획하는데 내가 하고 있단 사실을 까먹어서 기록하려고 도장으로 조금 더 성취감을 느끼기 위해 firebase를 본격적으로 이용해서 db 구축 화분 물주는 거 맨날 까먹어서 프로젝트 기술 스택 Front : React Back: Node, Firebase (front 위주, back은 최소화) 참여자 hae-on ( 나 >< ) 🌧 https://github.com/hae-on 프로젝트 진행 올해가 끝나기 전까지 완성 깃허브 활용 기능 로그인 → 구글 OAuth (이번 프로젝트는 로그인에 큰 비중 안두려고 함) 도장판 생.. 2021. 12. 1. 이전 1 2 3 4 다음
