[Next] production 배포 환경에서, console log 숨기기

 

 

 

development 환경에서 console.log는 버그를 잡는데 유용하게 쓰이거나,

중간 중간 상태 값들을 확인하는데 필요합니다.

 

하지만, production 환경(배포된 라이브서버)에서

console.log를 무자비하게 유저에게 보여진다면,

자칫 중요 정보를 보이게 할 수 있고, 지저분해 보일 수 있습니다.

 

프로젝트 내 console.log를 다 지우는 방법도 있겠지만,

놓칠 수 도 있으며 귀찮은 일입니다.

또한, dev 환경에서 버그 테스트를 하기 위해 일부러 console.log를 남기는 경우도 있을 것입니다.

 

그래서 prod환경에서는 console.log를 아예 노출이 되지 않도록

설정을 하고자 합니다.

크게 방법은 2가지 입니다.

 

1. babel plugin 설치

1) babel-plugin-transform-remove-console 설치

npm i babel-plugin-transform-remove-console

 

2) 루트 위치에 .babelrc file 생성

 

{
    "presets": [
        "next/babel"
    ],
    "env": {
        "production": {
            "plugins": [
                "transform-remove-console"
            ]
        }
    }
}

 

 

2. console.log function에 빈 function 대입하기

_app.tsx에서 아래 코드만 추가해주시면 됩니다. 

console.log = function(){}

 

저는 1번과 2번 방법 중에, 간단한 2번 방법을 사용해서 적용하였습니다.