[수업과제] 카우치코딩 팀 프로젝트 리뷰 ⑥

작업 내용 리뷰

• 작성한 리뷰 / 알림 등의 업데이트 날짜포맷 변환

대부분의 개발 언어가 그렇지만 기본으로 표시되는 날짜 포맷이 우리나라나 동양권의 날짜 표시 방법과는 차이가 있다. 자바스크립트의 많은 라이브러리들과 날짜 관련 UI 프레임워크들도 마찬가지로 날짜 포맷 표현에서 우리의 년.월.일 표현 방식과는 다른 방식으로 기본적인 날짜 표현을 한다.

우리의 프로젝트에서 response로 받은 데이터를 보면 날짜 포맷을 아래와 같이 넘겨주는 것을 확인 할 수 있다.

createDate : ""2022-02-27T09:47:05.256725"

하지만 UI에 이대로 표현된다면 사용자가 보기 불편할 뿐만 아니라 ms까지 표시되어 불필요한 정보를 보여준다는 생각이 들어, 이 날짜포맷을 변환해 보기로 하였다.

👍시도

우리의 프로젝트는 리액트로 진행하기 때문에 우선 리액트에서 제공하는 라이브러리를 찾아보았다. 블로그를 찾아보니 대부분 dayjs와 moment를 사용하는 추세였다.

• dayjs 는 바꾸고자하는 날짜 값과 날짜 형식을 넣어 새로운 변수로 받아올 수 있다.
• moment는 now Date();를 대신하여 현재 시간을 가져올 수 있다.

우선 dayjs 및 moment를 설치한다.
npm install dayjs --save
npm install moment

블로그를 찾아보니 요즘은 moment가 무거워 dayjs만 사용하는 추세지만, 우리 프로젝트에서는 dayjs로 현재시간을 받아오는 부분이 해결되지않아 moment를 사용하였다. 이 이부분만 해결된다면 moment는 삭제해도 무방하다!

이 날짜 변환은 리뷰, 알림, 댓글, 게시글 등 다양하게 쓰일 수 있기 때문에 customHook으로 만들었다.

import { useEffect, useState } from 'react';
import dayjs from 'dayjs';
import moment from 'moment';
import 'moment/locale/ko'; // 한국기준으로 설정

const useGetDate = (date) => {
  // 커스텀훅을 import하여 다른 컴포넌트에서 사용할 때 쓰일 변수
  const [chargeTime, setChargeTime] = useState(''); 

  /* 알림생성 날짜 계산 YYYY-MM-DDTHH:mm:ss.SSS*/
  const dayjs = require('dayjs');

  // 시간 차이에 따른 표기
  const timeForToday = (value) => {
    console.log(value);
    const createAlrimDate = String(value); // 2022-02-25T19:34:57.175422
    const nowdate = moment().format('YYYY-MM-DD HH:mm:ss');

    // YYYY-MM-DD hh:mm:ss 형식의 날짜와 날짜차이 구하기
    var valueDate = dayjs(createAlrimDate, 'YYYY-MM-DD HH:mm:ss');
    var nowDate = dayjs(nowdate, 'YYYY-MM-DD HH:mm:ss');

    valueDate.format('YYYY.MM.DD HH:mm:ss'); // 2021.10.11 10:30:25
    nowDate.format('YYYY.MM.DD HH:mm:ss'); // 2021.10.11 10:30:25

    let mDiff = nowDate.diff(valueDate, 'minute'); // 오늘날짜(분) - 기준날짜(분)
    if (mDiff < 1) return setChargeTime('방금전');
    if (mDiff >= 1 && mDiff < 60) {
      setChargeTime(`${mDiff}분전`);
      return;
    }

    const betweenTimeHour = Math.floor(mDiff / 60);
    if (mDiff >= 60 && betweenTimeHour < 24) {
      setChargeTime(`${betweenTimeHour}시간전`);
      return;
    }

    const betweenTimeDay = Math.floor(mDiff / 60 / 24);
    if (betweenTimeHour >= 24 && betweenTimeDay < 365) {
      setChargeTime(`${betweenTimeDay}일전`);
      return;
    }

    setChargeTime(`${Math.floor(betweenTimeDay / 365)}년전`);
  };

  useEffect(() => {
    timeForToday(date);
  }, []);

  return chargeTime;
};

export default useGetDate;

그리고 이 함수가 사용되는 컴포넌트에서는 아래처럼 사용하면 된다.

import useGetDate from '../../../Hooks/useGetDate';
export default function Alrim({ alrim }) {
 // 커스텀 훅에서 선언한 chargeTime변수에 변환할 날짜값을 넣어준다.
  const chargeTime = useGetDate(alrim.createdDate);
 
  return (
    <AlrimWrap key={alrim.notificationId} checked={alrim.checked} read={read}>
    	...
      <Date>{chargeTime}</Date>
    </AlrimWrap>
  );
}

👏느낀점

약간 어렵지 않을까 예상하였지만, 현재 시간을 불러올 때 now Date();가 적용이 안되는점과 시간계산?만 약간 어려웠고 그 외에는 예상외로 수월하였다.
날짜포맷하나만 바꿨음에도 갑자기 사이트가 확 프레시해진 듯한 기분이 들었다.

이 포스팅을 하면서 dayjs와 moment에 대해서 한 번 더 찾아보게 되었는데 조만간 2차 개발을 할 때 moment대신 dayjs를 사용하는 것으로 리팩토링 하면서 조금 더 성능을 높이고자 하는 하나의 작은 개발목표가 추가되었다.

이 포스팅은 해당 부분이 리팩토링되면 다시 추가적으로 작성할 예정이다.