들어가며😃

카드 컴포넌트 아래에 원래는 날짜형식으로만 표시되었다. 사실 프론트에서 날짜를 정리하지않고 백단으로 부터 정리된 날짜형식 (2023-06-15)으로 받아서 그대로 사용했었다. 하지만 최근 게시물에는 시간을 보여주는게 좋을 것 같아 현재시간과 비교하여 24시간 이전에 등록된 게시물이면 등록된 시간을 n시간 전으로 표시될 수 있도록 로직을 추가 하였다.

시간비교

위와 같이 24시간 이전에 등록된 게시글이면 n시간 전이라는 문구(좌)를, 24시간이 지나면 날짜(우) 로 대체할 것이다.
그리고 위를 구현하기 위해 나는 함수 2개를 사용하였다.

  1. yyyy-mm-dd 형식을 만드는 date 함수
  2. 1번의 date함수와 현재 시간을 비교하는 함수


yyyy-mm-dd 형식 만들기


백에서 주는 시간 형식

우선 백에서 받는 시간형식은 위와 같았다. 이 시간 데이터를 인자로 받아 가공해보자

export const transformDate = (dateString: string) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = ("0" + (1 + date.getMonth())).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  return [year, month, day].join("-"); // 기대값 : 2023-06-15
};


  1. 우선 받은 데이터를 프론트에서 조작할 수 있도록 new Date() 내장함수를 이용하여 변형한다. 그럼 위의 이미지에서 보였던 날짜 데이터가 Wed Jun 14 2023 20:49:04 GMT+0900 (한국 표준시)와 같이 변경된다.

  2. getFullYear()를 통해 년도를 구한다.

  3. getMonth()를 이용하면 해당 월 보다 하나가 작게 나온다. 그래서 1을 추가해줘야한다.
    그리고 1~9월에는 앞에 0을 붙여주어, 예를 들어 06월로 표시될 수 있도록 해준다. 이렇게 되면 10~12월에도 똑같이 0이 붙으니 slice(-2)를 통해 뒤에서 부터 2글자를 잘라주는 것이다.

  4. 날짜 형식도 위의 월 구하는 형식과 같고 1 추가 해주는 로직만 없다.

  5. 그리고 join("-")을 통해 최종적으로 yyyy-mm-dd 형식으로 리턴!


현재시간과 비교하여 n시간 전 구하기


아래는 위에서 작성한 transformDate() 함수를 불러와 현재 시간과 비교하는 함수이다. 카드 컴포넌트에서는 아래의 함수만 사용되었다.

export const getBoardDate = (dateString: string) => {
  const date = transformDate(dateString);
  const currentTime = new Date();
  const targetTime = new Date(dateString);
  const timeDifference = Number(currentTime) - Number(targetTime);
  const hoursDifference = Math.floor(timeDifference / (1000 * 60 * 60));

  if (hoursDifference < 1) {
    return "방금 전";
  } else if (hoursDifference < 24) {
    return `${hoursDifference}시간 전`;
  } else {
    return date;
  }


  1. transformDate() 함수로 부터 yyyy-mm-dd 형식의 가공된 데이터를 불러온다.(시간 비교와는 별개)

  2. new Date()로 현재 시간을 불러온다.

  3. 시간을 비교하기 위해 인자로 받은 시간 데이터를 new Date(dateString)으로 변환해준다.

  4. 2.3번의 시간을 비교한다. Number(currentTime or targetTime)으로 로그를 찍어보면 음 꽤나 심오한 숫자가 나올텐데, 해당 값은 1970년 1월 1일 00:00:00 UTC를 기준으로 현재까지의 경과 시간을 밀리초 단위로 나타낸 것이라고 한다. 어쨋던 기준점이 되는 시간이 있고 그 시간차를 각각 구한 후, 둘의 시간차를 연산한 것이 4번 과정이다.

  5. 4번은 밀리초 단위로 값을 주기에 우리가 원하는 시간으로 변환해주어야한다.
    1000은 1초를 밀리초 단위로, 60은 1분을 초 단위로, 60은 1시간을 분 단위로 나타낸다. 따라서, 1000*60*60은 1시간을 밀리초 단위로 나타내는 값이 되는 것이다.

  6. 5번에서 구해진 시간차가 24시간 이하라면 n시간전을, 1시간 전 이라면 ‘방금 전’을, 24시간 이상이라면 1번에서 가져온 date를 리턴해준다.




이렇게 간단하게 시간을 변환하는 함수를 정리해보았다. 사실 시간 함수는 너무 흔하고 잘 알려주는 글이 많아 어렵지않다. 그런데 이번에 내가 글을 쓰고 정리해보니 로직에 대한 이해가 훨씬 높아졌다. 특히 n시간전을 구하는 로직은 처음 적용해보면서 시간단위의 변환 로직에 대해 더 잘 알게되었고 컴포넌트의 UI에 대한 접근도 향상된 것 같아 뿌듯하다. 오늘도 1뿌듯 완😎