new Date() 날짜 형식 바꾸기

나중에 같은 문제가 생겼을 때 바로 찾아서 써먹으려고 정리해 둔다.
개발하다 보면 new Date()를 사용했을 때 이상한 형식으로 출력되는 걸 본 적이 있을 거다.

기존 방식

	 const resultData = {
      nickname: user.nickname,
      result: mbtiResult,
      visibility: true,
      date: new Date(),
      userId: user.userId,
    };

new Date()의 문제점

2025-02-24T06:52:33.843Z 

이런 형식은 사람이 보기엔 너무 불편하다.
그래서 더 깔끔한 YYYY-MM-DD HH:mm:ss 형태로 변환하고 싶어졌다.

date-fns 사용

날짜 관련 라이브러리는 여러 가지가 있지만, date-fns는 가볍고 사용법이 간단해서 좋다!

설치방법

yarn add date-fns
or
npm install date-fns

사용법

import { format } from "date-fns";

const formattedDate = format(new Date(), "yyyy-MM-dd HH:mm:ss");

console.log(formattedDate); // 2025-02-24 06:52:33

정리

1. new Date()는 기본적으로 보기 불편한 형식(2025-02-24T06:52:33.843Z)으로 출력된다.
2. date-fns 라이브러리를 사용하면 쉽게 형식을 바꿀 수 있다.
3. yarn add date-fns로 설치 후, format(new Date(), "yyyy-MM-dd HH:mm:ss")를 사용하면 깔끔한 형태(2025-02-24 06:52:33)로 변환된다.