[JS] 자바스크립트 경과 시간 표시 / UTC / ISO 8601

Date 객체 톺아보기

---

유닉스 타임스탬프

자바스크립트에서 Date 객체는 유닉스 타임스탬프를 사용한다.

 

SNS을 보면 “1분 전 게시", “방금 전 게시" 같은 경과일로 포스팅 날짜를 표시하는 것을 자주볼 수 있다. 경과일은 Date 객체의 getTime() 메서드를 이용해 변환한 밀리초와 현재 시간의 밀리초 차이를 계산하는 방법으로 구현할 수 있다.

 

getTime() 메서드는 1970년 1월 1일 0시 0 분 0초(UTC)부터 현재까지의 시간을 밀리초 단위로 환산한 값을 반환한다. 이를 유닉스 시간(유닉스 타임스탬프)으로 부른다. 1000밀리초(millisecond)는 1초(second)다.

const date = new Date();

console.log(date); // Tue Jun 15 2021 15:26:07 GMT+0900 (대한민국 표준시)
date.getTime(); // 1623738367301

 

getTime()으로 가져온 밀리초 시간을 유닉스 시간 계산기로 확인해보면 동일한 것을 알 수 있다.

 

유닉스 시간 계산기 결과값과 동일하다

new Date(1623738367301); // Tue Jun 15 2021 15:26:07 GMT+0900 (대한민국 표준시)

 

ISO 8601

UTC는 1972년 1월 1일부터 시행된 국제 표준시다. UTC는 GMT(그리니치 평균시)에 기반해서 GMT로도 불린다. GMT는 영국 런던을 기점으로, 뉴질랜드 웰링턴을 종점으로 설정한 협정 세계시의 기준시간대다. ex) 런던 GMT+0, 서울 GMT+9

 

Date 객체의 toJSON() toISOString() 메서드를 이용해 YYYY-MM-DDTHH:mm:ss.sssZ 포맷의 ISO 8601 날짜를 출력할 수 있다. ISO 8601은 국제표준화기구에서 지정한 날짜/시간에 대한 표준 규격이다. 날짜 가장 뒤에 붙는 Z는 UTC 시간대를 나타낸다(09:30 UTC → 0930Z)

 

ISO 8601 날짜 역시 Date 함수의 인자로 넣어서 사용할 수 있다.

new Date().toJSON(); // '2021-06-18T06:48:16.046Z'
new Date().toISOString(); // '2021-06-18T06:48:16.046Z'
new Date("2021-06-18T06:48:16.046Z"); // Fri Jun 18 2021 15:48:16 GMT+0900 (한국 표준시)

 

국제 표준 날짜 형식은 숫자로 날짜를 표현할 때 모호함이 없도록 하기 위한 표준 방식이다. 예를 들어, 북미에서는 보통 월을 날짜 앞에 쓴다. 그러나, 유럽사람들은 월 앞에 날짜를 쓰는데, 1998년 3월 30일을 0.3.1998과 같이 표현한다.

 

숫자 사이를 구분하는 구분자들도 나라마다 모두 다르다. 그 외에도 서기 1년 1월 1일 이전 시대의 날짜는 숫자로 어떻게 표현하는가, 즉 B.C. 날짜들의 표현에 관한 문제가 남게된다. ISO 8601은 나라에 무관하게 날짜 표기 형식의 표준 방식을 제공한다.

 

• 연, 월, 일순으로 표기한다.
• 각 숫자 사이는 하이픈 `-` 으로 구분한다.
• 10 미만의 숫자에는 앞에 `0`을 붙인다.
• 서기 1 년의 앞의 해는 "0" 년으로 표현하고, 0 년의 앞의 해는 "-1" 년 등으로 표현한다.

 

출처 - Terms

 

경과 시간 계산 함수

---

비교할 시간의 Date 객체를 받아 밀리초 단위로 변경한 후, 현재 시각의 밀리초를 빼면 두 시간 사이의 경과시간(밀리초)을 알 수 있다. 여기에 1000을 나누면 초 단위로 볼 수 있다. 분 단위는 추가로 60을 나누면 되고, 시간 단위는 60을 한 번더 나누면 된다. (참고 링크)

const getElapsedTime = (date) => {
  const now = new Date().getTime();
  const commentDate = date.getTime();
  const elapsedMSec = now - commentDate;

  const elapsedSec = elapsedMSec / 1000; // "초" 단위 경과 시간
  const elapsedMin = elapsedMSec / 1000 / 60; // "분" 단위 경과 시간
  const elapsedHour = elapsedMSec / 1000 / 60 / 60; // "시간" 단위 경과 시간

  return { elapsedMSec, elapsedSec, elapsedMin, elapsedHour };
};

 

경과 시간 메시지 반환 함수

---

경과 시간을 계산했으니, 경과 시간에 대한 메시지를 출력하는 함수가 필요하다. 초 단위부터 차례대로 검사할 수 있도록 초 → 분 → 시간 순서대로 if문 조건을 거는게 중요하다. 경과 시간 계산 함수와 마찬가지로 Date 객체를 받는다(함수를 한 번만 호출해도 경과 시간 메시지를 받아올 수 있도록 하기 위해).

 

• 60초 미만까지는 초 단위로 표시 ex) 59초 전 게시
  • 11초 미만은 '방금 전 게시'로 표시
  • 11초 부턴 '~초 전 게시'로 표시
• 60분 미만까지는 분 단위로 표시 ex) 59분 전 게시
• 24시간 미만까지는 시간 단위로 표시 ex) 23시간 전 게시
• 그 외엔 일반적인 시간 형식으로 표시 ex) 2021-02-10 12:10:19

 

const getElapsedTimeMsg = (date) => {
  const { elapsedSec, elapsedMin, elapsedHour } = getElapsedTime(date);

  if (elapsedSec < 60) {
    const sec = Math.floor(elapsedSec);
    return sec < 11 ? `방금 전 게시` : `${sec}초 전 게시`;
  }

  if (elapsedMin < 60) return `${Math.floor(elapsedMin)}분 전 게시`;
  if (elapsedHour < 24) return `${Math.floor(elapsedHour)}시간 전 게시`;

  return getFormattedDate(date); // 2021-02-10 12:10:19
};

 

const padLeft = (date) => (date < 10 ? `0${date}` : `${date}`);

const getFormattedDate = (date) => {
  const YYYY = date.getFullYear();
  const MM = padLeft(date.getMonth() + 1); // getMonth는 0~11 값을 반환한다
  const DD = padLeft(date.getDate());

  const hh = padLeft(date.getHours());
  const mm = padLeft(date.getMinutes());
  const ss = padLeft(date.getSeconds());

  return `${YYYY}-${MM}-${DD} ${hh}:${mm}:${ss}`;
};

 

• `getMonth` 메서드는 0(1월)~11(12월) 사이의 값을 반환한다
• `getDay()` 메서드로 요일을 확인할 수도 있다. 0(일요일)~6(토요일) 사이의 값을 반환한다
• Date 객체의 모든 메서드는 `set`을 지원한다. 이를 이용해 값을 보정할 수도 있다.

 

const today = new Date("2022-02-02"); // Wed Feb 02 2022 09:00:00 GMT+0900 (한국 표준시)
const yesterday = new Date(today); // Wed Feb 02 2022 09:00:00 GMT+0900 (한국 표준시)
yesterday.setDate(today.getDate() - 1); // 1643673600000

console.log(today.toLocaleDateString()); // 2022. 2. 2.
console.log(yesterday.toLocaleDateString()); // 2022. 2. 2.

 

레퍼런스

---

• [Javascript] 경과 시간 계산하기 (시간, 분, 초)
• 코딩교육 티씨피스쿨
• Date.prototype.getTime() - JavaScript | MDN
• Javascript 와 Date 날짜   

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요