JavaScript 로 날짜 차이 (초) 계산 방법 - 튜토리얼

소개

이 랩에서는 JavaScript 를 사용하여 두 날짜 간의 차이를 초 단위로 계산하는 방법을 살펴봅니다. 날짜와 시간을 다루는 방법을 이해하는 것은 많은 웹 애플리케이션에 필수적입니다. 두 개의 Date 객체를 입력으로 받아 두 객체 간의 시간 차이를 초 단위로 반환하는 함수를 만들 것입니다. 이 기술은 시간 간격 측정, 기간 계산 또는 타이머 생성 등 다양한 애플리케이션에 유용합니다. 이 랩을 마치면 JavaScript Date 객체와 시간 계산을 효율적으로 수행하는 방법에 대한 이해가 높아질 것입니다.

JavaScript Date 객체 시작하기

JavaScript 는 날짜와 시간을 다룰 수 있는 내장 Date 객체를 제공합니다. 날짜 간의 차이를 계산하기 전에 먼저 JavaScript 에서 Date 객체를 생성하고 사용하는 방법을 이해해 보겠습니다.

Node.js 환경 시작하기

대화형 Node.js 환경을 열어 시작해 보겠습니다.

WebIDE 상단의 Terminal 메뉴를 클릭하여 터미널을 엽니다.
다음 명령을 입력하고 Enter 키를 누릅니다.

node

이제 JavaScript 대화형 환경에 있음을 나타내는 Node.js 프롬프트 (>) 가 표시됩니다. 이를 통해 터미널에서 JavaScript 코드를 직접 실행할 수 있습니다.

node-prompt

Date 객체 생성하기

JavaScript 에서 새로운 Date 객체를 여러 가지 방법으로 생성할 수 있습니다.

// 현재 날짜 및 시간
let now = new Date();
console.log(now);

// 특정 날짜 및 시간 (년, 월 [0-11], 일, 시, 분, 초)
let specificDate = new Date(2023, 0, 15, 10, 30, 45); // 2023 년 1 월 15 일, 10:30:45
console.log(specificDate);

// 문자열로부터의 날짜
let dateFromString = new Date("2023-01-15T10:30:45");
console.log(dateFromString);

Node.js 환경에서 각 예제를 입력하고 출력을 관찰해 보세요.

JavaScript 에서 월은 0 부터 시작하므로 1 월은 0, 2 월은 1 등으로 시작합니다.

Date 객체에서 타임스탬프 얻기

JavaScript 의 모든 Date 객체는 내부적으로 1970 년 1 월 1 일 (UTC) 이후 경과된 밀리초 수를 시간으로 저장합니다. 이를 타임스탬프 (timestamp) 라고 합니다.

let now = new Date();
console.log(now.getTime()); // 밀리초 단위의 타임스탬프 얻기

이 타임스탬프는 날짜 간의 차이를 계산하는 데 유용합니다.

JavaScript 에서 날짜 계산 이해하기

이제 Date 객체를 생성하는 방법을 이해했으므로 두 날짜 간의 차이를 계산하는 방법을 배워보겠습니다.

JavaScript 에서의 날짜 산술 연산

JavaScript 를 사용하면 Date 객체에 직접 산술 연산을 수행할 수 있습니다. 한 Date 객체에서 다른 Date 객체를 빼면 JavaScript 는 자동으로 이를 타임스탬프 (밀리초) 로 변환하고 뺄셈을 수행합니다.

let date1 = new Date("2023-01-01T00:00:00");
let date2 = new Date("2023-01-01T00:01:00");

let differenceInMilliseconds = date2 - date1;
console.log(differenceInMilliseconds); // 60000 (60 seconds * 1000 milliseconds)

Node.js 환경에서 이 코드를 실행해 보세요. 결과는 60000이어야 하며, 이는 60 초를 밀리초로 나타냅니다.

밀리초를 초로 변환하기

시간 차이를 밀리초에서 초로 변환하려면 1000 으로 나누면 됩니다.

let differenceInSeconds = differenceInMilliseconds / 1000;
console.log(differenceInSeconds); // 60

이 예제에서는 시간 차이가 초 단위로 60 초, 즉 1 분이 됩니다.

날짜 차이 함수 생성하기

이제 개념을 이해했으므로 두 날짜 간의 차이를 초 단위로 계산하는 간단한 함수를 만들어 보겠습니다.

function getDateDifferenceInSeconds(startDate, endDate) {
  return (endDate - startDate) / 1000;
}

// Test the function
let start = new Date("2023-01-01T00:00:00");
let end = new Date("2023-01-01T00:01:30");
let difference = getDateDifferenceInSeconds(start, end);
console.log(difference); // 90 (1 minute and 30 seconds)

Node.js 환경에서 이 함수를 입력하고 실행해 보세요. 결과는 90이어야 하며, 이는 1 분 30 초를 나타냅니다.

화살표 함수를 사용하여 날짜 차이 함수 구현하기

이제 날짜 차이를 계산하는 방법을 이해했으므로 화살표 함수를 사용하여 함수를 보다 간결하게 구현해 보겠습니다.

JavaScript 의 화살표 함수

화살표 함수는 JavaScript 에서 함수를 작성하기 위한 더 짧은 구문을 제공합니다. 화살표 함수 구문을 사용하여 날짜 차이 함수를 다시 작성하는 방법은 다음과 같습니다.

const getSecondsDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / 1000;

이 함수는 이전 함수와 정확히 동일한 작업을 수행하지만 더 깔끔하고 간결한 구문을 사용합니다.

JavaScript 파일 생성하기

함수를 저장하고 테스트하기 위해 JavaScript 파일을 만들어 보겠습니다. Ctrl+D 를 누르거나 .exit를 입력하고 Enter 키를 눌러 Node.js 환경을 종료합니다.

이제 WebIDE 에서 dateDifference.js라는 새 파일을 만듭니다.

왼쪽 사이드바에서 "Explorer" 아이콘을 클릭합니다.
파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택합니다.
파일 이름을 dateDifference.js로 지정하고 Enter 키를 누릅니다.
다음 코드를 파일에 추가합니다.

// Function to calculate difference between two dates in seconds
const getSecondsDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / 1000;

// Test examples
console.log("Example 1:");
console.log(
  getSecondsDiffBetweenDates(
    new Date("2020-12-24 00:00:15"),
    new Date("2020-12-24 00:00:17")
  )
); // Expected output: 2

console.log("\nExample 2:");
console.log(
  getSecondsDiffBetweenDates(
    new Date("2020-12-24 00:00:00"),
    new Date("2020-12-24 00:01:00")
  )
); // Expected output: 60

console.log("\nExample 3:");
console.log(
  getSecondsDiffBetweenDates(
    new Date("2020-12-24 00:00:00"),
    new Date("2020-12-24 01:00:00")
  )
); // Expected output: 3600

Ctrl+S 를 누르거나 File > Save 를 클릭하여 파일을 저장합니다.

JavaScript 파일 실행하기

방금 만든 파일을 실행하려면 터미널에서 다음 명령을 사용합니다.

node dateDifference.js

다음 출력이 표시되어야 합니다.

Example 1:
2

Example 2:
60

Example 3:
3600

이는 함수가 올바르게 작동함을 확인합니다.

첫 번째 예: 00:00:15 와 00:00:17 의 차이는 2 초입니다.
두 번째 예: 00:00:00 과 00:01:00 의 차이는 60 초 (1 분) 입니다.
세 번째 예: 00:00:00 과 01:00:00 의 차이는 3600 초 (1 시간) 입니다.

실용적인 애플리케이션 만들기

이제 날짜 간의 차이를 초 단위로 계산하는 작동하는 함수가 있으므로, 보다 실용적인 애플리케이션을 만들어 보겠습니다. 시작한 이후로 얼마나 많은 시간이 지났는지 계산하는 간단한 타이머를 만들 것입니다.

타이머 애플리케이션 만들기

WebIDE 에서 timer.js라는 새 파일을 만듭니다.

왼쪽 사이드바에서 "Explorer" 아이콘을 클릭합니다.
파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택합니다.
파일 이름을 timer.js로 지정하고 Enter 키를 누릅니다.
다음 코드를 파일에 추가합니다.

// Function to calculate difference between two dates in seconds
const getSecondsDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / 1000;

// Start time - when the script starts running
const startTime = new Date();
console.log(`Timer started at: ${startTime.toLocaleTimeString()}`);

// Function to update and display the elapsed time
function updateTimer() {
  const currentTime = new Date();
  const elapsedSeconds = getSecondsDiffBetweenDates(startTime, currentTime);

  // Format the time as hours:minutes:seconds
  const hours = Math.floor(elapsedSeconds / 3600);
  const minutes = Math.floor((elapsedSeconds % 3600) / 60);
  const seconds = Math.floor(elapsedSeconds % 60);

  const formattedTime = `${hours.toString().padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;

  // Clear the console and display the updated time
  console.clear();
  console.log(`Timer started at: ${startTime.toLocaleTimeString()}`);
  console.log(`Elapsed time: ${formattedTime}`);
}

// Update the timer every second
console.log("Timer is running... Press Ctrl+C to stop.");
const timerInterval = setInterval(updateTimer, 1000);

// Keep the script running
setTimeout(() => {
  clearInterval(timerInterval);
  console.log("\nTimer stopped after 1 minute.");
}, 60000); // Run for 1 minute

Ctrl+S 를 누르거나 File > Save 를 클릭하여 파일을 저장합니다.

타이머 애플리케이션 실행하기

타이머 애플리케이션을 실행하려면 터미널에서 다음 명령을 사용합니다.

node timer.js

타이머가 시작되어 시작된 이후로 얼마나 많은 시간이 지났는지 매초 업데이트됩니다. 타이머는 1 분 후에 자동으로 중지되거나, Ctrl+C 를 눌러 더 일찍 중지할 수 있습니다.

타이머 애플리케이션 이해하기

타이머 애플리케이션이 어떻게 작동하는지 자세히 살펴보겠습니다.

초 단위로 시간 차이를 계산하기 위해 getSecondsDiffBetweenDates 함수를 정의합니다.
스크립트가 실행을 시작할 때 시작 시간을 기록합니다.
다음을 수행하는 updateTimer 함수를 정의합니다.
- 현재 시간을 가져옵니다.
- 시작 시간 이후 경과된 시간을 초 단위로 계산합니다.
- 경과된 시간을 시:분:초 형식으로 지정합니다.
- 형식화된 시간을 표시합니다.
setInterval을 사용하여 updateTimer 함수를 1000 밀리초 (1 초) 마다 실행합니다.
setTimeout을 사용하여 60000 밀리초 (1 분) 후에 타이머를 중지합니다.

이 애플리케이션은 실시간 타이머를 만들기 위해 날짜 차이 함수를 실용적으로 사용하는 것을 보여줍니다.

요약

이 랩에서는 JavaScript 에서 날짜를 사용하는 방법과 두 날짜 간의 차이를 초 단위로 계산하는 방법을 배웠습니다. 다음은 수행한 작업에 대한 요약입니다.

JavaScript Date 객체를 생성하고 조작하는 방법을 배웠습니다.
JavaScript 가 타임스탬프를 사용하여 내부적으로 날짜 산술을 처리하는 방식을 이해했습니다.
두 날짜 간의 차이를 초 단위로 계산하는 함수를 구현했습니다.
날짜 차이 함수를 활용하는 실용적인 타이머 애플리케이션을 만들었습니다.

이러한 기술은 다음과 같은 많은 실제 애플리케이션에 유용합니다.

이벤트에 대한 카운트다운 타이머 만들기
웹 애플리케이션에서 성능 또는 로드 시간 측정
사용자 작업 간의 기간 계산
웹 애플리케이션에서 시간 기반 기능 구현

JavaScript 의 Date 객체는 날짜 및 시간을 처리하는 강력한 도구이며, 시간 차이를 계산하는 방법을 아는 것은 웹 개발자에게 필수적인 기술입니다.

JavaScript 로 날짜 차이 계산하기 (초)

소개