배포할 때 console 로그 막기 / 비우기

보통 콘솔 창은 개발을 할 땐 유용하게 쓰이지만,

실제 배포할 때엔 민감한 정보가 포함되어있을 수 있으므로 보안을 위해서 콘솔창을 비워두는 것이 좋습니다.

하지만 일일이 지우기엔 매우 귀찮고, 에러 메시지의 경우 지우기 힘든 경우도 있습니다.

 

더러운 콘솔창 예시

 

콘솔창을 한꺼번에 지우거나 비우는 여러 방법이 존재하지만

아주 간편한 기능을 소개해드리겠습니다

 

JS 기능 이용

javascript 파일의 최상단에서 해당 코드를 추가해주시면 됩니다.

console이라는 객체를 초기화 해주는 코드입니다.

console.warn과 console.error 도 초기화 해줌으로써 지우기 힘든 메시지들도 보이지 않게 할 수 있습니다.

if (process.env.NODE_ENV === "production") { // production에서만 사용할 수 없도록
      console = window.console || {};
      console.log = function no_console() {}; // console log 막기
      console.warn = function no_console() {}; // console warning 막기
      console.error = function () {}; // console error 막기
}

 

⚠️ package.json 수정

저같은 경우는 배포한 버전에서 process.env.NODE_ENV 값이 production 으로 제대로 설정되지 않아 애를 먹었는데요,

build 부분에 --mode production 이라는 코드를 추가해줌으로써 손쉽게 설정이 가능합니다.

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

 

 

번외 1 - 라이브러리 이용

babel-plugin-transform-remove 라이브러리를 이용하는 방법도 있습니다.

📎 라이브러리 링크

npm i babel-plugin-transform-remove-console

 

.babelrc

해당 폴더를 루트에 만들어주고, 아래 코드를 작성해주면 끝입니다!

+ production(배포) 에만 콘솔창을 지우도록 설정해준 코드입니다

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

 

 

번외 2 - axios error 는 어떻게 지워?

stack overflow에서도 보면 api 와 소통할 때 발생하는 에러가 찍히는 것은 막기 힘들다고 나오는데요,

이를 위해 api의 response를 받을 때 에러가 나면, console창을 clear하는 방법이 임시방편이 될 수 있습니다.

console.clear();

 

 

이상 제 글이 도움이 되었길 바라며

글을 마치도록 하겠습니다! 🍅