TIL-23.05.15

 

 

문제점

이번주는 클론코딩 프로젝트를 진행중이다. 아무래도 창작이 아닌 존재하고있는 사이트를 클론하는 프로젝트이기때문에 스타일링에도 신경쓸수밖에없다. 내가 맡은 파트는 게시글 필터 페이지, 상세 페이지를 맡게 되었는데, 필터 중 캘린더를 사용하는 부분이 있다.

평소같았으면 라이브러리를 이용해 캘린더를 불러왔겠지만, 스타일링에도 신경써야하는 프로젝트이기때문에 캘린더를 직접 만들었다.

 

 

 

 

시도한점

캘린더를 직접 만들려고 할때, 가장 먼저 고민되었던 부분은 월마다 1일의 요일이 다르다는 점이였다.

이걸 어떻게 고려해서 만들까 고민하다, js의 Date객체를 이용하면 좋겠다는 생각이 들어 캘린더 작성 함수를 만들었다.

  const prevMonthLastDate = getNewDateObj(
    new Date(doMonth.year, doMonth.month - 1, 0),
  );
  
  const startDate =
    prevMonthLastDate.day === 0
      ? prevMonthLastDate
      : prevMonthLastDate.day === 6
      ? doMonth
      : getNewDateObj(
          new Date(doMonth.year, doMonth.month - 1, -prevMonthLastDate.day),
        );

내가 고민했던 부분을 풀기위한 코드

해당 월마다 시작일이 무슨요일이냐를 알아야 캘린더를 작성할수있는데, 내가 착안한 점은 전 달(previous month)의 마지막날의 요일이

일요일인이 토요일인지를 판별하기로했다. 전 달의 마지막날의 요일이 일요일이면 해당 월의 시작일은 달력의 첫째주 월요일부터 시작이고, 6인 토요일이면 해당월의 시작일은 일요일부터 시작한다는 점을 이용했다. 해당월의 시작일이 어느 요일인지만 알게된다면 해당월의 달력을 작성하는것은 문제없다

또 다른 문제점을 맞이한건 해당 월이 몇 주로 이루어졌냐는 점이다. 이건 해당월 date의 총 갯수를 일주일7로 나눠 올림처리(Math.ceil)로 처리해 해결했다.

달력을 직접 작성하는데 있어 반드시 알아야할 점은, 해당월의 시작일이 무슨요일에 시작하는지, 해당월이 총 몇개의 주(week)로 구성되어있는가를 알면 쉽게 달력을 작성할수있다.

 

 

 

 

알게된점

달력을 직접 작성하면서, 마치 알고리즘 문제를 푸는 것 같았지만 스타일링은 내 취향껏 할수 있다는것

그리고 달력을 만드는데에는 2가지(시작요일, 총 주의 개수)만 알면 쉽게 만들수있다는것!