json 파일의 날짜 데이터를 자바스크립트에서 사용하기.

json의 기본적인 특징을 기억하자

 

 

 

배울 내용

1. JSON과 Date 객체의 기본적인 특징.
2. date-fns 라이브러리

1. JSON과 Date 객체의 기본적인 특징

 

테스트용 REST API를 위해 json-server 라이브러리를 사용하고, 더미용 json파일을 만들 때 고민이 생겼다. new Date()로 현재 시간의 값을 json에서는 어떻게 표현해야할까? json의 데이터 타입은 string, number array, boolean, object, null 타입이 사용된다. json data로 Date 타입이 들어올 수 없다는 뜻이다. 결론적으로, 우리는 아래와 같이 날짜 데이터를 string타입이고 UTC(날짜를 표현하는 형식 중 하나)로 표현해야한다.

//db.json
{
  "note": [
    {
      "title": "title",
      "details": "details"
      "category": "category",
      "id": 1,
      "date": "2021-08-13T04:31:18.239Z" //UTC의 주요 특징으로 마지막이 Z로 끝난다.
      //"date": new Date()
      // Date타입이 아닌 string으로 표현해야한다.
    },
    {...}
  ]
}

자바스크립트의 Date 객체는 UTC형식으로 타임스탬프를 저장한다.

그러므로 json 파일의 데이터를 javascript에서 사용하기 위해서는 UTC형식으로 저장된 string 타입의 값을 가져와야한다. 그 후 가져온 데이터를 Date 객체로 변환한다. 아래 예제는 UTC string 날짜 데이터를 Date 객체로 바꾸는 방법을 보여준다.

// example.js
const date = new Date(Date.parse(stringdatafromjson));

1. parse의 param으로는 json 파일에서 가져온 string타입의 데이터를 받는다. 그 후 현재를 뜻하는 number를 리턴한다.

2.  new Date의 인자로 위 number를 받고 Date 타입의 값을 리턴한다.

 

이제 json 파일에서 날짜를 표현하는 방법과, 그 값을 자바스크립트에서 처리하는 방법을 알게 되었다. 

 

 

2. date-fns 라이브러리

 

필자는 'date-fns' 이라는 유명 date format 라이브러리를 이용해 편하고 다양하게 날짜를 표현하곤 한다.

// example.jsx
import { format } from 'date-fns';
...
const dateString = new Date(Date.parse(stringdatafromjson)); //string
...
return (
	<div>{format(dateString, 'do MMMM Y')}</div>
)

format의 첫번째 인자로는 number과 Date 객체 둘 중 하나가 들어간다.

// example.jsx
import { format } from 'date-fns';
...
const dateNumber = Date.parse(stringdatafromjson); // number
...
return (
	<div>{format(dateNumber, 'do MMMM Y')}</div>
)

 date-fns npm 사이트

 

 

 

👏이제 답할 수 있어야 하는 것들

하나. JSON이 사용하는 타입들은?
둘. JSON의 저장된 날짜 데이터를 자바스크립트에서 사용하는 방법은?