자바스크립트 객체 오류 - let/const/var 차이

다른분이 만드신 달력을 참조하여 만들어봤다 - https://bigtop.tistory.com/71#comment12881607

[JavaScript] 일반적인 달력 만들기 - 날짜 이동 버그 수정하기!

프로젝트에 넣어야했는데....풀캘린더 등은 너무 과한 기능과 함께...아주 긴 코드드를 감당하기 어려웠고 ㅋㅋㅋ 

심플하고 내가 필요했던 기능을 가장 가지고있던 달력...아주 고마우신분.... 

나는 여기서 달력의 날짜를 클릭하면 페이지 이동을 해야했는데 그 부분을 구현하기 어려웠다. 구현이랄것 까지도 없었지만...자바스크립트를 모르니 ...뭘 건드려야 할지도 몰랐고 ㅠㅠㅠ 

 

댓글로 도움을 요청하였는데 친절히 알려주셔서 변형을 해서 완성함!! 

 

문제점 발생) 

프로젝트에 여러개의 달력이 존재하는데, a달력에서 b달력으로 이동하면 

달력이 있었는데, 없었습니다

 

이런 불상사가 발생했다. 소스코드 오류를 확인해보면 

date 객체가 이미 선언되어있다고 나와서...아주 혼란스럽게 만들었다. ajax로 화면을 비우고 새로 불러오는데 도대체 왜 선언이 되어있다 하는것인지...에휴... 

 

결국 답은 뭐겠어...구글링뿐....

 

구글링 하다보니 let / const / var 말들이 제일 많았고, 나는 변수명을 똑같이 준적이 없다고!!!! 외치던 차에 

해결해주는 글을 발견 ㅎㅎ 

---

var

같은 이름의 변수를 두번 선언되어도 에러 발생시키지 않습니다.

 

let, const에서는 SyntaxError를 발생시킵니다. ( Identifier 'xxx' has already been declared )

규모가 큰 코드에서 버그를 방지할 수 있는 바람직한 특징입니다.

출처: https://k9e4h.tistory.com/136 [Kim's :D]

---

문제의 변수 date, renderCalendar, prevMonth, nextMonth, goToday 를 var로 바꿔주니 말끔히 해결완료! 

// Date 객체 생성 
let date = new Date();

const renderCalendar = () => {    
    const viewYear = date.getFullYear();
    const viewMonth = date.getMonth();
	
	document.getElementById('currnetMonth').value= new Date().toISOString().slice(0, 7);
    document.querySelector('div.body>div.calendar>div.header>.year-month').textContent = `${viewYear}년 ${viewMonth + 1}월`;

    // 지난 달 마지막 Date, 이번 달 마지막 Date
    const prevLast = new Date(viewYear, viewMonth, 0);
    const thisLast = new Date(viewYear, viewMonth + 1, 0);

    const PLDate = prevLast.getDate();
    const PLDay = prevLast.getDay();

    const TLDate = thisLast.getDate();
    const TLDay = thisLast.getDay();

    // Dates 기본 배열들 
    const prevDates = []; 
    const thisDates = [...Array(TLDate + 1).keys()].slice(1);
    const nextDates = []; 

    // prevDates 계산
    if (PLDate !== 6) {
        for (let i=0; i<PLDay+1; i++) {
            prevDates.unshift(PLDate - i);
        }
    }

    // nextDates 계산
    for (let i=1; i<7-TLDay; i++) {
        nextDates.push(i);
    }

    // Dates 합치기 
    const dates = prevDates.concat(thisDates, nextDates);
    const firstDateIndex = dates.indexOf(1);
    const lastDateIndex = dates.lastIndexOf(TLDate);

    // Dates 정리
    dates.forEach((date,i) => {
        const condition = i >= firstDateIndex && i < lastDateIndex + 1
                          ? 'this'
                          : 'other';      
        dates[i] = `<div class="date"><span class=${condition}>${date}</span></div>`;
    })

    // Dates 그리기 
    document.querySelector('.dates').innerHTML = dates.join('');

    // 오늘 날짜 그리기
    const today = new Date();
    if (viewMonth === today.getMonth() && viewYear === today.getFullYear()) {
        for (let date of document.querySelectorAll('.this')) {
        if (+date.innerText === today.getDate()) {
            date.classList.add('today');
            break;
        }
        }
    }
};

renderCalendar();

const prevMonth = () => {
    date.setDate(1); // setMonth 하기전에 setDate메서드로 날짜를 1로 설정 
    date.setMonth(date.getMonth() - 1);
    renderCalendar()
};

const nextMonth = () => {
    date.setDate(1); 
    date.setMonth(date.getMonth() + 1);
    renderCalendar();
};

const goToday = () => {
    date = new Date();
    renderCalendar();
};


function dateClick(){
	let $dateObj = $('div.body>div.calendar>div.main>a.dates');
	console.log($dateObj);
	$dateObj.click(function(){
		let menuHref = $(this).attr('href'); 
		let ajaxUrl = './html/calpostwrite.html'; 
		
		/*let ajaxUrl = './calpostwrite.jsp'; */
			         
		$.ajax({
            url: ajaxUrl,
            method : 'get',
            success:function(responseData){
                let $articlesObj = $('section>div.articles');
                $articlesObj.empty();
                $articlesObj.html(responseData);
           }
		});
		 return false;
	});
}