📌 캘린더 직접 제작

캘린더에 보여줄 날짜 산출 방법 (with dayjs)

코드 수정 가능성 有

import * as dayjs from 'dayjs'
import * as localeData from 'dayjs/plugin/localeData'
import 'dayjs/locale/bs'

// dayjs() == 현재

export default function BtnCalendar() {
  dayjs.extend(localeData)
  const weekdaysMin = dayjs().locale('en-us').localeData().weekdaysMin() // Su	Mo	Tu	We	Th	Fr	Sa
  const firstDayOfMonth = dayjs().startOf('month').day() // 현재 月의 첫번째 날이 몇 요일인지 숫자로 리턴
  const daysInMonth = dayjs().daysInMonth() // 현재 月의 총 날짜 수를 반환 (ex. 28, 30, 31 중 하나가 나올 것) 
  const blanksInMonth = Array(firstDayOfMonth).fill('') // calendar에서 1일 전에 나올 빈칸 갯수만큼 배열로 반환
  const spreadDaysInMonth = Array.from({ length: daysInMonth }, (v, i) => i + 1) // daysInMonth을 1부터 n까지 배열에 리턴
  const shownDaysInMonth = [...blanksInMonth, ...spreadDaysInMonth] // calendar에 보여줄 모든 수 (빈칸 + 1 ~ n)

	return (...)
}

📌 회고

• 캘린더를 직접 커스텀하는 경우가 많으니 좋은 경험이 될 것이다.

  • 캘린더 기획/디자인, 보편적인 캘린더 제작 방식 및 적절한 시간 라이브러리 파악, 적절한 레퍼런스 등을 찾고 효율적인 코드를 짜려고 하다보니 많은 시간이 갔다

  • 속도를 내는 것 vs 보다 효율적인 것

    레퍼런스에 일별로 나타내는 방식이 꽤 비효율적으로 보여서 스스로 고민해서 좀 더 직관적이고 효율적인 코드를 짜고자 했다.

    시간을 선택할지, 질을 선택할지인 것 같다.

    숙련도를 높이는 것의 중요성을 다시 한 번 깨달았다.
    

• 다음에는 트리쉐이킹을 하기에는 더 용이할거라고 예상되는 date-fns 를 써보자.

  이번에는 우선 보편적으로 사용되는 dayjs를 사용함.
  

• 쏟아지는 할 일에 매몰되지 않고 천천히 하나씩 잘 해결해나가자.