본문 바로가기
Front end/React 따라하기1

4)날짜 처리하기 date-fns

by 구월에작은섬 2020. 7. 16.
donaricano-btn

앞서 코로나 바이러스 API를 살펴보니 날짜라는것이 필요해졌다.

 

자바스크립트에서는 날짜를 다음처럼 처리한다.

var date = new Date();
//Thu Jul 16 2020 23:27:34 GMT+0900 (Korean Standard Time)

 

 

이런식으로 생성하는데 2020-07-16으로 포맷을 일일이 바꿔주는것은 상당히 귀찮은 일이다.

 

node에는 여러가지 날짜를 처리하는 라이브러리들이 있는데 이중에서 date-fns라는 라이브러리를 사용해보겠다.

 

https://date-fns.org/

 

Modern JavaScript Date Utility Library

date-fns provides the most comprehensive yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

date-fns.org

 

VS code를 켜고 cmd + j를 입력, 터미널을 열고 아래 커맨드를 입력한다.

 

yarn add date-fns

yarn next

 

date-fns이 성공적으로 설치되었다면,

 

src/component/Main의 Hello world를 지우고 아래처럼 코드를 수정한다.

 

import React from "react";
import * as dateFns from "date-fns";
const index = () => {
  return <div>{dateFns.format(new Date(), "yyyy-MM-dd")}</div>;
};

export default index;

 

아주 손쉽게 오늘 날짜를 원하는 포맷으로 얻게 되었다.

 

여기까지 작업한 내용을 깃 저장소에 올려보자.

 

터미널에

git status

git add .

git commit -m "add date-fns library"

git push -u origin master
donaricano-btn

댓글