Javascript를 이용해서 웹 페이지에 달력 구현을 해보았습니다. 개인적으로 너무 어렵기 떄문에 더 자세히 분석을 해봐야겠습니다. 또한, 구현은 했지만 오류가 있는 달이 있어... 우울합니다. 부족하지만 봐주시고 오류가 있으면 찾아주세요.
또 설명하다 보니 존대와 반말이 섞였네요 ㅎㅎ 죄송합니다.
달력 헤드 부분에는 년,월 그리고 달력을 넘기는 버튼을 생성하고
메인 클래스에는 요일과 날짜가 구현되게 하였습니다.
renderCalender 함수 생성
viewYear 와 viewMonth 는 date의 달과 년도를 가져오는 것으로 정의해놓았고
hml 파일에 등록해 놓은 year-month class에 년도와 월이 보이도록 설정했습니다. (month에는 +1을 해야합니다.)
prevLast 와 thisLast 는 저번달과 이번달을 정의해 놓았습니다. viewMonth 의 값은 현재 월 보다 -1을 하기 때문입니다.
(예를 들어, 10월이면 viewMonth에는 9가 출력되고 new Date(2022, 9, 0) 이 나오고 저 값은 22년 9월 30을 나오게 합니다.)
PLDate 와 TLDate 는 저번달과 이번달의 마지막 날짜를 가져오는 것이고
PLDay 와 TLDay 는 마지막 요일을 가져오는 것입니다.
thisDates 는 ...Array 를 이용해서 이번달의 날짜들을 배열하도록 정의되었다. ...Array(TLdate+1).keys().slice(1) 을 하면 만약 31일까지 날짜가 있다면 [ ] 안에 1~31까지 숫자가 배열되도록 되어있다. (slice는 첫번째 요소인 '0'울 제거하기 위해...)
첫번째 if문 - PLDay 가 토요일('6')이 아니라면 마지막 날짜부터 차곡차곡 앞에 쌓아가는 것입니다. 상기 그림처럼 30부터 unshift 문법을 이용해서 앞에 글자가 쌓이게 됩니다. i를 1씩 줄여서 push를 사용해도 되겠죠?
두번째 for 문 - if 문이 들어가지 않아도 되게 i를 1로 설정하고 진행했습니다. 마지막 날이 토요일이 아니면 1,2,3.. 이렇게 만들어 지겠죠.
그렇게 정의된 prevDates, nextDates, thisDates를 concat 함수로 순서대로 합치면 위에 예시로 보여준 22년 10월 달력을 보면 dates = [25,26,27,28,29,30,1,2,..........,31,1,2,3,4,5] 이렇게 만들어지게 됩니다.
forEach 함수를 보면 firstDateIndex가 i 와 크거나 같고 i가 lastDateIndex+1 보다 작으면 'this'라는 class를 가지고 아니면 'other'라는 class를 가집니다. 22년 10월에서는 firstDateIndex가 7이므로 6번째 요소까지는 other class를 가집니다.
(근데, 요기 어디선가 에러가 난건지 다른 부분에서 에러가 난지는 모르겠는데 달력을 넘기다 보면 전부다 other class를 가진 것들이 있습니다....)
위에 정의된 dates 를 HTML 파일에 적용하는데 ""를 이용해서 분할한 후 적용한다. (그래야 div가 적용이 되는 것 같습니다. 잘... 모르겠네요 이건/ 아시는 분은 알려주세요)
이제 오늘 날짜에 빨간색 음영이 지게 하도록 class에 today를 추가하려고 합니다.
이번년도 이번달 안에서 오늘 날짜를 가진 친구를 찾아서 class에 today를 추가합니다. 찾아서 추가하면 break가 걸립니다.
그리고 rederCalender() 함수를 실행합니다.
마지막으로 버튼을 누르면 달이 넘어가는 효과를 적용하겠습니다.
< (←)를 누르면 저번달로 넘어가고 &rt(→)를 누르면 다음달로 넘어가고 today 버튼을 누르면 오늘이 있는 달로 넘어가는 장치를 만들었습니다.
이렇게 분석을 해서 봤는데 왜 오류가 뜨는 달이 있는지는 아직 모르겠습니다.
혹시 언젠가 누가 이 글을 보게 된다면 알려주세요... 감사합니다.
-부록 -
forEach 함수
위에 dates.forEach((date,i) 로 함수를 만들었는데 이렇게 되면
i : 0 Value : 날짜
i : 1 Value : 날짜
i : 2 Value : 날짜
i : 3 Value : 날짜
.
.
.
이렇게 나오겠죠. i값에 따라 class 값이 바뀌고 date에는 날짜가 들어가는 함수이니 참고 바랍니다.
https://www.freecodecamp.org/korean/news/javascript-foreach-how-to-loop-through-an-array/
