React_오늘 날짜 표시하기 (live-clock 라이브러리)

todoapp을 만드는 도 중 현재 날짜를 표시하고 싶은 생각이 들어서 찾아보게 되었다.
다른 방식으로 기능을 구현할 수도 있겠지만 나는 live-clock 라이브러리를 사용해서 구현해보려고 한다.

사용을 위해서는 먼저 아래 코드로 설치를 한다.

npm install --save react react-live-clock

설치가 완료 된 후에 import를 한 뒤 아래와 같이 입력을 해줬다. 

NowDate.js

import Year from "react-live-clock";
import Month from "react-live-clock";
import Day from "react-live-clock";
import Date from "react-live-clock";

// 날짜 자동으로 바꿔주는 라이브러리 수정
function NowDate () {
    return (
        <div className="liveDate">
            <span>
                <Year
                id='year'
                format={"YYYY"}
                ticking={false}
                timezone={'KR/Pacific'}
                />
            </span>.
            <span>
                <Month
                id='Month'
                format={"MM"}
                ticking={false}
                timezone={'KR/Pacific'}
                />
            </span>.
            <span>
                <Date
                id='Date' 
                format={"DD"}
                ticking={false}
                timezone={'KR/Pacific'}
                />
            </span>.
            <span>
                <Day
                id='Day'
                format={"ddd"}
                ticking={false}
                timezone={'KR/Pacific'}
                />
            </span>
        </div>
    )
}
export default NowDate

이렇게 작성 된 컴포넌트를 연결시켜주면 완성이다. 

구현에 성공한 화면이다.
내가 지정한 포맷대로 출력이 된 모습을 볼 수 있다

하지만 클론창에 이런 어마무시한 오류들이 가득했다.

Monent Timezone has no data for KR/Pacific

한마디로 해당 데이터를 찾을 수 없다. 라는 말인 것 같다

이 를 해결하기 위해서 다시한 번 공식문서를 보던 중 Properties에 적혀있는 timezone의 list를 찾을 수 있었다.
이 목록에 적혀 있는 시간대를 이용해 아래와 같이 timezone을 수정해줬다.

                <Year
                id='year'
                format={"YYYY"}
                // 날짜를 어떻게 표현할 것 인지에 대한 포멧
                ticking={true}
                // 초 간격으로 시간 자동 업데이트
                timezone={'Asia/Seoul'}
                // 서울 기준 시간
                />

 

수정 뒤에는 더 이상 오류가 뜨지 않았고, 구현 다음 날에도 시간이 잘 변화함을 확인했다.

위 작성된 format, ticking, timezone등의 properies는 공식문서에 설명이 잘 되어 있다.

---

출처

https://momentjs.com/docs/#/displaying/format/
https://www.npmjs.com/package/react-live-clock