[React] 작성 날짜 기준으로 지난 시간을 변환하기 (리뷰시간, 게시글 시간, 댓글시간, 방금전, 몇분전, 몇시간전, 며칠전)

 

작성날짜 기준으로 지난 시간을 계산해주는 코드를 구현해보자!

 

 

---

 

 

 

아래의 게시글을 참고한 다음 이 게시글을 보면 이해가 훨씬 더 빠릅니다!

 

https://dev-ini.tistory.com/110

[Javascript] 시간 변환 함수 (newDate, getTime, toLocaleString, , toLocaleDateString, toLocaleTimeString)

 

 

---

 

 

 활용 예시 

 

이 게시글을 활용하면 아래와 같이 구현이 가능하다.

리뷰를 작성하면, 작성된 날짜가 "방금 전", "10초 전", "1분 전", "1시간 전", "1일 전", "10일 전"처럼 작성 날짜를 기준으로 지난 시간을 계산하여 표시되는 것을 볼 수 있다.

 

 

 

---

 

 

 작성 날짜를 기준으로 지난 시간을 계산하는 함수를 생성하기 

 

 getTime() 메서드 

 

- getTime() 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환한다.

- 이 메서드를 사용하면 Date 객체에 날짜와 시간을 지정할 수 있다.

- 1970년 1월 1일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자이다.

 

  console.log(new Date().getTime()); // 1704442186360

 

 

 

---

 

 

 지나간 시간 계산하기 

 

현재 날짜(2022-03-14 13:45:49.748)에서 작성된 날짜(2022-03-13 15:23:37)를 빼고 밀리초로 나누면 지나간 시간(초)이 계산된다.
초를 분, 시, 일로 나누어서 계산하면 된다.

 

const today = new Date();
const writeDate = new Date("2022-03-13 15:23:37");

console.log(today.getTime());  // 1647233149748
console.log(writeDate.getTime());  // 1647152617000

const elapsedTime = Math.trunc((today.getTime() - writeDate.getTime()) / 1000);

console.log(elapsedTime);
// 80532

 

 

---

 

 

 지난 시간 계산하는 함수 생성 

 

현재 시간을 기준으로 작성 날짜가
1초 전이면 "방금 전"으로,
1분 전이면 "xx초 전"으로,
1시간 전이면 "xx분 전"으로,
1일 전이면 "xx시간 전"으로,
15일 전이면 "xx일 전"으로,
15일 이후에는 작성 날짜로 변환하여 가져오는 함수이다.

 

 elapsedText.js 

import { simpleDateTimeFormat } from './simpleDateTimeFormat';

export const elapsedText = (date) => {
	// 초 (밀리초)
	const seconds = 1;
	// 분
	const minute = seconds * 60;
	// 시
	const hour = minute * 60;
	// 일
	const day = hour * 24;
	
	let today = new Date();
	let elapsedTime = Math.trunc((today.getTime() - date.getTime()) / 1000);
	
	let elapsedText = "";
	if (elapsedTime < seconds) {
		elapsedText = "방금 전";
	} else if (elapsedTime < minute) {
		elapsedText = elapsedTime + "초 전";
	} else if (elapsedTime < hour) {
		elapsedText = Math.trunc(elapsedTime / minute) + "분 전";
	} else if (elapsedTime < day) {
		elapsedText = Math.trunc(elapsedTime / hour) + "시간 전";
	} else if (elapsedTime < (day * 15)) {
		elapsedText = Math.trunc(elapsedTime / day) + "일 전";
	} else {
		elapsedText = simpleDateTimeFormat(date, "yyyy.M.d");
	}
	
	return elapsedText;
}

 

 

 

 simpleDateTimeFormat.js 

SimpleDateTimeFormat() 함수는 replace() 메서드를 사용하여 날짜, 시간을 문자열로 변환하는 함수이다.

export const simpleDateTimeFormat = (date, pattern) => {
	const dateString = pattern.replace(/(yyyy|MM|dd|HH|mm|ss|SSS)/g, function(match) {
		const matchString = "";
		switch(match) {
			case "yyyy":
				matchString = date.getFullYear();
				break;
			case "MM":
				matchString = date.getMonth() + 1;
				break;
			case "dd":
				matchString = date.getDate();
				break;
			case "HH":
				matchString = date.getHours();
				break;
			case "mm":
				matchString = date.getMinutes();
				break;
			case "ss":
				matchString = date.getSeconds();
				break;
			case "SSS":
				matchString = date.getMilliseconds();
				break;
			default :
				matchString = match;
				break;
		}
		if (match == "SSS") {
			if (matchString < 10) {
				matchString = "00" + matchString;
			} else if (matchString < 100) {
				matchString = "0" + matchString;
			}
		} else {
			if ((typeof(matchString) == "number" && matchString < 10)) {
				matchString = "0" + matchString;
			}
		}
		return matchString;
	});

	return dateString;
}

 

 

---

 

 

 함수 이용하기 

 

// 현재 시간 2022-03-13 15:23:37
const writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 방금 전

// 현재 시간 2022-03-13 15:24:10
const writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 33초 전

// 현재 시간 2022-03-13 15:25:05
const writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 1분 전

// 현재 시간 2022-03-13 16:03:05
const writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 39분 전

// 현재 시간 2022-03-13 17:11:14
const writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 1시간 전

// 현재 시간 2022-03-15 10:24:37
const writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 1일 전

// 현재 시간 2022-04-10 06:33:50
const writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 2022.3.13

 

 

사용할 때는 이런식으로 elapsedText 함수를 import해서 사용하면 된다.

import { elapsedText } from './../../../utils/Time/elapsedText';

export const Review = ({created_date, content}) => {
  return (
    <>
      <div className={styles["detail-review-box"]}>
        [...생략된 코드...]
          <span className={styles["detail-review-date"]}>{elapsedText(new Date(created_date)).toLocaleString()}</span>
        [...생략된 코드...]
      </div>
    </>
  );
};