너의 시간은?..(feat: Day.js)

문제

Next.js 프레임워크를 사용하는 개인 프로젝트를 진행하던 중, 예상치 못한 에러에 봉착했다..

 

'바로 Time Zone 문제이다.'

 

서버측에서 시간별로 날씨 데이터를 묶어서 내려주는 API를 작성할 필요가 있었는데, 이때 Date 객체를 사용했다. 로컬에서는 당연히 문제없이 잘 돌아갔다. 하지만.. AWS의 Amplify로 배포후 문제가 생겼다. 

 

바로 배포된 서버는 UTC를 사용하는데, 이 때문에 클라이언트에서 구현한 time filter가 일치하는 시간이 없다고 문제를 일으킨 것이다. log를 찍어보면  '1981-02-22T00:00Z' 같이 시간뒤에  'Z' 가 계속 나오는걸 볼 수 있었다.

 

지금와서 생각해보면 Amplify에서 Time Zome Config를 변경해주면 되는데, 그 때 당시에는 계속 되는 에러에 패닉이 와서 생각이 들지 않았다.

 

그러나 위와 같은 방식으로 변경해준다면 문제가 있다. 바로 내 프로그램은 타임존 설정이 된 서비스에서만 정상적으로 작동할 뿐만 아니라 쉬이 배포 서비스를 옮길 수 없게 될 수 도 있을 것이다.

 

프로젝트 특성상 시간에 따른 처리가 많았기에 이를 쉽게 도와줄 라이브러리를 찾게 됐다.

 

후보군에는 Moment.js Luxon day.js 등이 있었는데, Moment.js는 더이상 업데이트를 하지 않는다고 했으며, Luxon은 day.js에 10배 정도 무겁다.  밑에 표를 보면 어떤것을 선택 하는것이 좋을지에 대한 좋은 지표가 될 것이다.

 

https://github.com/you-dont-need/You-Dont-Need-Momentjs#brief-comparison

---

Day.js

Day.js는 일단 가볍다! Moment.js보다 30배 가량 가볍고 사용법도 비슷하다고 한다. 그리고 starts 도 많다.

 

좋다! 이제 문제를 해결해보자. 

 

day.js는 현재시간을 가져오기 위해서 dayjs() 메서드를 사용한다. 자바스크립트의 Date() 객체를 생성하는것과 상당히 비슷하다. 문제는 이렇게 생성한 시간대는 여전히 UTC 기준이다. 이를 서울로 시간대를 잡아 줄 필요가있다. 

 

day.js로 타임존을 다룰 때 주의할 점이 있다. 타임존을 설정할 때는 아래와 같이 설정해준다. format 함수를 사용할 때 한국어로 나타내 주고 싶다면 locale을 ko 로 지정해주면 된다.

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.locale(ko);
dayjs.tz.setDefault('Asia/Seoul')

 

일단 내 프로젝트는 공공데이터 포털에서 API를 사용하므로 한국 시간만 잘 작동하면 된다. 때문에 Time Zone을 seoul로 지정해주자.

 

참고로 이렇게 설정을 하고 dayjs()를 호출해 봐도 여전히 UTC 시간이 찍힐 것이다. 이는 setDefault 메서드는 dayjs()의 타임존을 한국으로 잡아주느것이 아니라 dayjs().tz() 메서드의 시간을 한국으로 잡아주는 것이다.

 

위에서도 말했듯 한국 시간만 사용할 것이므로 dayjs().tz() 를 붙혀주기 귀찮으므로 아래와 같이 해주면 간편히 타임존이 지정된 dayjs를 사용 할 수 있다.

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import ko from "dayjs/locale/ko";

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.locale(ko);
dayjs.tz.setDefault('Asia/Seoul')

export default dayjs().tz;

 

---

마무리

Day.js에 대해서 간단히 살펴보았다. 위에서 설명한것 뿐만 아니라 dayjs는 편리한 메서드를 제공한다.

 

날짜 출력 방식을 설정할 수 있는 format()

날짜 및 시간 더하고 빼는 add() / subtract()

동일한 날짜인지 알려주는 isSame()

등등 다양하고 편리한 날짜 관련 메서드를 제공한다.

 

이번 경험으로 배포 서버의 시간은 로컬과 다르다는 것을 깨닳고 간다.