심플한 js 클라이언트향 커스텀 logger

client-logger.ts

// formatDate helperz
export const DAY_WEEK = ['일', '월', '화', '수', '목', '금', '토'];
export const WEEK_NUMBER = 7;
export const HOURS = 60 * 60 * 1000;
export const MINUTES = 60 * 1000;
export const twoDigits = (num: number): string => {
  return num < 10 ? `0${num}` : `${num}`;
};

/*
 * Date을 format된 형태로 생성합니다.
 * format 에 정의한 string을 단순 치환 합니다. 대소문자 구분을 합니다.
 * yyyy: 4자리 년도
 * mm: 달
 * dd: 날
 * HH: 시간
 * MM: 분
 * SS: 초
 * MS: 밀리초
 * W: dayOfweek(월,화,수,목,금,토,일)
 * 그외 문자열은 치환 없이 그대로 유지합니다.
 * useSingleDigits 이 true이면 각 값이 1자리로 나올 수 있습니다.
 */
export const formatDate = ({
  date,
  format = 'yyyy.mm.dd. W',
  useSingleDigits = false,
}: {
  date: Date | string;
  format?: string;
  useSingleDigits?: boolean;
}): string => {
  if (!date) return '';
  const getDigitData = (data: number) => {
    if (useSingleDigits) return data;
    return twoDigits(data);
  };
  const rawDate = (() => {
    if (typeof date === 'string') return new Date(date);
    return date;
  })();
  const year = rawDate.getFullYear();
  const month = getDigitData(rawDate.getMonth() + 1);
  const day = getDigitData(rawDate.getDate());
  const hour = getDigitData(rawDate.getHours());
  const min = getDigitData(rawDate.getMinutes());
  const sec = getDigitData(rawDate.getSeconds());
  const msec = rawDate.getMilliseconds();
  const dayOfWeek = DAY_WEEK[rawDate.getDay()];

  return format
    .replaceAll('yyyy', `${year}`)
    .replaceAll('mm', `${month}`)
    .replaceAll('dd', `${day}`)
    .replaceAll('HH', `${hour}`)
    .replaceAll('MM', `${min}`)
    .replaceAll('SS', `${sec}`)
    .replaceAll('MS', `${msec}`)
    .replaceAll('W', dayOfWeek);
};

// 아래부터 logger.ts

export const isSupportedColor = (() => {
  try {
    const check = /\b(Chrome|Chromium)\//.test(navigator?.userAgent);
    return check;
  } catch (e) {
    console.log('Server Side');
  }
  return true;
})();

const getDate = () => formatDate({ date: new Date(), format: 'yyyy-mm-dd HH:MM:SS.MS' });

const Context = {
  log: `${isSupportedColor ? '%c' : ''}☕[${getDate()}][Log]`,
  error: `${isSupportedColor ? '%c' : ''}❗[${getDate()}][Error]`,
  warn: `${isSupportedColor ? '%c' : ''}⚠️[${getDate()}][Warn]`,
  info: `${isSupportedColor ? '%c' : ''}💬[${getDate()}][Info]`,
  debug: `${isSupportedColor ? '%c' : ''}⛏[${getDate()}][Debug]`,
};

const log = console.log.bind(console, Context.log, 'color: PowderBlue');
const error = console.error.bind(console, Context.error, 'color: Red');
const warn = console.warn.bind(console, Context.warn, 'color: Orange');
const info = console.info.bind(console, Context.info, 'color: Green');
const debug = console.debug.bind(console, Context.debug, 'color: DodgerBlue');

export const logger = {
  log,
  error,
  warn,
  info,
  debug,
};