console.log() 캘린더 만들기

1. Date 메소드

2. 캘린더 만들기

---

1. Date 메소드

캘린더를 만들기에 앞서 Date 메소드를 알아보려고 한다. 

메소드	설명	값의 범위
Date.now()	1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초(millisecond) 단위의 정수로 반환	-
getFullYear()	현재 연도를 4비트의 숫자(YYYY)로 반환	YYYY
getDate()	현재 날짜에 해당하는 숫자를 반환	1 ~ 31
getDay()	현재 요일에 해당하는 숫자를 반환 (일요일은 0, 토요일은 6)	0 ~ 6
getTime()	1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초(millisecond) 단위로 환산한 값을 숫자로 반환	-
getMonth()	현재 월에 해당하는 숫자를 반환	0 ~ 11
getHours()	현재 시각에 해당하는 숫자를 반환	0 ~ 23
getMinutes()	현재 시각의 분에 해당하는 숫자를 반환	0 ~ 59
getSeconds()	현재 시각의 초에 해당하는 숫자를 반환	0 ~ 59
getMilliSeconds()	현재 시각의 밀리초에 해당하는 숫자를 반환	0 ~ 999

 

위의 표에서 get으로 시작하는 메소드를 사용하려면 new Date()로 Date 객체를 생성해주어야 한다.

 

new Date()를 인수 없이 호출하면 현재 날짜와 시간이 저장된 Date 객체가 반환된다.

 

Date.now()는 new Date().getTime()과 의미론적으로 동일하지만 중간에 Date 객체를 만들지 않는다는 점이 다르다. (new Date().getTime()를 사용하는 것보다 빠르다.)

 

 

2. 캘린더 만들기

[그림 1] 콘솔 창에 나타나는 모습

목표는 콘솔 창에 원하는 달의 달력을 [그림 1]과 같이 출력되도록 구현하는 것이다.

 

[그림 2] 원하는 달의 달력을 출력하는 스크립트

인수 y와 m에 각각 보고싶은 달력의 연도, 월을 넣어서 함수를 실행시키면 달력이 출력된다.

 

일단 콘솔 창에 나타나는 위의 2줄은 연도, 월, 요일으로 동일하기 때문에 console.log() 두 줄을 눈 감고도 작성할 수 있다.

진짜 문제는 1부터 30 혹은 31 (2월의 경우 1부터 28 혹은 29)의 숫자를 각 월의 달력에 맞춰서 어떻게 출력할 것인가이다.

 

먼저, 각 월의 1일이 무슨 요일인지 알기 위해 getDay() 메소드를 사용했다. 예를 들어 2022년 1월은 1일이 토요일이고, 2022년 2월은 1일이 화요일이다. firstDay라는 변수를 선언하여 출력해야 하는 달의 1일이 무슨 요일인지에 따라 0~6의 숫자를 할당하도록 했다.

 

다음으로, 각 월마다 끝나는 숫자를 맞춰주기 위해 getDate()메소드를 사용했다. 예를 들면 1월이라면 31일까지 출력하고, 4월이면 30일까지 출력하는 것이다. lastDate라는 변수를 선언하여 출력해야 하는 달의 마지막 일의 숫자를 할당하도록 했다.

 

이제 약 30개의 숫자를 출력해야 하는데, 각 줄을 row 변수로 선언했다. for문을 돌려서 i가 firstDay보다 작을 때까지 숫자 1 앞에 빈 칸으로 채워지도록 했다. 예를 들어 2022년 1월 1일은 토요일이므로 firstDay에 할당된 값은 6이고, for문이 6번 반복되기 때문에 빈칸이 6번 채워지고 그 뒤에 숫자 1이 오게 되므로 출력 결과에서는 '토'의 바로 아래 위치에 올 것이다.

 

두 번째 for문은 lastDate만큼 반복되는데, if문으로 숫자가 10 이상일 경우 숫자 사이의 공백을 한 칸으로 하고, 10 미만일 경우 숫자 사이의 공백을 두 칸으로 해서 달력의 행과 열이 잘 맞춰지도록 했다.

 

그리고, firstDay+j 의 값이 7의 배수일 경우 row를 출력한 뒤, row는 ''으로 재할당하여 다음 줄을 만들어가도록 했다.

 

해당하는 월의 마지막 날까지 숫자를 출력하고 끝나야 하기 때문에 else if 문으로 j가 lastDate일 때 row를 출력하고 row를 ''으로 재할당하게 해주었다.