전체 글125 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. react-router-dom v6 이상 페이지 이동 button을 눌러 페이지 이동을 해야 할 때 이전 버전에서는 useHistory를 사용했다. 그러나 v6에서는 useNavigate를 사용한다. 사용법은 useHistory와 크게 다르지 않다. 먼저, useNavigate를 import 해준다. import { useNavigate } from "react-router-dom"; 그리고 함수 내부에서 선언을 한다. const navigate = useNavigate(); 버튼을 클릭했을 때 home으로 이동한다고 하면 const onClick = () => { navigate("/home"); }; 적어주고 버튼에 onClick을 부여하면 끝 - 2021. 12. 1. 프로젝트 마무리 오늘 한 내용 날짜 select로 변경해 달별로 선택 가능 배경 색상 정리 배포 리드미 정리 오늘 배운 내용 Deployment: https://create-react-app.dev/docs/deployment Deployment | Create React App npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of t.. 2021. 10. 28. 메인 페이지 구성 오늘 한 내용 박스 생성 박스 삭제 박스 색상 변경 화면 좌우 분할 실시간 수정 반영 오늘 배운 내용 화면 분할 flex-basis를 이용해 화면을 좌,우로 분할할 수 있다. box를 줄바꿈 속성을 이용하면 원하는 갯수 이상 출력시 다음 줄로 바꿔서 출력할 수 있다. getElementById 혹은 useRef를 이용해 요소를 선택할 수 있다. React에서는 useRef를 더 선호하는데 id는 자체가 중복될 가능성이 높아서 그렇다고 한다. select를 재사용할 일이 많고 option이 많을 경우 미리 정의해놓고 map으로 할당하는 것이 깔끔하다. 캡쳐 소감 그동안 다른 일을 처리 하느라 제대로 개발을 하지 못했다. 하루에 2~3시간밖에 코딩을 하지 못해 진도가 느리게 나갔고, 노트 정리하는 것에 소홀.. 2021. 10. 26. select option 값을 효율적으로 작성하는 법 select를 이용해 값을 출력한다고 해보자. 예를 들어 바나나, 사과, 토마토를 select로 만든다면 바나나 사과 토마토 이런식으로 작성하면 된다. 그러나 option 값이 많이 필요하다면? 그리고 재사용해야 한다면? 위 사진처럼 선택해야 하는 항목이 많아진다면 위 방식대로 코드를 작성하는 것이 부담스러워진다. 매번 사용할 때마다 option 값을 적어줘야 하는 것이다. 이때는 map을 이용해 간단하고 간결하게 표현해줄 수 있다. 0부터 59까지의 숫자를 선택해야한다고 해보자. 먼저, 사용해야 할 항목을 한 묶음으로 선언해준다. const minutes = [ { label: "00", value: "00" }, { label: "01", value: "01" }, { label: "02", valu.. 2021. 10. 19. react 한 화면 두개로 절반 분할 한 화면을 두개로 나눠보려고 한다. 전체 화면은 home, 위쪽 component는 nav, 왼쪽 component는 editor, 오른쪽 component는 box라고 명명했다. 먼저 home의 jsx를 이런 형식으로 적어준다. 전체 section을 잡아주고 editor와 box는 div로 묶어준다. css를 이용하여 section과 div를 스타일링해준다. .home { width: 100%; height: 100%; display: flex; flex-direction: column; } .container { flex: 1; display: flex; } 이제 각각 editor와 box의 css파일로 이동하여 스타일링해준다. .box { flex-basis: 50%; } .editor { flex.. 2021. 10. 15. 이전 1 ··· 14 15 16 17 18 19 20 21 다음
