JavaScript 캘린더 전환 오류

캘린더 전환 화살표를 만들고자 한다고 가정해 봅시다. 이 경우 몇 가지 전형적인 실수를 할 수 있습니다. 이를 살펴보도록 하겠습니다.

전환 버튼이 있고, 간단함을 위해 캘린더 대신 단순히 연도와 월 이름을 출력할 요소가 있다고 가정합니다:

<button id="prev">prev</button>
<div id="elem"></div>
<button id="next">next</button>

우리 요소들에 대한 참조를 얻겠습니다:

let elem = document.querySelector('#elem');
let prev = document.querySelector('#prev');
let next = document.querySelector('#next');

또한 월 번호를 매개변수로 받아 그 이름을 반환하는 함수가 있다고 가정합니다:

function getMonthName(month) {
	let names = [
		'1월', '2월', '3월', '4월', '5월', '6월',
		'7월', '8월', '9월', '10월', '11월', '12월'
	];
	
	return names[month];
}

페이지 로드 시 현재 연도와 월을 얻어보겠습니다:

let date  = new Date;
let year  = date.getFullYear();
let month = date.getMonth();

우리 요소에 연도와 월 이름을 출력합니다 (캘린더 시뮬레이션):

elem.textContent = year + ' ' + getMonthName(month);

이제 전환 버튼에 클릭 핸들러를 부착해 보겠습니다:

prev.addEventListener('click', function() {
	// 이전 월 표시
});

next.addEventListener('click', function() {
	// 다음 월 표시
});

이제 전환기를 구현할 때 어떤 실수를 할 수 있는지 고려해 보겠습니다.

첫 번째 오류

어떤 프로그래머가 월 전환 버튼을 구현했다고 가정합니다:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month + 1);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month - 1);
});

그러나 이 프로그래머는 첫 번째 클릭에서만 월이 전환되고 후속 클릭에서는 전환되지 않는 실수를 저질렀습니다.

문제는 변수 month가 함수 내에서 변경되지 않는다는 점입니다. 단순히 그 내용에 1을 더하거나 빼고 결과를 함수 getMonthName로 보냅니다.

우리 변수가 변경되지 않았기 때문에, 다음 클릭 시에도 여전히 현재 월이 들어 있을 것이며, 아무것도 변경되지 않습니다.

문제를 수정하겠습니다:

next.addEventListener('click', function() {
	month = month + 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	month = month - 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

단순화할 수 있습니다:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(++month);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(--month);
});

두 번째 오류

월이 특정 범위 내에서 변경되어야 한다는 것을 종종 잊곤 합니다 - 0부터 11까지. 범위 한계에 도달하면 연도를 변경하고(앞뒤로), 월을 초기 값으로 재설정해야 합니다.

이를 구현해 보겠습니다:

next.addEventListener('click', function() {
	if (month === 11) {
		month = 0;
		year++;
	} else {
		month++;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	if (month === 0) {
		month = 11;
		year--;
	} else {
		month--;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});