운영 빌드 시 console.log 제거하기. 덤으로 no-console 에러도 해결

Photo by James Harrison on Unsplash

console.log

JavaScript 프로그래밍 시 디버깅 목적으로 브라우저의 console.log 메서드를 자주 사용하게 됩니다. 사용하기 간편하고 애플리케이션의 동작에 직접적인 영향을 주지 않기 때문에 개발자 도구의 Debugger 보다 더 자주 사용하게 되는 것 같습니다. 

if(condition) {
    //...
} else {
    console.log('이 메시지가 출력되면 절대 안된다!');
    console.log('뭔가 잘못 되었다.');
}

console.log 는 가장 간편한 디버깅 도구이긴 하지만 운영에 배포되는 어플리케이션에는 포함되지 않는 것이 좋습니다. 불필요한 코드 이기도 하고 보안 이슈가 발생할 가능성도 있습니다. 무엇보다 개발자가 신경을 안 썼다는 티가 나서 좋지 않습니다.

 

no-console 에러

WebPack 프로젝트 빌드 시 ES-Lint 의 no-console 에러가 발생하는 경우가 있습니다. ES-Lint의 no-console 룰은 소스코드에 console.log 메서드를 사용하는 코드가 남아있는 경우 위반으로 처리합니다. console.log 메서드는 디버깅 목적으로 사용되어야 하며, 따라서 빌드 배포 시에 코드에 포함되어 있으면 안 된다는 이야기입니다.

 

https://eslint.org/docs/rules/no-console

no-console - Rules

ES-Lint 인라인 설정으로 no-console 룰 적용을 제외시키는 방법도 있습니다. eslint-disable이나 eslint-disable-next-line 구문을 이용하면 룰 적용을 파일 단위 또는 라인 단위로 on / off 시킬 수 있습니다.

/* 파일 전체에 no-console 룰 사용 안함, 파일 최상단에 선언 */
/* eslint-disable no-console */
console.log('hello')

/* 라인 단위로 no-console 룰 적용 제외 */
/* eslint-disable-next-line no-console */
console.log('world')

 

일반적으로는 프로젝트의 .eslintrc.js 파일에 Rules 설정으로 전역으로 적용하게 됩니다. 아래 설정으로 적용 시 프로젝트 전체에 no-console 룰 적용을 예외처리합니다.

module.exports = {
    rules: {
    	'no-console': 'off'
    }
}

 

빌드 시 console.log 제거하기

디버깅 목적으로 사용한 console.log를 모든 소스코드에서 찾아서 손으로 지우는 노가다 노력 대신에 빌드 시에 자동으로 console.log 구문을 제거하는 방법이 있습니다. Babel의 babel-plugin-transform-remove-console 플러그인을 사용하면 WebPack 빌드 시 console.log를 자동으로 제거할 수 있습니다.

 

https://www.npmjs.com/package/babel-plugin-transform-remove-console

babel-plugin-transform-remove-console

이 플러그인의 동작은 매우 단순합니다. 적용 시 소스 코드 내의 모든 console.* 호출을 제거합니다.

Before

console.log('Hello')

console.error('World')

After

 

플러그인 설치 및 적용

플러그인을 개발 의존성으로 설치합니다. 

npm install babel-plugin-transform-remove-console --save-dev

 

Babel 설정 파일(.babelrc 파일 또는 babel.config.js 파일) 에 플러그인을 등록합니다.

.babelrc

{
    plugins: ['transform-remove-console']
}

babel.config.js

module.exports = {
    plugins: ['transform-remove-console']
}

 

운영 빌드 시에만 적용하기

일반적으로 console.log의 제거는 Production Mode 빌드시에만 적용하는 것이 좋습니다. 아래와 같이 process.env.NODE_ENV 변수를 참조하여 선택적으로 플러그인을 적용할 수 있습니다.

/* 'production' 빌드 인경우 플러그인 적용 */
module.exports = {
    plugins: process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : []
}

 

위와 같이 WebPack 빌드시 환경변수를 참조하려면 package.json 파일의 빌드 스크립트 설정 시 모드 설정을 추가해야 합니다.

package.json

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
  }
}