국내 전용이 아닌 Global 서비스를 목표로 개발할 때 시간 정보는 무조건 utc로 저장을 하여야 합니다. 특정 국가 시간으로 저장이 되어 있으면 서비스 되는 국가가 어디인지 알 수가 없기 때문에 현실적으로 서비스가 불가능합니다.

그래서 이번에는 시간을 다루는 방법에 대하여 정리하고자 합니다.

기존 test용으로 저장하는 데이터는 국내 local 시간 기준이었는데요. 이것을 utc로 변경하여 새롭게 저장을 하였습니다.

javascript에 Date라고 하는 날짜/시간 다루는 lib가 있지만 뭔가 조금 부족합니다. 그래서 찾아보니 moment를 많이 사용한다고 하더군요. 다른 사람들이 많이 사용한다면 그만큼 좋다는 의미겠죠?

moment 사용 방법입니다.

우선 설치
npm install moment --save

관련 문서는 아래 사이트 참고하세요.
https://momentjs.com/

---

chaos pack 판매 수량이 저장되어 있는 DB에서 최근 이틀 치 시간대 별 판매 수량을 읽어와야합니다.
물론 DB에는 utc 기준으로 저장되어 있습니다.

이를 위하여 현재 시간을 utc로 받아와야 합니다. 간단하게 아래 한 줄.

const dt = moment.utc();

지난 번에 언급하였듯이 데이터는 일자 별로 저장되어 있습니다.

오늘 날짜를 년-월-일 형태로 받아야합니다.
이 또한 간단하게 아래 한 문장으로 가능합니다.

var want = dt.utc().month(1).format("YYYY-MM-DD")

다음으로는 어제를 같은 형태로 받아야 합니다. 여기에서 moment의 강점이 나옵니다. 직관적으로 오늘 날짜에서 하루 뺀 일자를 받을 수 있습니다.

    var yesterday = dt.utc().subtract(1, 'day');
    want = yesterday.utc().month(1).format("YYYY-MM-DD")

Javascript에 있는 Date 함수는 기본적으로 timezone 정보가 반영된 시간 정보를 보여줍니다. 브라우저의 특성 상 현재 timezone이 반영되는 것이 훨씬 유용하겠죠.

마찬가지로 utc 기준으로 저장된 정보를 받아도 local time으로 보여줍니다.

덕분에 utc 정보를 현지 시간으로 바꾸어서 보여주는 건 아주 쉽게 마무리가 되었습니다.

{new Date(info.date).toLocaleString()}

---

그럼 하고자 하는 기본 함수들은 모두 확보하였습니다. 이를 바탕으로 오늘 데이터와 어제 데이터를 DB에서 받아서 merge 한 후 돌려주면 render() 부분에서 해당하는 데이터를 화면에 그려주면 끝!!

아래 그림과 같이 DB에는 utc로 화면에는 local time으로 잘 변경해서 보여줍니다.

이제 대망의 bootstrap에 있는 이쁜 component를 적용하는 작업을 해야 하는데요. 어제 간단하게 test는 마쳤으니 조만간 멋진 table이 완성될 듯 합니다.