[Dayjs] 왜 api 응답은 잘 오는데 화면에서 시각을 다르게 보여주지? (utc, local)

상황 🥺

버그 제보를 받았다. 분명 서버에서는 날짜 데이터를 잘 보내주고 있는데, 화면에는 다르게 표시하고 있었다. 

A api와 B api에서 날짜를 받아온 후에 dayjs 라이브러리를 활용해서 화면에 표시하고 있었는데, 하나는 제대로 표시되고 하나는 제대로 나오지 않았다. 

 

원인 🌟

자세히 보니 api 응답이 조금 달랐다.

 

1번

2번

 

 

1번은 T, Z 가 붙어있다. T는 날짜 뒤 시간이 오는 걸 표시해주는 것이고, Z는 UTC 기준시라는 뜻이다. UTC 기준시가 아니라 다른 시간대의 시간일 경우에는 +09:00 이런 식으로 UTC 기준시로부터 얼마나 떨어져있는지 나타낸다. 아무튼 1번은 UTC 기준시라는 뜻이다!!

2번은 T, Z가 없다.

 

나는 dayjs(시간).('DD MMM YYYY HH:mm') 이런 식으로 dayjs 라이브러리를 활용해서 원하는 형태로 시각을 보여주고 있었다. 그런데 dayjs 가 기본적으로 시간을 local 시간으로 표시하기 때문에 2번은 local 즉 한국 시간대로 표시한 것이었다. 

 

해결 🌈

이를 기획자님께 말씀드렸더니, 1번, 2번 경우 모두 사용자 브라우저의 시간대로 보여주라고 하셨다.

서버에서는 UTC 시간대로 저장하고 있는데, Api 응답을 다른 형태로 주고 있었다. api 응답을 통일해서 주면 좋겠지만... 모든 api를 당장 수정하기는 어려우니 일단 프론트에서 dayjs 라이브러리를 활용해서 문제를 해결했다.

 

dayjs.utc(시각).local().format('DD MMM YYYY HH:mm')



일단 시각을 무조건 UTC 시간대로 파싱하기 원했기 때문에 dayjs.utc() 를 사용했다. 그 후에 현지 시각에 맞게 보여주고 싶어서 local(). 마지막으로는 원하는 시간 포맷을 지정했다.

 

 

참고 📝

https://day.js.org/docs/en/parse/utc

Day.js · 2kB JavaScript date utility library

 https://day.js.org/docs/en/manipulate/local

Day.js · 2kB JavaScript date utility library