[JS] jQuery로 만든 Scheduler

자세한 코드와 설명은 github를 참고해주세요.

보통 부트캠프에서 주는 과제들 생김새가 전부 베이직이다 보니 만들다보면 여기 저기 손 보고 싶은 욕구가 상당히 들더군요.😅
이번에도 역시 못 참고 제 마음대로 폰트와 스타일을 바꿔가며 만들어봤습니다. 물론 출제자의 의도에 맞게 만들 줄 알아야 한다는 것 또한 중요함을 알기에 큰 틀에서 벗어나지 않는 선에서 손을 봤습니다.

1. Problem(1) & Solution

👉Problem(1):

달력을 만들기 위해 table을 이용했는데, 하나씩 행과 열을 추가하기엔 너무 번거로워서 자동으로 생성되도록 만들어줬습니다.

for (let i = 1; i < 32; i++) {
	$('.calender-dates').append('<td>i</td>');
}

❗문제 발생❗ append()안의 <td>i</td>를 문자로 인식

이로 인해 <td>1<td>이 아니라 <td>i<td>로 출력이 되는 오류를 겪었습니다.

오류 해결 시도: "🤔백틱 기호를 써서 바꿔주면 될까?"
.
.
.
❗실패❗ 
".......뭐가 문제지?😫"

👉Solution: '<td>'+i+'</td>'

한참을 고민하다가 갑자기 + 기호로도 '문자 & 변수'를 같이 입력할 수 있는 것이 떠올라서 적용해봤습니다.

역시나....

이렇게 쓰라고 배운적은 없지만 javascript가 기반이니 얼추 비슷하지 않을까 하고 생각했던 게 맞았습니다. 이래서 기본이 중요함을 다시금 느끼는 것 같습니다...

for (let i = 1; i < 32; i++) {
	$('.calender-dates').append('<td>' + i + '</td>');
}

번외(1)

+기호는 함수에만 쓸 수 있는 것이 아니라 선택자를 불러올 때도 사용할 수 있습니다.

이 점을 활용해 작성 버튼을 누르면 입력란에 적힌 날짜에 내용이 알맞게 들어가는 함수를 만들어봤습니다.

// 31개의 td태그에는 각각 날짜와 동일한 숫자로 된 클래스가 들어 있습니다.
$('button').on('click', function () {
	let dates = $('#dates').val();
	let content2 = $('#contents').val();
	$('.' + dates).text(content2);
});

번외(2)

두 번째 번외는 .기호의 사용과 관련은 없지만, 달력의 '토요일'과 '일요일'에 해당하는 날짜들을 각각 파란색과 빨간색으로 바꾸는 작업을 나중에 추가해줘서 아래에 덧붙였습니다.

만들 때 인덱스값을 이용하면 쉽게 할 수 있습니다.

// 토요일은 파란색
for (let i = 6; i < 35; i += 7) {
	let sat = document.getElementsByTagName('td')[i];
	$(sat).css('color', 'blue');
}

---

2. Problem(2) & Solution

👉Problem(2):

또 다른 오류는 달력에 있는 날짜를 클릭했을 때 날짜 입력란에 클릭한 날짜가 나타나게끔 만드는 과정에서 발생했습니다.

우선, 날짜 입력란에 클릭한 날짜가 나타나도록 만들기 위해 아래처럼 코드를 작성했었습니다만, 값이 아닌 [object HTMLTableCellElement]가 출력되는 오류를 겪었습니다.

$('td').on('click', function () {
	$('#dates').val(this)
});

이유가 궁금해서 찾아보니 $('#dates').val(this)를 하면 웹에서 클릭한 날짜, 즉 <td>의 element(=JavasScript 객체)가 this에 전달되고, this에 전달된 값이 val()에 전달되는 과정에서 문자열로 변환되어 [object HTMLTableCellElement]이 출력되는 것이었습니다.

그렇다면 아예 확실하게 새로운 변수에 td의 element를 담고, text()를 이용해 저장해주면 어떨까 싶어 시도해봤습니다.

👉Solution: 변수 = $(this).text() 가 맞았다.

새로 만든 변수인 content에 <td>의 element를 따로 저장한 뒤, 이를 val()에 넣어주니 정상적으로 입력란에 날짜가 출력됐습니다.

$('td').on('click', function () {
	let content = $(this).text(); 
	$('#dates').val(content);
});

---

결론: jQuery, 너무 재밌다🤩

html과 css에 이어서 javascript로 힘겹게 웹 만들다가 jQuery로 머릿속에서 구현하고 싶었던 기능들을 쉽게 슥슥 만드니까 신세계에 온 것 같습니다.
비록 이렇게 간단한 스케줄러를 만드는데 오래 걸릴만큼 아직 많이 부족한 실력이지만 전보다 훨씬 그럴듯한 결과물을 만들어낼 수 있게 되니 정말 재밌습니다.

---