Day.js 라이브러리로 두 시간의 차이(diff) 구하는 방법

JavaScript에서 날짜와 시간을 다룰 때 Day.js는 가볍고 직관적으로 사용할 수 있는 인기 라이브러리입니다. 이 글에서는 Day.js의 diff() 메서드를 활용해 두 시간 사이의 차이를 계산하는 방법을 예제와 함께 살펴보겠습니다.

시간 데이터 준비하기

먼저 다음과 같은 시작 시간과 종료 시간 데이터가 있다고 가정해 보겠습니다.

var startHour = dayjs().hour(10)
var endHour = dayjs().hour(22)

dayjs()는 현재 시각을 기준으로 Day.js 객체를 생성하며, hour() 메서드는 해당 객체의 시간(hour) 값을 지정된 숫자로 설정합니다. 즉, 위 코드는 오전 10시와 오후 10시(22시)라는 두 개의 시간 데이터를 만드는 것입니다.

diff() 메서드로 차이 구하기

두 시간의 차이를 구하려면 diff() 메서드를 사용하면 됩니다. 이 메서드는 첫 번째 인자로 비교 대상이 되는 Day.js 객체를, 두 번째 인자로 비교 단위(예: "hours", "minutes", "days")를 전달받아 그 차이를 숫자로 반환합니다.

예제 코드

전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.20/dayjs.min.js"></script>
<script>
    var startHour = dayjs().hour(10)
    var endHour = dayjs().hour(22)
    console.log("The hours difference is=" + endHour.diff(startHour, "hours"));
</script>
</html>

코드에서 핵심 부분은 endHour.diff(startHour, "hours")입니다. 종료 시간에서 시작 시간을 빼고, 그 결과를 "시간(hours)" 단위로 계산하여 콘솔에 출력합니다.

프로그램 실행 방법

위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하세요.

실행 결과

프로그램을 실행하면 브라우저 콘솔에 다음과 같은 결과가 출력됩니다.

Day.js 라이브러리로 두 시간의 차이(diff) 구하는 방법

오전 10시부터 오후 10시까지는 정확히 12시간이므로, 콘솔에는 "The hours difference is=12"가 표시됩니다. 이처럼 diff() 메서드를 사용하면 복잡한 계산 없이도 두 시점 간의 차이를 손쉽게 구할 수 있습니다.