[Javascript] 시간과 관련된 유틸함수를 알아보자⏱️

---

안녕하세요! 오늘은 자바스크립트에서 사용이 가능한 시간과 관련된 유틸함수를 정리해보겠습니다!

 

1. Moment객체로 몇분전, 몇시간전, 몇일전 표현하기.

moment 객체는 JavaScript에서 날짜와 시간을 다루기 위해 사용되는 외부 라이브러리입니다.

moment를 사용하면 날짜와 시간을 문자열로 파싱하거나, 현재 날짜와 시간을 가져오는 것부터 특정 날짜와 시간 간의 차이를 계산하고, 날짜와 시간을 서식화하여 출력하는 등의 작업을 간편하게 수행할 수 있습니다.

 

아래 함수는 moment 를 이용하여 주어진 날짜 데이터와 현재 날짜와 시간 사이의 차이를 계산하여 반환합니다.

export const getData = (data) => {
  // 입력된 데이터(data)가 비어있거나(null 또는 undefined) 없는 경우, 빈 문자열을 반환합니다.
  if (!data) {
    return '';
  }

  // 현재 날짜와 시간을 'moment' 객체로 가져옵니다.
  const today = moment();
  // 주어진 데이터를 'moment' 객체로 변환합니다.
  const postingDate = moment(data);

  // 현재 날짜와 주어진 데이터 간의 일(day) 차이를 계산합니다.
  const dayDiff = postingDate.diff(today, 'days');
  // 현재 날짜와 주어진 데이터 간의 시간(hour) 차이를 계산합니다.
  const hourDiff = postingDate.diff(today, 'hours');
  // 현재 날짜와 주어진 데이터 간의 분(minutes) 차이를 계산합니다.
  const minutesDiff = postingDate.diff(today, 'minutes');

  // 작성한지 1시간도 안 지났을 때를 처리합니다.
  if (dayDiff === 0 && hourDiff === 0) {
    // 작성 시점부터 현재까지의 분(minutes) 차이를 양수로 변환하고, 올림 처리합니다.
    const minutes = Math.ceil(-minutesDiff);
    // '분 전'을 의미하는 문자열과 함께 작성 시점으로부터 얼마나 지났는지를 반환합니다.
    return minutes + '분 전';
  }

  // 작성한지 1시간은 넘었지만 하루는 안 지났을 때를 처리합니다.
  if (dayDiff === 0 && hourDiff <= 24) {
    // 작성 시점부터 현재까지의 시간(hour) 차이를 양수로 변환하고, 올림 처리합니다.
    const hour = Math.ceil(-hourDiff);
    // '시간 전'을 의미하는 문자열과 함께 작성 시점으로부터 얼마나 지났는지를 반환합니다.
    return hour + '시간 전';
  }

  // 작성한지 하루 이상 지났을 때를 처리합니다.
  // 현재 날짜와 주어진 데이터 간의 일(day) 차이를 양수로 변환하여 반환합니다.
  return -dayDiff + '일전';
};

사용방법과 실제 출력 결과는 아래와 같습니다.

const data = '2023-07-24T14:00:00';
console.log(getDate(data));

2. 오늘날짜와 특정날짜 사이의 일수 구하기

// 두 날짜 사이의 차이를 계산하여 해당 날짜 간격을 반환하는 함수
export const getDate = (data) => {
  // 오늘 날짜 구하기
  const today = new Date();
  const year = today.getFullYear();
  const month = ('0' + (today.getMonth() + 1)).slice(-2); // 0부터 시작하므로 1을 더하고, 두 자리로 표시하기 위해 앞에 '0' 추가
  const day = ('0' + today.getDate()).slice(-2); // 두 자리로 표시하기 위해 앞에 '0' 추가
  const dateString = year + '-' + month + '-' + day; // 'YYYY-MM-DD' 형식의 오늘 날짜 문자열 생성

  const startDate = new Date(dateString); // 오늘 날짜를 'YYYY-MM-DD' 형식으로 생성한 문자열을 Date 객체로 변환
  const endDate = new Date(data); // 입력으로 받은 scheduleUntil 날짜를 Date 객체로 변환
  const dateGap = endDate.getTime() - startDate.getTime(); // 두 날짜 사이의 밀리초(ms) 차이 계산
  let result = Math.ceil(dateGap / (1000 * 60 * 60 * 24)); // 날짜 간격을 일(day) 단위로 계산하여 올림 처리

  // 날짜 간격이 음수이거나, 빈 문자열('') 또는 정의되지 않은(undefined) 경우, 0을 반환
  if (result < 0 || result === '' || result === undefined) {
    return 0;
  }

  // 계산된 날짜 간격에 1을 더하여 반환 (startDate와 endDate를 모두 포함하기 위해 1을 더함)
  return result + 1;
};

사용방법과 실제 출력 결과는 아래와 같습니다.

const data = '2023-07-27'; // 'YYYY-MM-DD' 형식의 입력 날짜
console.log(getDate(data));

3. **년 **월 **일로 표현하기

아래 함수는 날짜 데이터(data)를 받아와 해당 날짜를 '**년 **월 **일' 형식으로 변환하여 반환합니다.

export const getDate = (data) => {
  // 입력받은 날짜 데이터에서 연도 부분(2자리), 월 부분(2자리), 일 부분(2자리)을 추출하여
  // '년 월 일' 형식의 문자열로 생성합니다.
  const date =
    data.substr(2, 2) + // 연도 부분(2자리) 추출 (예: '23')
    '년 ' + // '년' 문자열 추가
    data.substr(5, 2) + // 월 부분(2자리) 추출 (예: '07')
    '월 ' + // '월' 문자열 추가
    data.substr(8, 2) + // 일 부분(2자리) 추출 (예: '24')
    '일'; // '일' 문자열 추가

  // '년 월 일' 형식으로 변환한 문자열을 반환합니다.
  return date;
};

4. 날짜데이터(서버에서 받은 UTC 시간)를 한국 시간(KST)으로 변환하기

export const getKrTime = (data) => {
  // 입력받은 날짜 데이터를 Date 객체로 변환하고, 현재 시간대의 UTC 시간과의 차이를 계산하여 한국 시간(KST)으로 변환합니다.
  const isCreatedAt = new Date(data).getTime() + new Date(data).getTimezoneOffset() * 60 * 1000;
  // 한국과 UTC 시간대의 차이를 밀리초로 계산하여 상수에 저장합니다. 한국은 UTC+9 시간대이므로 9시간에 해당하는 시간을 계산합니다.
  const KR_TIME_DIFF = 9 * 60 * 60 * 1000;
  // 한국 시간(KST)을 계산한 값을 이용하여 한국 시간(KST)의 Date 객체를 생성합니다.
  const kr_curr = new Date(isCreatedAt + KR_TIME_DIFF);

  // 한국 시간(KST)의 연도, 월, 일, 시간, 분을 추출합니다.
  const year = kr_curr.getFullYear(); // 연도를 가져옵니다.
  const month = kr_curr.getMonth() + 1; // 월을 가져오며, 0부터 시작하므로 1을 더합니다.
  const isMonth = month >= 10 ? month : '0' + month; // 월이 10 이상이면 그대로, 10 미만이면 앞에 '0'을 추가하여 두 자리로 표시합니다.
  const day = kr_curr.getDate(); // 일을 가져옵니다.
  const isDay = day >= 10 ? day : '0' + day; // 일이 10 이상이면 그대로, 10 미만이면 앞에 '0'을 추가하여 두 자리로 표시합니다.
  const hour = kr_curr.getHours(); // 시간을 가져옵니다.
  const isHour = hour >= 10 ? hour : '0' + hour; // 시간이 10 이상이면 그대로, 10 미만이면 앞에 '0'을 추가하여 두 자리로 표시합니다.
  const minutes = kr_curr.getMinutes(); // 분을 가져옵니다.
  const isMinutes = minutes >= 10 ? minutes : '0' + minutes; // 분이 10 이상이면 그대로, 10 미만이면 앞에 '0'을 추가하여 두 자리로 표시합니다.

  // 'YYYY.MM.DD. HH:mm' 형식으로 변환한 문자열을 반환합니다.
  return year + '.' + isMonth + '.' + isDay + '. ' + isHour + ':' + isMinutes;
};

api통신 후 서버에서 받은 createdAt등의 utc시간을 사용자에게는 kst로 보여줘야할 때 사용했었습니다!

 

5. 날짜 데이터를 KST으로 변환하여 'YYYY-MM-DD' 형식으로 반환하는 함수

export const getMinusSignChangeTime = (data) => {
  // 입력받은 날짜 데이터를 Date 객체로 변환하고, 현재 시간대의 UTC 시간과의 차이를 계산하여 한국 시간(KST)으로 변환합니다.
  const isCreatedAt = new Date(data).getTime() + new Date(data).getTimezoneOffset() * 60 * 1000;
  // 한국과 UTC 시간대의 차이를 밀리초로 계산하여 상수에 저장합니다. 한국은 UTC+9 시간대이므로 9시간에 해당하는 시간을 계산합니다.
  const KR_TIME_DIFF = 9 * 60 * 60 * 1000;
  // 한국 시간(KST)을 계산한 값을 이용하여 한국 시간(KST)의 Date 객체를 생성합니다.
  const kr_curr = new Date(isCreatedAt + KR_TIME_DIFF);

  // 한국 시간(KST)의 연도, 월, 일을 추출합니다.
  const year = kr_curr.getFullYear(); // 연도를 가져옵니다.
  const month = kr_curr.getMonth() + 1; // 월을 가져오며, 0부터 시작하므로 1을 더합니다.
  const isMonth = month >= 10 ? month : '0' + month; // 월이 10 이상이면 그대로, 10 미만이면 앞에 '0'을 추가하여 두 자리로 표시합니다.
  const day = kr_curr.getDate(); // 일을 가져옵니다.
  const isDay = day >= 10 ? day : '0' + day; // 일이 10 이상이면 그대로, 10 미만이면 앞에 '0'을 추가하여 두 자리로 표시합니다.

  // 'YYYY-MM-DD' 형식으로 변환한 문자열을 반환합니다.
  return year + '-' + isMonth + '-' + isDay;
};

6. 오늘 날짜를 'YY.MM.DD(요일)' 형식으로 표기하여 반환하는 함수. 한글로 요일표기하기.

export const getFormattedDate = () => {
  // 현재 날짜와 시간을 가져옵니다.
  const date = new Date();

  // 년도, 월, 일을 추출합니다.
  const year = date.getFullYear().toString().slice(-2); // 년도에서 뒤의 두 자리만 추출합니다. (예: 2023 -> '23')
  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 월을 가져오며, 0부터 시작하므로 1을 더하고, 두 자리로 표시하기 위해 앞에 '0'을 추가합니다.
  const day = date.getDate().toString().padStart(2, '0'); // 일을 가져오며, 두 자리로 표시하기 위해 앞에 '0'을 추가합니다.

  // 요일을 한글로 변환하기 위해 각 요일의 한글 표현을 배열로 생성합니다.
  const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
  // 현재 날짜의 요일을 가져와서 해당 요일의 한글 표현을 구합니다.
  const koreanWeekday = weekdays[date.getDay()];

  // 'YY.MM.DD(요일)' 형식으로 날짜와 요일을 결합하여 반환합니다.
  return `${year}.${month}.${day}(${koreanWeekday})`;
};

위 함수는 아래와 동일하게 구현이 가능합니다.

export const getFormattedDate = () => {
  const date = new Date();

  const year = date.getFullYear().toString().slice(-2);
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

   const options = { weekday: 'short' };
   const weekday = new Intl.DateTimeFormat('ko-KR', options).format(date);

  return `${year}.${month}.${day}(${weekday})`;
};

1. const options = { weekday: 'short' }; - 한글로 변환할 때, 요일을 짧은 형식으로 표시하는 옵션 객체를 생성합니다.

2. const weekday = new Intl.DateTimeFormat('ko-KR', options).format(date);-> Intl.DateTimeFormat 객체를 생성하고, 해당 객체의 format() 메서드를 사용하여 날짜의 요일을 한글로 변환합니다.

3. 'ko-KR'은 한국어 표기를 나타내는 locale identifier로, 날짜를 한국어로 표기하기 위해 사용됩니다.

4. options에는 앞서 생성한 요일 표시 옵션 객체를 전달하여, 날짜의 요일을 짧은 형식으로 변환합니다.

5. 결과적으로 weekday 변수에는 한글로 된 날짜의 요일이 담기게 됩니다!

 

7. 날짜를 나타내는 문자열을 'YYYY년 MM월 DD일' 형식으로 변환하여 반환하는 함수

export const getStringFormatDate = (dateString) => {
  // 입력된 값이 문자열이 아닌 경우, '-' 문자를 반환하여 오류 처리합니다.
  if (typeof dateString !== 'string') return '-';

  // 주어진 문자열에서 연도, 월, 일을 추출하여 각각의 변수에 저장합니다.
  const year = dateString.slice(0, 4); // 0부터 4자리까지를 추출하여 연도를 가져옵니다.
  const month = dateString.slice(4, 6); // 4부터 6자리까지를 추출하여 월을 가져옵니다.
  const day = dateString.slice(6, 8); // 6부터 8자리까지를 추출하여 일을 가져옵니다.

  // 'YYYY년 MM월 DD일' 형식으로 연도, 월, 일을 결합하여 문자열을 생성합니다.
  const formattedDate = `${year}년 ${month}월 ${day}일`;

  // 변환된 날짜 형식의 문자열을 반환합니다.
  return formattedDate;
};

해당 코드는 아래와 같이 사용 가능합니다.

const dateString = '20230724';
console.log(getStringFormatDate(dateString));

출력결과
'2023년 07월 24일'

 

여기까지 시간과 관련된 유틸함수를 알아봤습니다! 여기까지 읽어주셔서 감사합니다.