제가 요새 자주 드는 생각이 하나 있습니다. 로컬에서 개발모드로 작업할때는 console.log를 자주 사용해줘야 조금 지나고 나서 흐름을 빠르게 파악하는 데에 도움이 되었었는데요.

슬슬 배포라는 것을 진행하다보니, 배포를 하려고 빌드를 할 때는 console.log()를 삭제해줘야 하는데(여기에는 여러 이유가 있습니다. 보안이라던지,, 메모리 누수가 좀 있다던지,, 민감한 정보가 웹화면에서 보일 수도 있으니까요. 앱 동작 자체에 영향을 주진 않음), 여러 곳에 많이도 적어둔 console.log()를 지우는게 여간 힘든 일이 아닐 수 없습니다. 어떻게.. 해결 할 방법이 없을까요??? (의문점을 해소해보고자 서칭을 해보았습니다)

여러 방법이 있습니다

1. VSCode 기준으로, Cmd+Shift+F를 사용해서 있는 부분을 확인해가면서 지우는 방법

우선 가장 Raw한 방식인 것 같습니다. 제가 방법을 서칭하기 전에 자주 사용했는데요..

굳이 없애고 싶지 않은 부분은 제외하고 지워주는 데에는 이 방법만 한게 없는거 같다고 느끼긴 하는데, 코드 양이 좀만 많아져도 힘들었습니다.

2. Babel-plugin 사용하기

바벨은 흔히들 Transpiler라고 소개를 합니다. 우리가 최신 JS문법을 사용했을때, 브라우저에서는 아직 지원해주지 않는 최신 문법들을 낮춰서 호환가능한 코드로 변환시켜주죠.

이런 바벨은 여러 설정을 위한 플러그인들이 존재합니다. 플러그인은, 이런 건 저렇게 변환하는 규칙 정도로 생각해주시면 될 것 같은데요. 다양한 플러그인들 중에는 역시나 저처럼 생각을 한 개발자가 있었네요

npm: babel-plugin-transform-remove-console

3. JS의 기능 활용하기

이건 저도 서칭하면서 새롭게 안 내용인데요

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

JS의 window객체를 활용하면 로그 내용들을 빌드 시에만 제거해버릴 수도 있다고 합니다!

<aside> ⚠️ Javascript 파일의 최상단에 아래 코드를 추가해주면 됩니다!

</aside>

// production에서만 사용할 수 없도록 : env파일 환경변수를 이용
// 현재 이 프로젝트는 react,vue같은 라이브러리를 사용하는게 아닌, NodeJS만 사용하는 것임을 알 수 있습니다(NODE_ENV)
if (process.env.NODE_ENV === "production") { 
			// window객체의 콘솔 객체 이용
      console = window.console || {};
      console.log = function no_console() {}; // console log 막기
      console.warn = function no_console() {}; // console warning 막기
      console.error = function () {}; // console error 막기
}

위처럼 작성한 후에는, build 명령어를 실행하는 경우엔, —mode production을 추가해서 production 모드임을 명시해줍니다.

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

<aside> ⚠️ 물론, 이 경우에 env파일을 통해서 환경변수를 설정해주셔야 합니다!

</aside>