방방이네 블로그

달력을 만들기위해 여러가지 방면으로 생각하고 검색+GPT를 이용했습니다.

달력라이브러리를 사용하지않고 현재있는 달력을 만들게된계기는 내가 원하는 달력을 만들고싶었기 때문이였습니다 라이브러리를 쓰게되면 만들어둔 달력이기에 내가 원하는 만큼에 모양이 나오지않을꺼같아 이렇게 개발하게 되었습니다

그리고 자바스크립트로만으로 달력을 구현하는것을 해보고도 싶었구요 전체 코드를 남기겠습니다 

달력 구현 알고리즘

1. 달력은 년원-일이표시되며 "요일이란것이있다"

2. 요일은 일월화수목금토일 이다.

3. 오늘이 몇년 몇월 몇일인지 알아야한다.

4. 이번달 첫번째날과 마지막날을 알아야한다.

5. 달력의 UI는 7열 n행이 반복되는 형태이다.

크게 이렇게 생각하고 제작을했습니다

1. 달력은 년-월-일이 표시되며 "요일"이란것이있다

2. 요일은 일 월 화 수 목 금 토일 이다

const daysInWeek = ['일', '월', '화', '수', '목', '금', '토'];

3. 오늘이 몇년 몇월 몇일인지 알아야한다 ()

    const [currentDate, setCurrentDate] = useState(new Date());

new Date() 객체를 통해   const today = new Date() 라고 하셔도 무방합니다.

4. 이번달 첫번째날과 마지막날을 알아야한다.

//현재 월의 첫번째날
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
//그 달의 날짜수 (마지막날을 체크함)
const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();

월의 첫번째달은  3번을 활용하는것입니다.

newDate() 객체의 파라미터는 년,월,일,시,분,초 단위로 파라미터를 받는 메소드입니다.

그렇기에 이번달의 첫번째날은 new Date(올해,이번달,1) 을 작성하면 이번달의 첫째달에 대한 정보를 얻을수가있으며 

달의수는 28~31로 변화가있습니다.

그래서 이것을 제대로구현하면 윤달을 계산하는식을 만들어야하는데 자바스크립트에는 Date()객체가 있으므로 더편하게 만들수있습니다.

마지막날은 new Date(올해, 이번달+1 (다음달), 첫째날-1 (이전달의 마지막날 )입니다  이해가 되시나요 ? 

즉 new Date(올해,다음달,0) 이되는것입니다 . 

이번달의 마지막날은  다음달에 첫날에 전날입니다. 

 Date()객체를 보다쉽게 많이 이해하게되었네요