최근 프로젝트에서 시간 관련해서 다룰일이 있어서 날짜와 시간 다루는 방법들을 자세하게 알아보게 되었습니다.
타임존(Timezone) ?
타임존은 동일한 로컬 시간을 따르는 지역을 의미합니다. 주로 해당 국가에 의해 법적으로 지정됩니다.
GMT? UTC ? 오프셋?
GMT는 Greenwuch Mean Time의 약자로 그리니치 평균시를 의미하는데 경도 0도에 위치한 영구 그리니치 천문대를 기준으로 하는 태양 시간을 의미한다.
UTC는 Coordinated Universal Time/Universal Time Coordinated 의 약자로 지구 자전 주기의 흐름이 늦어지고 있는 문제를 해결하기 위해 세슘 원자의 진동수에 기반한 국제 원자시 기준시간을 의미한다.
오프셋
협정세계시를 기준으로 조정된시간의 차이를 오프셋이라고 하는데 UTC+09:00 의 의미는 UTC기준시간보다 9시간이 빠르다는 것을 의미합니다. 이 오프셋을 기준시로 하여 국가별로 자신들이 사용하는 타임존에 고유한 이름을 부여합니다.
예를들어 대한민국의 타임존은 KST(Korea Standard Time)라고 부릅니다. 오프셋과 타임존의 이름은 1:1로 매칭되는 것이 아닙니다. +09:00 오프셋의 경우 한국 뿐 아니라 일보, 인도네시아 같은 지역에서도 사용하고 있으므로 1:N의 관계입니다.
타임존 다루기
프론트엔드 개발에서 타임존을 다룰때 고려해야하는 상황은 크게 2가지 입니다.
파싱(Parsing): 클라이언트의 날짜 데이터(사용자의 날짜 입력 값)를 타임존 데이터 형태로 변환하는 상황
포매팅(Formatting): 서버에서 저장된 날짜 데이터를 사용자의 타임존에 맞게 변환하는 상황
서버에 저장되는 데이터는 다양한 클라이언트 환경을 지원하기위해 저장되는 데이터가 타임존에 영향을 받지 않는 절대값이어야 합니다. 서버 환경에 따라 다르지만 데이터는 날짜 및 시간 정보가 동일한 오프셋(UTC)에 맞춰져 있거나 해당 클라이언트 환경의 타임존 정보까지 포함된 값이어야 합니다.
자바스크립트에서 Date
자바스크립트에서 날짜나 시간과 관련된 작업은 Date 객체를 사용합니다. Array나 Function과 같이 ECMAScript스펙에 정의 되어있는 네이티브 객체이며, 주로 C++과 같은 네이티브 코드로 구현되어 있다고 합니다. Java의 영향을 받아서인지 불변데이터(Immutable)가 아니라는 점, Month가 0으로 부터 시작하는 등의 안좋은 특징도 그대로 가지고 있다고 합니다. 자세한 내용은 API문서를 참고하세요.
Date 객체는 내부적으로 유닉스 시간과 같은 절대값으로 시간 데이터를 관리합니다. 그러나 생성자 Date()나 함수 Parse()나 메소드들 getHour(), setHour()은 모두 클라이언트의 로컬타임존(브라우저가 실행되는 운영체제에 설정된 타임존)에 영향을 받습니다.
사용자가 타임존이 서울로 설정된 기기에서 2024년 3월 25일 오전 11시 30분을 입력했고 이 입력값을 년도, 월, 일, 시 분 단위로 각각의 숫자 형태의 2024, 2, 25, 11, 30으로 저장했다고 가정하고 생성자를 이용해서 Date 객체를 생성한다면
const time = new Date(2024, 2, 25, 11, 30)
time.toString(); // Mon Mar 25 2024 11:30:00 GMT+0900 (한국 표준시)
위와 같이 반환되는 값은 KST를 기준으로 나옵니다.
자바스크립트에서 로컬 타임존을 직접 변경하는 것은 어렵습니다. 오프셋을 이용하여 날짜를 계산할 수 있지만, 정확한 타임존 변경을 위해서는 상세한 데이터베이스가 필요합니다.(서머타임등의 계산이 필요) 또는 데이터베이스에 전체 타임존을 저장하고 있다가 Date객체에서 날짜나 시간데이터를 가져올 때마다 데이터베이스에서 해당 날짜와 타임존에 맞는 오프셋을 알아낸 다음, 연산을 통해 결과를 반환하는 과정을 거쳐야합니다. 또한 이를 검증하기 위한 테스트도 정확히 작성해야합니다. 이를 대체하기 위해 잘 만들어진 라이브러리들을 사용하기를 권장합니다.
Day.js
이전에 간단히 Moment.js의 관한 포스트를 작성하였었는데 이제는 Deprecated 되었습니다 ㅠㅜ
그로인에 새로운 라이브러리를 찾던중 Day.js 를 발견하게 되었습니다.
기존에 사용하던 Moment.js와 거의 사용법이 유사하고 번들크기도 작으며 immutable 하다는 장점도 가지고 있습니다.
설치하기
npm install dayjs
// or
yarn add dayjs
현재 날짜 또는 특정날짜 시간 객체 생성
import dayjs from "dayjs";
dayjs(); // 현재시간
dayjs("2024-03-25"); // 2024-03-24 T00:00:00+09:00
날짜 형태 지정 (Formatting)
const date = dayjs("2023-12-01 10:30:25")
date.format(); // 2023-12-01T10:30:25+09:00
date.format("YY-MM-DD"); // 23-12-01
date.format("DD/MM/YY"); // 01/12/23
date.format("YYYY.MM.DD HH:mm:ss"); // 2023.12.01 10:30:25
더 다양한 포맷 형식은 공식문서를 참고하세요
날짜 더하기/빼기 (add/subtact)
// 년도
dayjs().add(1, 'year');
dayjs().subtract(1, 'year');
// 월
dayjs().add(1, 'month');
dayjs().subtract(1, 'month');
// 일
dayjs().add(1, 'day');
dayjs().subtract(1, 'day');
// 시간
dayjs().add(1, 'hour');
dayjs().subtract(1, 'hour');
// 분
dayjs().add(1, 'minute');
dayjs().subtract(1, 'minute');
// 초
dayjs().add(1, 'second');
dayjs().subtract(1, 'second');
타임스탬프 변환
dayjs()에 타임스탬프 값을 넣고 format을 하여 날짜로 변화할수 있고, unix() 함수를 사용하여 타임스탬프로 변환 할 수 있습니다.
dayjs(1548381600).format(); // 1970-01-19T07:06:21+09:00
dayjs('2019-01-25').unix(); // 1548381600
