[FE - ConnecTo] DAY55 TIL👩🏻‍💻

22.09.28 수업 시간 중 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

Calendar

• 'yyyy-mm-dd'형태로 일마다 데이터를 넣어줄 때, 올해 12월에서 내년 1월, 올해 1월에서 작년 12월을 클릭했을 경우 년,월이 바뀌지 않는 문제가 존재했다.

  // 이전
  thisDate.year, // 년
    classList[i] === 'prev-date' ? thisDate.month - 1 : // 월
  	classList[i] === 'day'? thisDate.month: thisDate.month + 1, // 월
  	date // 일
  
  // 이후
  new Date(thisDate.year, // 년
    classList[i] === 'prev-date' ? thisDate.month - 1 : // 월
  	classList[i] === 'day'? thisDate.month: thisDate.month + 1, // 월
  	date ) // 일

  • 이전과 같이 넘겨주었을 경우 년도 변화없이 월만 변경되지만, 이후처럼 new Date에 담아주면 자동적으로 다음년도나 이전년도로 변경되면서 월이 적절하게 변경된다.
• 초기 버전에서 for문을 사용하여 지난 달, 이번 달, 다음 달 일을 배열에 담아주었다.
  • 이후 리팩토링에서 Array 메서드를 이용하여 이를 해결해 볼 예정
• Calendar가 월별로 한 달의 주차(?)의 개수에 따라 Calendar의 height 값이 달라지는데, 초기 버전에서는 가장 긴 주차를 기준으로 고정해주었는데, 매우 부자연스럽다는 것을 깨닫고, Calendar의 height값을 없애주어 달 별로 자연스럽게 변화할 수 있도록 해주었다.

DatePicker

• DatePicker에서 날짜 선택시, input 에는 제대로 출력이 되지만, calendar에는 다중으로 선택되는 문제점이 생겼다. 단순하게 toggle 로만 구현하면 될거라고 생각했지만, 잘 되지 않았고, forEach문을 통해서 클릭한 날짜만 true가 되도록 toggle의 두번째 조건을 설정해주었다. → 그렇지만.. forEach문이 과연 최선인가..? 🤔
  
• 재사용성을 위해서 <div class="date-pick"></div> 내부에 캘린더관련 태그와 datepicker의 input 태그가 동적으로 생성되도록 해주었다.
• 사소한 이슈
  • .calendar 요소의 width 값이 변경되면 캘린더 전체의 크기와 폰트 사이즈가 연동해서 조정되도록 뷰를 구현했는데, input 요소 또한도 같이 변경되게 적용을 시켜놔서 Calendar 크기가 변경될 때 input 요소도 함께 변경이 되는 이슈가 있었다. 보기에도 부자연스럽고 서로 간의 융합도도 높기에, input 요소의 width 값을 고정시켜서 해결하였다.