2025 / 02 / 13
오늘 수업 시간에는 Date( ) 객체와 timer 함수에 대해 배웠습니다.
하면서 학교 수업 시간에 배웠던 게 생각나서 나름 괜찮게 수업을 따라간 것 같습니다.
💌 Date( )
Date 객체는 현재 날짜와 시간을 가져오거나, 특정 날짜를 설정하고 계산하는 등의 기능을 제공합니다.
1) 현재 날짜 가져오기
- Date 객체를 생성할 때 아무 인자를 넣지 않으면, 현재 날짜와 시간을 반환합니다.
- today는 현재 날짜와 시간을 포함하는 Date 객체입니다.
- typeof today를 통해 이 객체가 Date 타입임을 확인할 수 있습니다.
let today = new Date();
console.log(today); // 현재 날짜와 시간
console.log(typeof today); // 객체임을 알 수 있음2) 특정 날짜 가져오기
- Date 객체는 문자열이나 숫자를 통해 특정 날짜를 설정할 수 있습니다.
사용 방법 - ①
- "2024-12-06"라는 문자열을 날짜로 변환해 해당 날짜를 date 객체에 저장합니다.
let date = new Date("2024-12-06");
console.log(date); // 2024년 12월 6일사용 방법 - ②
- 2024, 5, 16, 12, 0, 0을 인자로 넣어 날짜와 시간을 설정하는 방식입니다.
- 월은 0부터 시작하므로, 5는 6월을 나타냅니다.
let date1 = new Date(2024, 5, 16, 12, 0, 0);
console.log(date1); // 2024년 6월 16일 12시 0분 0초3) 세부 정보 가져오기
- Date 객체에서 날짜와 시간을 구성하는 다양한 값을 추출할 수 있습니다.
① 년도
let year = date1.getFullYear();
console.log(year); // 2024② 월 (0 ~ 11)
let Month = date1.getMonth();
console.log(Month); // 5 (6월)③ 일
let date2 = date1.getDate();
console.log(date2); // 16④ 요일 (0: 일요일, 1: 월요일, ... 6: 토요일)
let Day = date1.getDay();
console.log(Day); // 0 (일요일)⑤ 시간, 분, 초, 밀리초
let hours = date1.getHours();
console.log(hours); // 12
let minutes = date1.getMinutes();
console.log(minutes); // 0
let Seconds = date1.getSeconds();
console.log(Seconds); // 0
let milliseconds = date1.getMilliseconds();
console.log(milliseconds); // 04) 날짜 수정하기
- Date 객체의 날짜나 시간을 수정할 수 있습니다.
- set 메서드를 사용하여 날짜와 시간을 변경할 수 있습니다.
- date3 객체의 년도, 월, 일, 시간 등을 새로 설정하고 있습니다.
let date3 = new Date();
date3.setFullYear(2024);
date3.setMonth(6); // 7월
date3.setDate(16);
date3.setHours(12);
date3.setMinutes(0);
date3.setMilliseconds(1000);
console.log(date3);5) 날짜 계산하기
- 날짜를 더하거나 빼는 작업을 할 수 있습니다.
date3.setDate(date3.getDate() + 1); // 1일 더하기
console.log(date3);
date3.setMonth(date3.getMonth() + 1); // 1달 더하기
console.log(date3);6) 날짜 차이 계산하기
- 두 날짜의 차이를 계산할 때, Date 객체를 활용하여 차이를 밀리초 단위로 계산합니다.
- diff는 두 날짜 사이의 밀리초 차이를 계산합니다.
- 그 후 이를 다른 단위로 변환하여 사용합니다.
- Math.ceil을 사용하여 남은 날짜를 반올림으로 계산할 수 있습니다.
let date4 = new Date("2025-02-16");
let today1 = new Date();
// 날짜 차이의 시간을 밀리초로 변환
let diff = date4 - today1;
console.log(diff); // 밀리초 차이
// 밀리초를 초, 분, 시간, 일로 변환
let diffSecond = diff / 1000;
console.log(diffSecond); // 초 차이
let diffminutes = diffSecond / 60;
console.log(diffminutes); // 분 차이
let diffHours = diffminutes / 60;
console.log(diffHours); // 시간 차이
let diffDays = diffHours / 24;
console.log(diffDays); // 일 차이
let remainDays = Math.ceil(diff / (1000 * 60 * 60 * 24));
console.log(remainDays); // 남은 일 수7) 추가 예시
날짜 계산을 통한 특정 이벤트까지 남은 일 계산하기
- 특정 이벤트 날짜까지 얼마나 남았는지 계산할 수 있습니다.
let targetDate = new Date("2025-12-31"); // 2025년 12월 31일까지 남은 날짜 계산
let today = new Date(); // 현재 날짜
let timeRemaining = targetDate - today; // 밀리초 차이
let daysRemaining = Math.ceil(timeRemaining / (1000 * 60 * 60 * 24));
console.log(`남은 일수: ${daysRemaining}일`);💌 setTimeout( )
일정 시간이 지난 후 한 번만 실행
- 일정 시간이 지난 후 한 번만 실행되는 타이머를 설정하는 방법입니다.
- 시간은 밀리초 단위로 설정됩니다.
1) 사용 예시
- 1000ms(1초) 후에 콜백 함수인 ( ) => { console.log("Hello, World!"); }를 실행합니다.
- 1초 뒤에 "Hello, World!"가 출력됩니다.
setTimeout(() => {
console.log("Hello, World!");
}, 1000); // 1000ms(1초) 후에 실행2) 인수 전달
- 첫 번째 인수는 실행할 콜백 함수이고, 두 번째 인수는 지연 시간(밀리초 단위)입니다.
- 콜백 함수에 인수를 전달하고 싶다면 세 번째 인수 이후로 추가할 수 있습니다.
- setTimeout( )은 "안녕"과 "이한이에요."를 콜백 함수에 전달하는 방식입니다.
setTimeout((word, word2) => {
console.log(`${word} ${word2}`);
}, 1000, "안녕", "이한이에요.");
3) 타이머 취소
- 설정된 타이머를 취소하고 싶다면 clearTimeout( )을 사용합니다.
- setTimeout( )에 의해 반환된 타이머 ID를 인수로 받아 타이머를 취소합니다.
- 2초 후에 실행될 예정이었던 타이머를 clearTimeout( )으로 취소했습니다.
const timerId = setTimeout(() => {
console.log("이 메시지는 실행되지 않습니다.");
}, 2000);
clearTimeout(timerId); // 2초 후 실행될 타이머를 취소합니다.💌 setInterval( )
일정 간격으로 반복 실행
- 주어진 시간 간격마다 반복적으로 실행되는 타이머를 설정합니다.
- 밀리초 단위로 시간을 설정합니다.
1) 사용 예시
- 1초마다 "반복 실행 중..."라는 메시지를 콘솔에 출력합니다.
setInterval(() => {
console.log("반복 실행 중...");
}, 1000); // 1000ms(1초) 간격으로 계속 반복 실행2) 인수 전달
- 첫 번째 인수는 실행할 콜백 함수이고, 두 번째 인수는 반복 간격(밀리초 단위)입니다.
- 이 함수는 중단하기 전까지 계속해서 실행됩니다.
3) 타이머 취소
- clearInterval( )을 사용하여 반복을 중지할 수 있습니다.
- 반복이 일정 횟수 이상 이루어지면, clearInterval( )로 타이머를 멈추는 방식입니다.
- 2초 후에 실행될 예정이었던 타이머를 clearTimeout( )으로 취소했습니다.
- 1초 간격으로 "count : n"이 출력되며, count가 5를 초과하면 clearInterval( )이 호출되어 반복을 멈추게 됩니다.
let count = 0;
const timeId = setInterval(() => {
console.log("count : " + count);
count++;
if (count > 5) {
clearInterval(timeId); // 5번 출력 후 반복 종료
}
}, 1000);💌 timer 함수 정리
setTimeout( )과 setInterval( )의 차이를 표로 정리해보았습니다.
| 특징 | setTimeout( ) | setInterval( ) |
|---|---|---|
| 목적 | 일정 시간이 지난 후 한 번만 실행 | 일정 시간 간격으로 반복적으로 실행 |
| 실행 시간 | 지정한 시간이 지난 후 단 한 번 실행 | 지정한 시간 간격으로 반복 실행 |
| 취소 방법 | clearTimeout(timerId) | clearInterval(timerId) |
| 지속 시간 | 단 한번 실행되므로, 지속되지 않음 | 반복 실행되므로, 지속적으로 실행됨 |
💌 실습 예제
실시간 시간 표시하기
- 시간이 실시간으로 바뀌도록 작성합니다.
- 시간이 10 미만일 경우 앞에 0을 붙여 2자리로 표시합니다.
1) 현재 시간 표시
- new Date( )를 사용하여 현재 날짜와 시간을 가져옵니다.
- getHours( ), getMinutes( ), getSeconds( )를 사용하여 시, 분, 초를 추출합니다.
- 시간을 2자리 형식으로 표시하기 위해 삼항 조건 연산자를 사용합니다.
document.querySelector("span").innerHTML = date;로 계산된 시간을span태그에 동적으로 삽입하여 화면에 표시합니다.
function time_infor() {
let today = new Date();
let Hours = today.getHours();
let minutes = today.getMinutes();
let Seconds = today.getSeconds();
let date = `${Hours < 10 ? `0${Hours}` : Hours} : ${
minutes < 10 ? `0${minutes}` : minutes
} : ${Seconds < 10 ? `0${Seconds}` : Seconds}`;
document.querySelector("span").innerHTML = date;
}2) 타이머 설정 및 실행
setTimeout( )
- 한 번만 실행되는 타이머를 설정하는 코드입니다.
- 첫 번째 실행을 0ms 후에 실행하도록 설정했습니다.
- 실제로는 페이지가 로드되자마자 즉시 실행됩니다.
let time = setTimeout(() => {
time_infor();
}, 0); // 0ms 후에 즉시 실행setInterval( )
- 첫 번째 setTimeout( )이 0ms로 즉시 시간을 표시한 후, setInterval( )이 1초 간격으로 계속해서 시간을 갱신해 줍니다.
let timeID = setInterval(() => {
time_infor();
}, 1000); // 1000ms (1초)마다 계속해서 실행27일차 후기
- 사용해봤던 내용이라서 이해하는 것이 어렵지는 않았습니다.
- timer 함수를 배우면서 실습도 함께하니 확실히 이해할 수 있어서 좋은 것 같습니다.
- 문제 풀 때, 시간을 자동으로 업데이트하기 위해서는 날짜를 가져온 Date( ) 객체를 계속 갱신해야 하는데... 동적으로 삽입하는 부분만 넣어서 좀 헤맸습니다. ૮꒰˶´ᜊ` ˶꒱ა
- 그래도.. 지금까지 한 실습 문제 중에서는 가장 쉬운 것 같습니다. ପ(｡ᵔ ⩊ ᵔ｡)ଓ
૮꒰ ྀི〃´꒳`〃꒱ა
좋은 글 잘 봤습니다 ㅎㅎ