달력에 기능 추가하기

아 EDA 할 생각 없냐고요?

 

맥북 반납해서 EDA를 못합니다... 리눅스 노트북은 데이터 분석 돌리면 뻗어서 평일에 글쓸때나 자바스크립트 할 때 말고 켜본적 없음...

---

그새 글꼴이 많이 바뀌긴 했는데... 그래서 이 달력에 뭔 기능을 추가할거임? 바로 오늘 날짜로 되돌아가는 기능과 몇년 몇월로 이동하는 기능이다. 전자는 뭔지 알겠는데 후자는 뭐임? 여러분 이 달력에서 1991년 3월로 어떻게 가는지 아십니까? 1991년 3월 될때까지 이전달을 급나 눌러야됩니다. 일단 햇수로만 36년인데 1년이 12개월이니까 대충 클릭질 몇 번 해야 하는지 견적이 나오시죠?

---

오늘 날짜로 돌아가는 버튼

let goTodayButton = document.querySelector('#gotoday');

이게 HTML 구조는 간단한데 CSS가… ㅋㅋㅋㅋㅋ 내가 오래전에 한거라 뭘 어떻게 한건지 헷갈림… 여러분은 이런 사태를 미연에 방지하실거면 주석 다십쇼.

 

아무튼 갖고옵시다.

 

// 오늘 날짜로 고고싱하는 버튼 
goTodayButton.addEventListener('click', (e) => {
    // 1. 전역 변수인 'date'를 현재 시점의 날짜로 갱신
    date = new Date(); 

    // 2. 갱신된 date 객체를 바탕으로 달력을 다시 그림
    renderCalendar();
});

사실 원리는 간단합니다. 오늘 날짜로 객체 생성하고 달력 다시 그리면 돼요. 그러면 일단 오늘 날짜로 복귀는 됐고… 이제 특정 년도 특정 달로 이동하는 기능 만들자.

 

특정 날짜로 이동하기

// 특정 날짜로 고고싱하는 버튼
goDateButton.addEventListener('click', (e) => {
    let goYear = document.querySelector('#goyear').value;
    let goMonth = document.querySelector('#gomonth').value;

    // 1. 입력값이 있는지 확인 (비어있으면 동작 안 함)
    if (goYear && goMonth) {
        // 2. 전역 변수인 date 객체의 연도와 월을 업데이트
        // 숫자로 형변환(Number)해주고, 월은 반드시 -1을 해줍니다.
        date.setFullYear(Number(goYear));
        date.setMonth(Number(goMonth) - 1);
        
        // 날짜가 해당 월의 마지막 날을 넘어가는 버그를 방지하기 위해 1일로 세팅하는 것이 안전합니다.
        date.setDate(1);

        // 3. 갱신된 정보를 바탕으로 달력 다시 그리기
        renderCalendar();
    } else {
        alert("이동할 연도와 월을 모두 입력해주세요!");
    }
});

이것도 걍 그 날짜로 달력 다시 그리면 되던데요? 근데 날짜는 왜 1일로 바꿔서 그렸나요? 어차피 우리는 그 특정 해 특정 월로 이동만 할 거잖아요. 그리고 이 달력을 쓰는 당일 날짜가 31일이면 말이이 30일인 달이나 2월로 이동할때 날짜 안 바꾸면 2월 31일은 뭐야!!! 이러고 컴퓨터가 밥상 뒤집어요.

 

이렇게 하면 일단은 되는'데'… 아직 끝나지 않은 문제가 있다.

 

콘솔에만 뜨는 메시지 처리하기

여러분들에게는 보이지 않지만, 사실 이 달력을 구동할 때 콘솔창에 보이는 메시지가 하나 있다.

 

바로 이건데… 저 달력을 만들때 아마 채찍피티가 없었거나 초창기라 디버깅을 못했을거다. 근데 지금은 채찍피티 클로드 에미나이가 다 있잖아요? 그래서 디버깅 해달라고 할거임.

 

그렇다고 합니다. 그러니까 기존 코드에서는 함수에서 자체적으로 범위를 체크하고 있었는데, 이것때문에 혼선이 와서 저런 메시지가 뜨는 것이다. 그러니까 걍 자체 체크하는걸 없애고 Date 객체가 알아서 보정하게 두면 된다 이거죠.

 

function dayCalcDisplay(startYear, startMonth, startDay) {
    // 1. 넘겨받은 연, 월, 일을 바탕으로 실제 Date 객체 생성
    // (월은 0~11이므로 -1, 일은 그대로)
    // 예: 2025년 2월의 이전달 날짜로 '31'이 들어와도 
    // new Date(2025, 1, 31)은 자동으로 2025년 3월 3일로 인식됩니다.
    var tempDate = new Date(startYear, startMonth - 1, startDay);
    
    // 2. 보정된 진짜 연/월/일을 다시 추출
    var realYear = tempDate.getFullYear();
    var realMonth = tempDate.getMonth() + 1;
    var realDay = tempDate.getDate();

    // 3. (옵션) 윤년 체크 로직은 사실 lunarCalc 내부에서 수행하므로 
    // 여기서는 범위 체크를 삭제하거나 보정된 값을 사용합니다.
    if (realYear < 1900 || realYear > 2040) {
        return ""; // 지원 범위 밖이면 빈칸 처리
    }

    /* 양력/음력 변환 (보정된 진짜 날짜를 넣음) */
    var lunar = lunarCalc(realYear, realMonth, realDay, 1);

    return (lunar.leapMonth ? "윤" : "") + lunar.month + "." + lunar.day;
}

그래서 함수가 더 짧아졌음. 근데 저거 생각해보니까 2040년 넘어가면 ""준다고? 아니… 그때 나 50살인데? 뭐 그래요… 그때쯤 되면 뭔가 새로운 방법이 나오겠지… 그때 코드를 바꾸던가 합시다…