매일 공부한거 기록하기

디자인 후다닥 넣어서 완성 ~ .. today로 가는 버튼은 클릭시 setCurrentMonth를 현재 month로 set 해줬고, setSelected를 현재 날짜로 set해줬당 화면은 currentMonth가 바뀔때마다 렌더링되므로 화면도 당연히 이동된당 현재 날짜 선택은 렌더링된 현재 날짜를 setSelected에 set해줬다. 삼항연산자를 이용해 className에 selected ? "selected" : "" 를 추가해줘서 css를 변경할 수 있게 했답~~~~~~~~

처음엔 단순하게 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..