[Next.js] 배포 시 console 지우기

 

Next.js는 빌드 후 결과물에 console이 뜨지 않도록 하는 기능을 자체적으로 제공하고 있다.

 

next.config.js 파일의 compiler에 아래와 같이 removeConsole 옵션을 주면 간단하게 해결된다.

 

 

removeConsole: process.env.NODE_ENV === 'production',

 

 

(* NODE_ENV === 'production' 조건 없이 그냥 true값으로 주면, 개발환경에서도 콘솔이 뜨지 않게 되니 주의하자)

 

 

---

 

 

만약 모든 console을 제거하는 게 아닌, 특정콘솔(ex. console.error)은 띄워주고 싶다면 아래와 같이 작성하면 된다.

 

    removeConsole:
      process.env.NODE_ENV === 'production'
        ? { exclude: ['error', 'warn'] }
        : false,

 

 

 

Next.js 공식문서 관련내용

https://nextjs.org/docs/architecture/nextjs-compiler#remove-console

Architecture: Next.js Compiler | Next.js

 

 

 

---

 

만약 Next.js가 아닌 React를 쓰고 있다면, 아래와 같은 방법을 적용할 수 있다.

 

 

1. babel-plugin-transform-remove-console 플러그인 사용

위 플러그인 설치 후, .babelrc 파일에 아래 코드 추가

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

 

 

 

 

2. Javascript 자체 기능 사용

 

최상단 파일(App.ts)에 아래 코드를 추가한다.

 

  if (process.env.NODE_ENV === "production") {
    console = window.console || {};
    console.log = function no_console() {};
    console.warn = function no_console() {};
    console.error = function () {};
  }

 

 

 

만약 의도한대로 동작하지 않는다면, 아래 내용을 살펴본다.

 

 

1) process.env.NODE_ENV 값이 production 또는 development 모드로 제대로 나뉘는지 확인해보고, 만약 아니라면 package.json 파일을 아래와 같이 수정

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build --mode production",
    ...
}

 

 

2) 빌드 전 node_modules/.cache 삭제해주기

 

바벨과 타입스크립트는 내부적으로 이미 컴파일된 파일을 다시 컴파일하지 않도록 동작한다.

console이 나오고있는 상태인 development에서 빌드가 되고, 변경사항이 없다면 이미 캐싱된 파일이 있기 때문에 production 모드의 컴파일이 무시되기 때문에 발생하는 현상이다.