[Js] JavaScript로 날짜 간 차이 계산하기 - 당일부터 X박 Y일까지 표시하기

서론

날짜 관련 작업은 웹 개발에서 흔히 마주치는 과제 중 하나입니다. 특히, 여행 계획 앱이나 이벤트 스케줄링 툴 등에서 시작 날짜와 종료 날짜 사이의 기간을 계산해야 할 때가 많습니다. 오늘은 JavaScript를 사용하여 날짜 간 차이를 계산하고, 그 결과를 당일 또는 X박 Y일과 같은 형식으로 표현하는 방법에 대해 알아보겠습니다.

 

JavaScript의 Date 객체는 날짜와 시간을 다루는 데 사용됩니다. 이 객체를 활용해 날짜 간의 차이를 계산할 수 있는데, 우리의 예제에서는 특히 new Date() 생성자를 사용하여 문자열로부터 날짜 객체를 생성하는 방법에 주목할 것입니다.

 

함수 구현

function calculateDuration(startDateStr, endDateStr) {
    const startDate = new Date(startDateStr);
    const endDate = new Date(endDateStr);

    const diffTime = endDate - startDate;
    const diffDays = diffTime / (1000 * 60 * 60 * 24);

    if (diffDays === 0) {
        return "Same day";
    } else {
        return `${diffDays + 1} days and ${diffDays} nights`;
    }
}

이 함수는 크게 다음과 같은 단계로 구성됩니다:

1. 날짜 파싱: 입력된 시작 날짜와 종료 날짜 문자열을 Date 객체로 변환합니다.
2. 차이 계산: 두 날짜 간의 차이를 밀리초 단위로 계산한 뒤, 이를 일수로 변환합니다.
3. 출력 형식 설정: 계산된 일수를 바탕으로, 동일한 날짜인 경우는 당일, 그렇지 않은 경우는 X박 Y일 형식의 문자열을 반환합니다.

예제 사용

• calculateDuration("2024-01-09", "2024-01-09") 호출 결과: 당일
• calculateDuration("2024-01-09", "2024-01-11") 호출 결과: 2박3일

활용 시나리오

이 함수는 여행 계획 앱에서 여행 기간을 사용자에게 명확하게 보여줄 때나, 이벤트 스케줄링 앱에서 이벤트 기간을 계산할 때 유용하게 사용될 수 있습니다. 또한, 일반적인 웹 개발에서 날짜 관련 로직을 구현할 때 기본적인 참고점으로 삼을 수 있습니다.

 

마치며

날짜 간의 차이를 계산하고 그 결과를 쉽게 이해할 수 있는 형식으로 표현하는 것은 사용자 경험을 향상시키는 데 중요한 역할을 합니다. JavaScript의 Date 객체와 간단한 수학적 계산을 사용하여, 우리는 이러한 작업을 손쉽게 수행할 수 있습니다. 해당 내용이 여러분의 프로젝트에 도움이 되길 바랍니다!