Angular에서 프로덕션 빌드를 위해 console.log를 비활성화하는 가장 간단한 방법은 무엇입니까?

나는 다른 개발자들과 함께 일하며 그들 대부분은 개발을 위해 console.log() 또는 다른 콘솔 방법에 의존합니다. 콘솔을 사용하여 개발하는 동안 디버깅할 다양한 값을 인쇄합니다. 저는 이 접근 방식을 콘솔 기반 개발이라고 부릅니다. 멋진 이름이죠?

이러한 콘솔 기능은 사용자가 이해할 수도 있고 이해하지 못할 수도 있는 브라우저 콘솔에 인쇄된 많은 것을 볼 수 있으므로 프로덕션에서 압도적입니다. 때때로 주니어 개발자는 잠재적인 보안 위험을 유발할 수 있는 중요한 것을 콘솔에 남길 수 있습니다.

따라서 프로덕션에 콘솔을 사용해서는 안 됩니다. 다음과 같이 프로덕션에서 콘솔을 비활성화할 수 있는 다양한 방법이 있습니다.

로거와 같은 라이브러리를 사용하여

코드에 콘솔 기능이 포함된 경우 빌드가 실패하는 Linting 규칙 생성

또는 이 작업을 수행하기 위해 간단한 서비스를 작성하고 있습니다.

이 게시물에서는 프로덕션 단계에서 콘솔을 비활성화하는 서비스를 만드는 방법을 단계별로 살펴보겠습니다.

프로젝트에 서비스를 추가합니다. ConsoleToogleService라고 합니다. 서비스에서는 모든 콘솔 기능을 무효화합니다. 따라서 서비스는 아래와 같아야 합니다.

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ConsoleToggleService {

  constructor() { 

  }

  disableConsoleInProduction(): void {
    if(environment.production){
      console.warn(`🚨 Console output is disabled on production!`);
      console.log = function():void{}; 
      console.debug = function():void{};
      console.warn = function():void{};
      console.info = function():void{};
    }
  }
}

서비스에서 disableConsoleInProduction()이라는 함수를 볼 수 있습니다. 이 기능 내에서 모든 콘솔 기능을 무효화하고 있습니다. 이렇게 간단합니다.

이제 AppComponent에서 이 서비스를 주입하고 아래와 같이 생성자에서 함수를 호출합니다.

  constructor(private consoleToggleService : ConsoleToggleService){

    this.consoleToggleService.disableConsoleInProduction();

  }

프로덕션용 애플리케이션을 빌드하면 콘솔이 없습니다. 그러나 개발 콘솔은 평소와 같이 작동합니다.
이 게시물이 도움이 되었기를 바랍니다. 읽어 주셔서 감사합니다.