언제 작성한 글인지 알려주는 함수를 만들어보자 (0분 전,0시간 전) (feat. 리팩토링)

트위터나 페이스북처럼 'X분 전', 'X시간 전'으로 글 작성 시간을 알려주는 함수를 만들어 보았습니다.

기능소개

현재로부터 24시간 이내에 작성된 글은 "~분 전" 혹은 "~시간 전"으로 나타냅니다.

작성된지 24시간이 지난 글은 글이 작성된 날짜를 보여줍니다.

함수 사용에 필요한 오브젝트

const posting = {
	createdAt: <글이 생성된 때의 Date.now()>;
     	createdDate: <글 생성 날짜>
}

글이 작성될 때 'createAt'의 value로 ms(밀리 초) 형태의 시간 정보를 가지게 됩니다.
아래 설명 참고

Date.now() 메소드는 UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환한다.

코드작성

현재의 Date.now()값과 글이 가진 'createAt'의 차이를 이용해 분차와 시차를 구합니다.

  const getTimegap = (a) => {
    var minutegap = Math.floor((Date.now() - a.createdAt) / 60000);
    var hourgap = Math.floor((Date.now() - a.createdAt) / 3600000);
    if (Date.now() - a.createdAt < 86400000) {
      if (minutegap < 60) {
        if (minutegap < 0) {
          return <p> 0분 전</p>;
        } else {
          return <p>{minutegap}분 전</p>;
        }
      } else {
        return <p>{hourgap}시간 전</p>;
      }
    } else {
      return <p>{a.createdDate}</p>;
    }
  };

복잡한 변수들과 if지옥에 빠진 기분이 듭니다.
좀 더 보기 쉽게 바꾸어 보았습니다.

리팩토링

• 중복되어 쓰이고 있는 (Date.now() - a.createdAt)를 상수로 정의합니다.
• 종속될 필요가 없는 조건은 따로 빼줍니다.

  const getTimegap = (posting) => {
    const msgap = Date.now() - posting.createdAt;
    const minutegap = Math.floor(msgap / 60000);
    const hourgap = Math.floor(msgap / 3600000);

    if (msgap < 0) {
      return <p>0분전</p>;
    }
    if (hourgap > 24) {
      return <p>{posting.createdDate}</p>;
    }
    if (minutegap > 60) {
      return <p>{hourgap}시간 전</p>;
    } else {
      return <p>{minutegap}분 전</p>;
    }
  };

코드가 한결 단순해졌습니다.