TypeScript

createConsole

TypeScript
TypeScript
형식화된
Console
을 생성하는 팩토리 함수입니다. 모든 출력에
[name]
prefix를 자동으로 추가합니다.
hideOnProduction: true
옵션을 사용하면 production 환경에서 출력을 억제합니다. 기존 콘솔 호출을 그대로 유지하면서 형식화된 출력으로 대체할 수 있습니다.

구현

type Options = {
  hideOnProduction?: boolean;
};

export const createConsole = (name: string, options: Options): Omit<Console, 'Console'> => {
  const isProduction = process.env.NODE_ENV === 'production'; // 환경에 따라 변경
  const prefix = `[${name}]`;

  if (isProduction && options.hideOnProduction)
    return {
      log: () => {},
      info: () => {},
      warn: () => {},
      error: () => {},
      debug: () => {},
      trace: () => {},
      clear: () => {},
      assert: () => {},

      dir: () => {},
      dirxml: () => {},
      table: () => {},

      group: () => {},
      groupCollapsed: () => {},
      groupEnd: () => {},

      count: () => {},
      countReset: () => {},

      time: () => {},
      timeEnd: () => {},
      timeLog: () => {},
      timeStamp: () => {},

      profile: () => {},
      profileEnd: () => {},
    };

  return {
    log: (...args: unknown[]) => console.log(prefix, ...args),
    info: (...args: unknown[]) => console.info(prefix, ...args),
    warn: (...args: unknown[]) => console.warn(prefix, ...args),
    error: (...args: unknown[]) => console.error(prefix, ...args),
    debug: (...args: unknown[]) => console.debug(prefix, ...args),
    trace: (...args: unknown[]) => console.trace(prefix, ...args),
    clear: () => console.clear(),
    assert: (condition?: boolean, ...data: unknown[]) => console.assert(condition, prefix, ...data),

    dir: (item?: unknown, options?: unknown) => {
      console.log(prefix);
      console.dir(item, options);
    },
    dirxml: (...data: unknown[]) => {
      console.log(prefix);
      console.dirxml(...data);
    },
    table: (tabularData?: unknown, properties?: string[]) => {
      console.log(prefix);
      console.table(tabularData, properties);
    },

    group: (...data: unknown[]) => console.group(prefix, ...data),
    groupCollapsed: (...data: unknown[]) => console.groupCollapsed(prefix, ...data),
    groupEnd: () => console.groupEnd(),

    count: (label?: string) => console.count(`${prefix} ${label}`),
    countReset: (label?: string) => console.countReset(`${prefix} ${label}`),

    time: (label?: string) => console.time(`${prefix} ${label}`),
    timeLog: (label?: string, ...data: unknown[]) => console.timeLog(prefix, label, ...data),
    timeEnd: (label?: string) => console.timeEnd(`${prefix} ${label}`),
    timeStamp: (label?: string) => console.timeStamp(`${prefix} ${label}`),

    profile: (label?: string) => console.profile(`${prefix} ${label}`),
    profileEnd: (label?: string) => console.profileEnd(`${prefix} ${label}`),
  };
};

사용법

1. 기본 사용

const console = createConsole('MyModule', {});

console.log('Hello'); // '[MyModule] Hello'
console.warn('주의'); // '[MyModule] 주의'

2. production 환경에서 숨기기

const console = createConsole('MyModule', { hideOnProduction: true });

// production: ''
// development: '[MyModule] 디버그 메시지'
console.log('디버그 메시지');

참조