[새싹x코딩온] 웹 개발자 부트캠프 과정 4주차 회고 | 자바스크립트 Date 객체를 이용해서 시계와 달력을 만들어보기

1. 들어가며

• JavaScript에서 Date 객체는 날짜와 시간에 관한 정보를 얻기 위한 객체다. 이 객체를 이용해서 시계와 달력을 만들어보고자 한다.  

2. Date 객체

Date 객체

Date 객체는 날짜와 시간을 위한 메서드를 제공하는 객체이며 생성자 함수다.

일반적으로 new 키워드로 객체를 생성해서 사용한다.

new Date() // 객체 생성방법
let today = new Date() // 변수에 할당해서 사용할 수 있음

요일, 월, 일, 년, 시간, 표준시 순으로 값을 반환한다.

 

Date 생성자 함수에 연, 월, 일 시, 분 등을 의미하는 숫자를 인수로 전달하면 날짜와 시간을 나타내는 Date 객체를 반환한다. 이 때 연과 월은 반드시 지정해야 한다.

let date = new Date(2024, 5, 4)

 

이 때, 월은 숫자 0부터 1월로 반환하기 때문에 5는 6월로 반환했다.

 

 

Date 객체에 정의된 메서드를 통해 시간 및 날짜에 대한 정보를 가져올 수 있다.

new Date().getFullYear() // 연도값 반환 : 2024

다음 표는 시간 및 날짜에 대한 정보를 가져올 수 있는 메서드다.

(이것보다 더 많지만 시계와 달력 만들때 필요한 것만 적어놨다)

메서드	설명
getFullYear()	현재 연도를 4자리 숫자로 표시
getMonth()	0 ~ 11 사이 숫자로 월 표시  0부터 1월 시작
getDate()	1 ~ 31일 숫자로 일을 표시
getDay()	0 ~ 6 숫자로 요일 표시  0부터 일요일 6은 토요일
getHours()	0 ~ 23 숫자로 시를 표시
getMinutes()	0 ~ 59 숫자로 분을 표시
getSeconds()	0 ~ 59 숫자로 초를 표시

Date 객체로 시계 만들기

현재 웨일 브라우저에서 사용하고 있는 배경화면의 시계모습이다.

위의 사진처럼 시간(시,분,초), 오전/오후, 연도, 월, 일, 요일 을 표시한 시계를 만들어볼 것이다.

시계는 1초단위로 움직이기 때문에 타이머 함수인 setInterval() 함수도 함께 사용할 것이다.

 

1) 날짜 가져오기

const today = new Date();

Date 객체를 이용해서 현재 날짜를 가져온다

 

2) 날짜 표시하기

const clock = document.querySelector(".clock")
const hour = clock.querySelector(".clock-hour")
const min = clock.querySelector(".clock-min")
const ampm = clock.querySelector(".ampm")
const sec = clock.querySelector(".sec")
const day = document.querySelectorAll("h3>span")
let week = ["일","월","화","수","목","금","토"]

day[0].innerText = today.getFullYear(); // 오늘연도 출력
day[1].innerText = today.getMonth() + 1 // 오늘월 출력
day[2].innerText = today.getDate() // 오늘날짜 출력
day[3].innerText = week[today.getDay()] // 오늘 요일 출력

getDay() 요일정보를 0 ~ 6의 숫자로 값을 반환하기 때문에 요일에 대한 배열을 만들고, 요일 정보에 대한 숫자값을 배열 인덱스로 넣어서 문자로 출력했다

 

3) 시간 표시하기

let H = today.getHours()
hour.innerText = String(H).padStart(2, "0") // 현재시간 출력

// 오전/오후 표시
let noon = "AM"
if(H>12){
 H -= 12
 noon = "PM"
}

ampm.innerText = noon

min.innerText = String(today.getMinutes()).padStart(2, "0") // 현재 분 출력
sec.innerText = String(today.getSeconds()).padStart(2, "0") // 현재 초 출력

padstart()를 이용해서 두글자로 만들고, 두글자가 아니면 앞에 0을 만들어서 두글자로 만드는 방법을 활용했다.

 오전, 오후를 따로 표시하기 위해 if문을 사용해서 getHours()로 얻은 값이 12보다 크다면 그 값에서 12를 빼주고

"AM"으로 할당되어 있는 변수값을 "PM"으로 재할당했다. 

 

4) 시계 출력하기

setInterval(getClock, 1000)

시계는 보통 1초마다 움직이기 때문에 setInterval 타이머함수를 이용해서 1초마다 getClock이라는 위에서 정의한 코드들의 함수를 호출하도록 설정했다.

 

 

코드와 결과는 아래와 같다. 

See the Pen Untitled by dain (@dadain) on CodePen.

 

 

Date 객체로 달력 만들기

네이버 웹페이지에 있는 달력이다.

위의 달력과 유사하게 연도, 월이 표시되고

오늘 날짜는 따로 동그랗게 표시가 되어 있는 달력을 만들 예정이다.

 

1) 날짜 가져오기

Date 객체를 이용해서 현재 날짜를 가져온다

// 변경할 현재 날짜
const thisDate = new Date();
// 오늘 날짜
const today = new Date();

이 때 날짜를 두번 가져오는데 하나는 날짜를 변경할 기준이 되는 날짜고 하나는 오늘 날짜를 구하기 위함이다.

 

2) 달력 날짜 계산하기

원하는 달력을 만들기 위해서 아래의 정보가 필요하다

1. 지날 달의 마지막 날짜 -> 달력의 전달 끝쪽의 날짜 표시를 위함이다.

2. 이번 달의 첫째 날짜 -> 달력의 전달 세팅을 위한 요일을 구하기 위함이다.

3. 이번 달의 마지막 날짜 -> 현재 달력 날짜 세팅을 위함이다.

 

※  Date객체를 생성할 때 날짜를 0으로 지정하면 저번달의 마지막 날짜를 가진 date 객체가 반환된다.

예를 들면 2024년 6월의 마지막 날짜값을 반환하려면 new Date(2024, 6, 0)2024년 5월의 마지막 날짜값을 반환하려면 new Date(2024, 5, 0) 이런식으로 하면 된다.

// 저번달의 마지막 날짜
const prevLast = new Date(thisDate.getFullYear(), thisDate.getMonth(), 0)
const prevDate = prevLast.getDate() // 저번달의 마지막 날짜
const prevDay = prevLast.getDay() // 저번달의 마지막 요일

// 이번달 첫째 날짜
const thisFirst = new Date(thisDate.getFullYear(), thisDate.getMonth(), 1)
const firstDate = thisFirst.getDate() // 이번달 첫번째 날짜
const firstDay = thisFirst.getDay() // 이번달 첫번째 요일

// 이번달 마지막 날짜
const thisLast = new Date(thisDate.getFullYear(), thisDate.getMonth()+1, 0)
const endDate = thisLast.getDate(); // 이번달 마지막 날짜
const endDay = thisLast.getDay() // 이번달 마지막 요일

 

3) 달력 출력하기

먼저 달력을 만들기 위해 달력 날짜를 넣기 위한 빈 배열을 만든다.

달력의 출력순서는 (지난달의 날짜들 - 이번달의 날짜들 - 다음달의 날짜들) 이다.

for문을 이용해서 지난 달의 날짜들은 unshift()로 배열 앞쪽에 넣는다.

이번 달과 다음 달의 날짜들은 push()를 이용해서 배열에 날짜 요소를 추가해준다.

// 날짜 넣을 배열
let dateArr = []; 


// 저번달 날짜 채우기
// 이번 달의 첫날이 일요일이 아니면 저번달에 대한 날짜들이 배열에 담기도록 설정
if(firstDay!==0){
    for(let i = 0; i<firstDay;i++){
        dateArr.unshift(`<span style="color:#ccc;">${prevDate - i}</span>`)
    }
}

// 이번달 날짜 채우기
// 1일부터 시작해서 이번달의 마지막 날짜까지 반복문을 돌려서 배열에 담기도록 설정
for(let i = 1; i <=endDate;i++){
    dateArr.push(i);
}

// 다음달 날짜 채우기
for(let i = 1; i < 18; i++){
    dateArr.push(`<span style="color:#ccc;">${i}</span>`)
}

 

여기서 지난 달과 다음 달은 이번 달의 달력에서 회색으로 표시하기 위해 스타일을 따로 지정했다.

그런 다음 innerHTML 을 이용해서 생성된 배열이 html 내에서 출력되게 해줬다.

let hcode = '';

// 날짜 만큼 배열 정보로 세팅
for(let i = 0; i < 42; i++){
   if(today.getDate()===dateArr[i] && 
    today.getMonth()===thisDate.getMonth() && 
    today.getFullYear()===thisDate.getFullYear()){
        hcode += `<div class="date">${dateArr[i]}<span class="today"></span></div>`
    } else {
        hcode += `<div class="date">${dateArr[i]}</div>`
    }
}

dates.innerHTML = hcode

달력에 6주를 출력하기 위해 7 * 6 인 42를 세팅했다.

오늘 날짜임을 표시하기 위해 위에서 지정한 today변수를 이용해서 오늘 날짜와 표시되어 있는 날짜를 비교하여, 오늘 날짜면 today 클래스가 있는 태그를 추가해서 클래스에 지정되어 있는 스타일이 적용되게 해놓았다.

 

4) 추가 기능

달력에 이번년도 및 이번달을 표시하고 화살표 버튼을 누르면 이전 달 혹은 다음 달로 이동하게 세팅해보았다.

 

yearTitle.innerText = thisDate.getFullYear();
monthTitle.innerText = thisDate.getMonth()+1;

이번년도와 이번달을 표시하는 것은 간단하다. 이번년도는 getFullYear()를 사용해서 값을 받으면 되고

이번 달은 앞에서 말했듯이 getMonth는 0부터 1월이 시작하기 때문에 +1을 해주면 된다.

 

// 버튼 눌렀을때 이전달 혹은 다음달로 이동
const prevCal = () => {
    thisDate.setMonth(thisDate.getMonth()-1);
    initCal()
}

const nextCal = () => {
    thisDate.setMonth(thisDate.getMonth()+1)
    initCal()
}

prevBtn.addEventListener("click", prevCal)
nextBtn.addEventListener("click", nextCal)

버튼을 눌렀을 때 이전달 혹은 다음달로 이동하는 것은 클릭 이벤트 함수를 사용했다.

setMonth 는 Date 객체에서 월을 설정할 수 있는 메서드다. (0 ~ 11 사이로 설정한다.)

지난 달은 설정되어 있는 thisDate에 -1을 다음 달은 +1을 해주면서 월을 바뀌도록 설정했다.

 

코드의 결과는 아래와 같다. 

 

 

See the Pen calendar by dain (@dadain) on CodePen.

 

 

 

 

3. 마치며

시계를 만드는것이나 달력을 만드는 것이나 프레임워크를 사용하면 더 간단하게 만들 수 있다.

하지만 Date 객체를 배우고 이것을 활용하는 것에 의의를 두기 위해 다소 번거롭지만 시계와 달력을 만들었다.

한가지 아쉬운 점은 달력에 공휴일 표시는 못했다는 점인데 아마 공휴일 정보가 있는 API 같은 있지 않을까 싶다.

나중에 더 공부하면서 찾아봐야겠다.

 

4. Reference

1. 코딩온 강의 자료

 

2. 모던 자바스크립트 Deep Dive

http://product.kyobobook.co.kr/detail/S000001766445?LINK=NVB&NaPm=ct%3Dlwt20us8%7Cci%3D3eeae87413d188962c2189bfc03af972cec288fd%7Ctr%3Dboksl1%7Csn%3D5342564%7Chk%3D0a86971807241e21311b2f82ad997d61e4c24ab4

모던 자바스크립트 Deep Dive | 이웅모 - 교보문고

 

3. 노마드코더

https://youtu.be/ZcS3m4451WA?si=_TJE_jbTOtoOGo9i 

 

4. 코딩애플

https://youtu.be/oWSNOrBbOIU?si=EULLvA9z48xZ_yYT

 

5. https://songsong.dev/entry/Javascript%EB%A1%9C-%EB%8B%AC%EB%A0%A5-%EB%A7%8C%EB%93%A4%EA%B8%B0

자바스크립트로 달력 만들기