SNS처럼 지난 시간을 계산해서 작성일자 표시하기

여러 sns를 보면 작성한 게시글이나 댓글이 '방금 전', '2분 전', '4시간 전'과 같이 현재 시간과 작성 시간을 비교한 내용으로 표시가 되어있다. 오늘은 이렇게 현재 시간을 기준으로 작성일자를 표시하는 방법을 정리해보려고 한다. 

 

먼저 날짜를 구하는 로직을 작성해보면 이렇다. 

// 현재 날짜를 구한다.
// 작성한 날짜를 구한다. 
// 현재 날짜에서 작성한 날짜를 빼준다. 
// 뺀 결과값이 어느 범위에 포함되느냐에 따라 결과값을 리턴한다.

 

이제 현재 날짜와 작성한 날짜의 차이를 구해보자. Javascript의 Date 객체는 날짜 정보를 밀리초로 저장한다. 따라서 연산도 초단위로 해주어야 한다. 나중에 차이 값을 1000으로 나누어줄것이기때문에 함수를 선언하고,  일반적인 기준으로 초, 분, 시, 일을 구해준다. 

export const getDate = (date: Date) => { // date : 매개변수로 받아올 작성일자
  const seconds = 1 // 1초
  const minute = seconds * 60 // 1분 = 60초
  const hour = minute * 60 // 1시간 = 60분
  const day = hour * 24 // 1일 = 24시간
}

 

현재 날짜에서 작성한 시간을 뺀 다음 1000으로 나누어 밀리초에서 일반적인 초단위로 나타낸다. 밀리초 단위로 나타내는것이 더 정확하겠지만 나는 이쪽이 더 보기 편해서 이렇게 작성했다. 

new Date()로 새로운 Date 객체를 반환하고, .getTime() 메서드를 사용해 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환한다. 현재 날짜와 작성 일자에 getTime을 적용해 밀리초로 바꿔주고 차이값을 구한다. 그리고 1000으로 나눠준 뒤, Math.trunc을 사용해 소수점 부분을 제거하고 정수 부분만 사용한다.

const today = new Date()
const elapsedTime = Math.trunc((today.getTime() - date.getTime()) / 1000)

 

그리고 이 차이를 담은 elapsedTime 변수의 값으로 리턴값을 정해준다. 

yyyy년 mm월 dd일과 같은 형식의 경우 padStart를 사용해 02월 과 같은 형식으로 나타나게 해주었다. 

if (elapsedTime < seconds) { // 초보다 작을 경우
  return '방금 전'
} else if (elapsedTime < minute) { // 분보다 작을 경우
  return elapsedTime + '초 전'
} else if (elapsedTime < hour) { // 시보다 작을 경우
  return Math.trunc(elapsedTime / minute) + '분 전'
} else if (elapsedTime < day) { // 일보다 작을 경우 
  return Math.trunc(elapsedTime / hour) + '시간 전'
} else if (elapsedTime < day * 15) { // 15일 이내일경우 
  return Math.trunc(elapsedTime / day) + '일 전'
} else { // 15일부터 yyyy년 mm월 dd일 형태로 나타나게 해줌
  return `${date.getFullYear()}년 ${date.getMonth().toString().padStart(2, '0')} ${date.getDate().toString().padStart(2, '0')}일`
}

 

막상 해보면 간단하게 구현할 수 있었다!

 

전체 코드

export const getDate = (date: Date) => {
  const seconds = 1
  const minute = seconds * 60
  const hour = minute * 60
  const day = hour * 24

  const today = new Date()
  const elapsedTime = Math.trunc((today.getTime() - date.getTime()) / 1000)

  if (elapsedTime < seconds) {
    return '방금 전'
  } else if (elapsedTime < minute) {
    return elapsedTime + '초 전'
  } else if (elapsedTime < hour) {
    return Math.trunc(elapsedTime / minute) + '분 전'
  } else if (elapsedTime < day) {
    return Math.trunc(elapsedTime / hour) + '시간 전'
  } else if (elapsedTime < day * 15) {
    return Math.trunc(elapsedTime / day) + '일 전'
  } else {
    return `${date.getFullYear()}년 ${date.getMonth().toString().padStart(2, '0')} ${date.getDate().toString().padStart(2, '0')}일`
  }
}

 

 

 

 

참고 링크

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime