매일 공부한거 기록하기

처음엔 단순하게 1일부터 마지막날짜까지 for문을 돌려 배열에 넣어줬었다. 근데 오늘날짜 표시를 하기 위해선 단순하게 증가한 i가 아니라 object타입으로 받아 today를 비교하게 해야했음.. dayjs()에 isToday()가 있으므로ㅎㅎ //해당월 날짜 배열 for (let i = 1; i ( {item.isToday() ? ( {item.format(dayFormat)} ) : ( item.format(dayFormat) )} 그리고 배열을 map으로 돌려서 item.isToday() 삼항연산자를 사용해 오늘일 경우 Today컴포넌트를 렌더링 하게 해줬다 평일과 주말 컬러 구분도 해줬다. for문을 돌려 date배열에 요일들을 넣어준다. 그리고 date배열을 map으로 돌려 index별로 구분해..

첫번째 시도는 해당 월의 날짜들만 받아왔었고 이번에는 이전 달, 다음 달의 날짜들도 받아오려고 한다. 저번달의 날짜 배열을 만들었다 현재 달의 요일을 숫자로 받아와 일곱칸중에 몇번째 칸까지 for문을 반복할지 정해준다. 그리고 이전달의 마지막 숫자에서 하나씩 빼준다. 이때 배열은 거꾸로 넣어줘야하므로 unshift해준다. 왜냐면 lastDayofPrev는 31-0, 31-1, 31-2..이런식으로 들어가기때문 31,30,29 배열을 unshift해주는것 해당월은 첫번째 달력에서 만든것과 같다 다음달역시 1부터 시작해 마지막 요일을 일곱칸중에서 빼준다 그럼 일주일중에 몇칸이 비어있는지 알 수 있으니까 1부터 증가시켜 넣어준다 그리고서 map으로 해당 배열들을 컴포넌트로 리턴시켜준다 //저번달 날짜 배열 i..

내가 생각한 방법은... 해당 월의 시작요일을 찾고 해당 월의 마지막 날짜를 찾아서 배열에 push를 해주는것 이었다! 0부터 시작요일까지는 "" 빈값을 넣어주고 시작부터 마지막까지는 for문을 돌려 날짜를 넣어준다 그리고 마지막날짜부터 달력의 마지막 칸까지 또 ""빈값을 넣어주는 그런 방법이였다 const getDays = () => { const startDate = currentMonth.startOf("month").format("d"); const endDate = currentMonth.endOf("month").format("D"); const endDateIndex = currentMonth.endOf("month").format("d"); const dateRow = []; for (le..

달력을 만들어 보자 :) ~ dayjs 공식홈페이지 ~ https://day.js.org/en/ 달력을 구현하기 위한 로직을 정리하자 ~ :) 1. 이번달의 시작 요일을 알아야 한다. 1-1 . dayjs 에서 startOf는 지정 시간 단위의 시작을 알려준다. 1-2 . dayjs().startOf("month")는 object를 리턴한다. 1-3. dayjs().startOf("month").format("d") 를 이용해 필요한 포맷으로 리턴받으면 된다. 1-4. format("d")는 요일이 0-6까지로 표현된다. (일요일이 0으로 시작함) 2. 이번달의 마지막 날짜 2-1.마찬가지로 이번달의 마지막은 dayjs().endOf("month")를 사용해 Object를 리턴받는다. 2-2 .dayjs..

Header에서 메뉴를 눌렀을때 화면에서 해당 위치로 scroll이동을 하려고 했다. Main.jsx에서 Header와 여러 component를 import해서 사용했다. import Header import Test1 import Test2 import Test3 이런식으로 화면이 구성된다. Header에 props와 ref를 넘겨주면 될거라고 간단히 생각했으나 Header에 ref를 넘겨주는것이 아니였음! Main.jsx에서 컴포넌트에 해당되는ref를 생성해준다. 초기값은 null 이다. import Header import Test1 import Test2 import Test3 const test1Ref = useRef(null); const test2Ref = useRef(null); const..

https://ko.reactjs.org/docs/forwarding-refs.html Forwarding Refs – React A JavaScript library for building user interfaces ko.reactjs.org React.forwardRef를 사용해 전달된 ref를 얻고, 렌더링되는 DOM으로 전달해준다. ref는 직접 접근하기 위해 사용된다. html 엘리먼트가 아닌 React컴포넌트에서 ref props를 사용하려면 forwardRef() 함수를 사용해야한다. 컴포넌트를 forwardRef()로 감싸주면 , 해당 컴포넌트는 두개의 매개변수를 갖게 된다. 어렵잖아..

아~ 진짜~~~ 이게 뭐라구 이렇게 고생을 했나 싶고ㅋㅋㅋㅋㅋ styled Component로 만든 radio Button이 checked된게 Update되지 않았다! value를 콘솔에 찍어보면 분명히 잘 set되는데! ㅋㅋㅋㅋㅋㅋ 이게 머라고 어제 저녁부터...^^..ㅋ 문제는...바로바로바로 e.preventDefatul(); 때문이였다^^ㅋ 이거 지워주니까 허무하게 잘 됨요ㅎㅎ;;; const onChangeName = (e: React.ChangeEvent) => { // e.preventDefault(); const { target: { value }, } = e; setBottleName(value); }; const onChangeShape = (e: React.ChangeEvent) =>..

갑자기 이 빨간 글자가 떠서 너무 신경쓰였고.. 고쳤습니당 너무 쉽게~! 1. manifest < 가 들어가있는 index.html을 찾아가십쇼 2. rel = "manifest" 을 rel ="/manifest"로 수정하면 끝! 요렇게~~~~ 근데 manifest는 뭘까..? manifest.json 앱에 대한 정보를 담고있는 JSON파일이라구 한다 https://developer.mozilla.org/ko/docs/Web/Manifest Web app manifests | MDN 웹 앱 매니페스트(Web app manifest)는 프로그레시브 웹 앱(PWA)라고 칭하는 웹 기술 모음집의 일부로서, 앱 스토어를 거치지 않고 장치의 홈 화면에 설치할 수 있는 웹사이트를 구성합니다. 단순한 홈 develo..

React 18로 업그레이드 된 후로 18버전을 쓰려고 한다. 이떄 ReactDOM.render는 지원하지 않기 때문에 주의해서 사용하길! ReactDOM.render를 쓰면 17을 쓰게된당~ ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot Before import React from "react"; import ReactDOM from "react-dom"; impor..

React- Redux라이브러리를 사용하지않고 오로지 Redux만 사용해서 구현해보자. 그 이후 React-Redux를 사용해보자. 대부분 React-Redux를 사용함. 리덕스에 저장된 데이터를 화면에 보여줄때는 다양한 형식으로가공할 필요가 있다. reselect라는 라이브러리가 도움이 됨. Cannot find module 'react-dev-utils/crossSpawn' exception React App Ask Question npm i react-dev-utils 오류