JavaScript 날짜/시간 처리 함수

웹 개발에서 날짜와 시간 처리는 필수적입니다. 이번 포스트에서는 JavaScript로 날짜와 시간을 다루는 실용적인 함수들을 소개합니다.

1. toDate - 날짜를 문자열로 변환

toDate 함수는 날짜를 다양한 형식의 문자열로 변환합니다.

const toDate = (date=null, delimiter=null, type=null, isDefaultToday=null, addDays=0) => {
	if(isDefaultToday!=false && date==null) date = new Date();
	delimiter = delimiter ?? '-';
	type = type ?? 'date';
	if(date instanceof Date || typeof date == 'string' || typeof date == 'number' && date >= 0 && date <= 4102444800000) {
		var m = date instanceof Date ? date : new Date(date);
		if(isNaN(m)) return date;//null;
		if(addDays) m.setDate(m.getDate() + addDays);
		return m.getFullYear() +
			delimiter + ("0" + (m.getMonth() + 1)).slice(-2) + 
			(type=='month' ? '' : delimiter + ("0" + m.getDate()).slice(-2));
	}
	return date;
};

기본 사용법

// 오늘 날짜를 기본 형식으로
toDate(); // "2024-01-15"

// 특정 날짜 변환
toDate(new Date(2024, 0, 15)); // "2024-01-15"

// 구분자 변경
toDate(new Date(), '/'); // "2024/01/15"

// 월만 표시
toDate(new Date(), '-', 'month'); // "2024-01"

// 일수 추가 (7일 후)
toDate(new Date(), '-', 'date', true, 7); // "2024-01-22"

활용 예시

// 날짜 범위 계산
const startDate = toDate(new Date(), '-', 'date', true, -7); // 7일 전
const endDate = toDate(new Date()); // 오늘

// 월별 리포트 생성
const currentMonth = toDate(new Date(), '-', 'month'); // "2024-01"

2. toDateWithWeekDay - 요일 포함 날짜

toDateWithWeekDay 함수는 날짜에 요일 정보를 추가합니다.

const toDateWithWeekDay = (date=new Date(), delimiter='-') => {
	if(typeof date == 'string' || date instanceof Date) {
		var m = typeof date == 'string' ? new Date(date) : date;
		if(isNaN(m)) return date;//null;
		return m.getFullYear() +
			delimiter +
			("0" + (m.getMonth() + 1)).slice(-2) +
			delimiter +
			("0" + m.getDate()).slice(-2) +
			(" (" + ['일','월','화','수','목','금','토'][m.getDay()] + ")");
	}
	return date;
};

기본 사용법

// 오늘 날짜와 요일
toDateWithWeekDay(); // "2024-01-15 (월)"

// 특정 날짜
toDateWithWeekDay(new Date(2024, 0, 15)); // "2024-01-15 (월)"

// 구분자 변경
toDateWithWeekDay(new Date(), '/'); // "2024/01/15 (월)"

활용 예시

// 일정 관리 시스템에서 사용
const scheduleDate = toDateWithWeekDay(new Date(2024, 0, 20));
// "2024-01-20 (토)" - 주말 확인 가능

// 캘린더 UI에 표시
const displayDate = toDateWithWeekDay(selectedDate);

3. toDatetime - 날짜와 시간 함께 표시

toDatetime 함수는 날짜와 시간을 함께 표시합니다.

const toDatetime = (date=new Date(), showSeconds=true) => {
	if(typeof date == 'string' || date instanceof Date) {
		var m = typeof date == 'string' ? new Date(date) : date;
		if(isNaN(m)) return null;
		return (
			m.getFullYear() +
			"-" +
			("0" + (m.getMonth() + 1)).slice(-2) +
			"-" +
			("0" + m.getDate()).slice(-2) +
			" " +
			("0" + m.getHours()).slice(-2) +
			":" +
			("0" + m.getMinutes()).slice(-2) +
			(showSeconds ? (":" + ("0" + m.getSeconds()).slice(-2)) : '')
		);
	}
	return date;
};

기본 사용법

// 오늘 날짜와 시간 (초 포함)
toDatetime(); // "2024-01-15 14:30:45"

// 초 제외
toDatetime(new Date(), false); // "2024-01-15 14:30"

// 특정 날짜/시간
toDatetime(new Date(2024, 0, 15, 14, 30, 45)); 
// "2024-01-15 14:30:45"

활용 예시

// 로그 타임스탬프
const logTime = toDatetime(new Date());
console.log(`[${logTime}] 사용자 로그인`);

// 주문 시간 기록
const orderTime = toDatetime(new Date(), false);
// "2024-01-15 14:30"

4. ymdhms - 타임스탬프 생성

파일명이나 고유 ID 생성에 유용한 함수입니다.

const ymdhms = () => {
	const pad2 = (n) => (n < 10 ? "0" + n : n);
	const date = new Date();
	return (
    date.getFullYear().toString() +
    pad2(date.getMonth() + 1) +
    pad2(date.getDate()) +
    pad2(date.getHours()) +
    pad2(date.getMinutes()) +
    pad2(date.getSeconds())
	);
}

기본 사용법

// 현재 날짜/시간을 숫자 문자열로
get_ymdhms(); // "20240115143045"
ymdhms(); // "20240115143045" (동일)

활용 예시

// 파일명 생성
const fileName = `report_${ymdhms()}.xlsx`;
// "report_20240115143045.xlsx"

// 고유 ID 생성
const uniqueId = `order_${get_ymdhms()}`;
// "order_20240115143045"

// 백업 파일명
const backupName = `data_backup_${ymdhms()}.sql`;

5. stdtime - 한국어 형식 표준 시간

한국어 사용자에게 친숙한 형식으로 날짜/시간을 표시합니다.

export const stdtime = (
	date,
	delimiter1 = "-",
	delimiter2 = " ",
	delimiter3 = ":",
	dayOfTheWeek = true,
	ampm = true,
	toY4 = true,
  time = true,
  ) => {
	if (date) {
    let d = new Date(date);
    const pad2 = (n) => (n < 10 ? "0" + n : n);
    return (
		(toY4 ? d.getFullYear() : d.getFullYear().toString().substr(-2)) +
		delimiter1 +
		pad2(d.getMonth() + 1) +
		delimiter1 +
		pad2(d.getDate()) +
		(dayOfTheWeek ? "(" + "일월화수목금토"[d.getDay()] + ")" : "") +
		delimiter2 +
		(time ? (ampm ? d.getHours() > 12 ? "오후 " + pad2(d.getHours() - 12) : "오전 " + pad2(d.getHours()): pad2(d.getHours())) 
    + delimiter3 + pad2(d.getMinutes()) + delimiter3 + pad2(d.getSeconds()) : '')
    );
	}
}

기본 사용법

// 기본 형식
stdtime(new Date(2024, 0, 15, 14, 30, 45));
// "2024-01-15(월) 오후 02:30:45"

// 요일 제외
stdtime(new Date(), '-', ' ', ':', false);
// "2024-01-15 14:30:45"

// 2자리 연도
stdtime(new Date(), '/', ' ', ':', true, true, false);
// "24/01/15(월) 오후 02:30:45"

활용 예시

// 사용자에게 표시할 시간
const userFriendlyTime = stdtime(new Date());
// "2024-01-15(월) 오후 02:30:45"

// 이메일 발송 시간
const emailTime = stdtime(new Date(), '-', ' ', ':', true, true);
// "2024-01-15(월) 오후 02:30:45"

6. getTimeAgo - 상대적 시간 표시

SNS나 댓글 시스템에서 "N분 전" 형식으로 시간을 표시합니다.

export const getTimeAgo = _date => {
  const now = new Date();
  const target = new Date(_date);
  const diffMs = now - target;
  
  if (diffMs < 0) return '조금 전';
  
  const diffSeconds = Math.floor(diffMs / 1000);
  const diffMinutes = Math.floor(diffSeconds / 60);
  const diffHours = Math.floor(diffMinutes / 60);
  const diffDays = Math.floor(diffHours / 24);
  
  // 1일 이내: 시간 단위
  if (diffDays < 1) {
    if (diffHours < 1) {
      if (diffMinutes < 1) return '조금 전';
      return `${diffMinutes}분 전`;
    }
    return `${diffHours}시간 전`;
  }
  
  // 1개월 이내: 일 단위
  if (diffDays < 30) return `${diffDays}일 전`;
  
  // 실제 달력 월 계산
  let months = 0;
  let tempDate = new Date(target);
  
  while (tempDate < now) {
    tempDate.setMonth(tempDate.getMonth() + 1);
    if (tempDate <= now) {
      months++;
    } else {
      tempDate.setMonth(tempDate.getMonth() - 1);
      break;
    }
  }
  
  const remainingDays = Math.floor((now - tempDate) / (24 * 60 * 60 * 1000));
  
  if (months === 0) return `${diffDays}일 전`;
  if (remainingDays === 0) return `${months}개월 전`;
  return `${months}개월 ${remainingDays}일 전`;
}

기본 사용법

// 5분 전
getTimeAgo(new Date(Date.now() - 5 * 60 * 1000)); 
// "5분 전"

// 2시간 전
getTimeAgo(new Date(Date.now() - 2 * 60 * 60 * 1000)); 
// "2시간 전"

// 3일 전
getTimeAgo(new Date(Date.now() - 3 * 24 * 60 * 60 * 1000)); 
// "3일 전"

// 2개월 전
getTimeAgo(new Date(Date.now() - 60 * 24 * 60 * 60 * 1000)); 
// "2개월 전"

활용 예시

// 댓글 시간 표시
const commentTime = getTimeAgo(comment.createdAt);
// "5분 전"

// 게시글 작성 시간
const postTime = getTimeAgo(post.createdAt);
// "2시간 전"

// 알림 시간
const notificationTime = getTimeAgo(notification.timestamp);
// "3일 전"

실전 활용 패턴

1. 날짜 범위 쿼리

// 지난 7일 데이터 조회
const startDate = toDate(new Date(), '-', 'date', true, -7);
const endDate = toDate(new Date());
const query = `SELECT * FROM orders WHERE date BETWEEN '${startDate}' AND '${endDate}'`;

2. 파일명 자동 생성

// 로그 파일 자동 생성
const logFileName = `app_${ymdhms()}.log`;
// "app_20240115143045.log"

3. 사용자 친화적 시간 표시

// 1일 이내는 상대 시간, 그 외는 절대 시간
const displayTime = (date) => {
  const diff = Date.now() - new Date(date).getTime();
  const oneDay = 24 * 60 * 60 * 1000;

  if (diff < oneDay) {
    return getTimeAgo(date);
  } else {
    return stdtime(new Date(date));
  }
};

마무리

이러한 날짜/시간 처리 함수들을 활용하면 웹 애플리케이션에서 날짜와 시간을 효율적으로 다룰 수 있습니다. 각 함수는 특정 용도에 최적화되어 있어, 상황에 맞게 선택하여 사용하면 됩니다.