[JS] Date() 객체를 이용한 시간 차이 구하기

2020. 10. 3. 19:52Javascript/시행착오

시간 차이 구하기

 최근에 리액트, 리덕스 강의를 들었다. 강의를 내껄로 만들기 위해서 나는 항상 강의를 다시 참조하여 무엇인가를 만드는 습관을 들여놨는데, 이번에는 게시판을 간단하게 만들기로 했다. 게시판은 흔히 글 번호, 제목, 글쓴이, 날짜를 기입한다. 그런데 요즘 게시판은 날짜를 기입할 때 2020-01-02 식이 아닌 (현재시간) - (글이 업로드 된 시간)을 뺀 시간 차이를 기입한다.

 

 

 

 대표적인 예시가 유튜브다. 유튜브 동영상을, 댓글을 업로드했을 때 업로드된 시간란을 보면 3초 전, 1분 전 이런식으로 출력되어있다. 따라서 나도 업로드된 날짜를 유튜브 방식처럼 출력하고 싶었다. 방법은 어렵진 않았으나, 년도를 계산할 경우 e-표기법이 뜨는 변수가 발생했다. 밀리미터 단위를 초, 분, ... 년도의 단위로 만들어야 하니 나눗셈을 해야하고, 소수 값에서 정수만을 빼와서 출력을 해야만 하는데, 이것을 구현하기 위해 나는 parseInt 메서드를 사용했다.

 

 

 

 찾아보니 parseInt 메서드는 정수부분을 잘라서 문자로 변환하는 메서드라서 e-표기법으로 표시된 수에서 정수를 추출해서 잘라내면, 0이 아니라 0보다 큰 값이 추출된다. 따라서 Number 메서드를 이용해서 1보다 클 경우parseInt 메서드를 이용해서 정수부분을 자르자는 생각을 하였고, 이 조건을 추가하여 나는 원하는 기능을 구현할 수 있었다.

 

 

 

나의 코드

const getDifTime = (created) => {
  const SEC = 1000;
  const MIN = SEC*60;
  const HOUR = MIN*60;
  const DAY = HOUR*24;
  const WEEK = DAY*7;
  const MON = DAY*30;
  const YEAR = DAY*365;

  const cur = Date.now() - created;
  const seconds = `${parseInt(cur/SEC)}초 전`;
  const minutes = Number(cur/MIN) >= 1 ? `${parseInt(cur/MIN)}분 전` : false;
  const hours = Number(cur/HOUR) >= 1 ? `${parseInt(cur/HOUR)}시간 전` : false;
  const days = Number(cur/DAY) >= 1 ? `${parseInt(cur/DAY)}일 전` : false;
  const weeks = Number(cur/WEEK) >= 1 ? `${parseInt(cur/WEEK)}주 전` : false;
  const months = Number(cur/MON) >= 1 ? `${parseInt(cur/MON)}달 전` : false;
  const years = Number(cur/YEAR) >= 1 ? `${parseInt(cur/YEAR)}년 전` : false;

  return years || months || weeks || days || hours || minutes || seconds;
};

const createdAt = Date.now();
getDifTime(createdAt);