[JavaScript] Date.UTC()

Data.UTC()

• Date.UTC 함수는 JavaScript에서 사용되는 함수로, 특정 날짜와 시간을 나타내는 유닉스 타임스탬프를 밀리초 단위로 반환합니다.

• 이는 협정 세계시(UTC, Coordinated Universal Time)를 기준으로 합니다. 주로 날짜 및 시간을 생성할 때 사용됩니다.

• Date.UTC 함수는 전역 함수이기 때문에 Date 객체 인스턴스를 생성하지 않고도 호출할 수 있습니다.

구문

Date.UTC(year, month, day, hour, minute, second, millisecond)

• 여기서 각 매개변수는 다음을 나타냅니다

  • year: 연도를 나타내는 4자리 숫자.

  • month: 월(0부터 11, 0이 1월, 11이 12월).

  • day: 일. (1부터 31까지)

  • hour: 시간. (0부터 23까지)

  • minute: 분. (0부터 59까지)

  • second: 초. (0부터 59까지)

  • millisecond: 밀리초. (0부터 999까지)

• 주의할 점

  • month 매개변수는 0부터 시작합니다

    • 즉, 0은 1월, 11은 12월

  • day, hour, minute, second, millisecond는 선택 사항입니다.

    • 이 중 생략된 매개변수는 기본값이 0으로 설정됩니다.

예시

// 2023년 10월 5일 오후 3시 24분 0초에 해당하는 유닉스 타임스탬프
const utcTimestamp = Date.UTC(2023, 9, 5, 15, 24);
console.log(utcTimestamp); // 1696527840000



const date = new Date(Date.UTC(2023, 9, 5, 15, 24));
console.log(date.toUTCString()); // "Thu, 05 Oct 2023 15:24:00 GMT"

Date.prototype.getTimezoneOffset()

출처

• UTC(협정세계시)와 시스템이 속해 있는 지역의 시간의 차이인 시간대를 리턴

• number, 분, 리턴되는 시간은 일정하지 않는데 국가별로 섬머타임을 실시하는 경우가 있기 때문이다.

• 영국의 그리니치 천문대를 기준으로 지역에 낮과 밤에 대한 차이가 발생하는데, 이를 인위적으로 조정하기 위해 고안된 시간의 구분선을 시간대라고 하고 아래와 같이 표기한다.

  • UTC+시간대, 대한민국은 UTC+9

// 호스트 장치의 현재 시간대 오프셋 가져 오기
var x = new Date();
var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;

// 2016 년 국제 노동절 (5 월 1 일)에 대한 시간대 오프셋 가져 오기
var labourDay = new Date(2016, 4, 1);
var labourDayOffset = labourDay.getTimezoneOffset() / 60;

Hightcharts에서의 datetime

• Highcharts에서 datetime 타입의 데이터를 사용하는 경우, 날짜와 시간을 대표하는 값으로 타임스탬프(밀리초 단위의 유닉스 시간)를 사용합니다.

• 유닉스 시간은 1970년 1월 1일 00:00:00 UTC부터 경과한 밀리초 단위 시간입니다.

  • 예를 들어, Highcharts에 datetime 타입의 데이터를 사용하여 시계열 데이터를 시각화할 때 다음과 같은 방식으로 데이터를 준비할 수 있습니다.

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sample DateTime Data'
    },
    xAxis: {
        type: 'datetime'
    },
    series: [{
        name: 'Example Series',
        data: [
            [Date.UTC(2023, 0, 1), 29.9], // 2023년 1월 1일
            [Date.UTC(2023, 1, 2), 71.5], // 2023년 2월 2일
            [Date.UTC(2023, 2, 3), 106.4] // 2023년 3월 3일
        ]
    }]
});

• 위의 예시에서 각 데이터 포인트는 배열로 제공되며, 첫 번째 요소는 유닉스 타임스탬프를 나타내는 밀리초 값입니다.

  • Date.UTC(year, month, day) 함수를 사용하여 타임스탬프 값을 생성하고 두 번째 요소는 해당 시점의 값을 나타냅니다.

• 참고할 점

  1. Date.UTC 함수의 월(month) 값은 0부터 시작합니다. 즉, 0은 1월이고, 11은 12월입니다.

  2. datetime 타입의 x축을 사용하면 Highcharts는 자동으로 시간 및 날짜 형식을 처리하고 적절한 레이블을 생성합니다.

  3. 데이터를 밀리초 단위의 유닉스 타임스탬프 형태로 제공해야 합니다.

이 포맷을 사용함으로써 Highcharts는 정확한 날짜 및 시간에 맞게 데이터를 시각화할 수 있습니다.