제가 요새 자주 드는 생각이 하나 있습니다.
로컬에서 개발모드로 작업할때는 console.log를 자주 사용해줘야 조금 지나고 나서 흐름을 빠르게 파악하는 데에 도움이 되었었는데요.
슬슬 배포라는 것을 진행하다보니,
배포를 하려고 빌드를 할 때는 console.log()를 삭제해줘야 하는데(여기에는 여러 이유가 있습니다. 보안이라던지,, 메모리 누수가 좀 있다던지,, 민감한 정보가 웹화면에서 보일 수도 있으니까요. 앱 동작 자체에 영향을 주진 않음), 여러 곳에 많이도 적어둔 console.log()를 지우는게 여간 힘든 일이 아닐 수 없습니다.
어떻게.. 해결 할 방법이 없을까요???
(의문점을 해소해보고자 서칭을 해보았습니다)
여러 방법이 있습니다
1. VSCode 기준으로, Cmd+Shift+F를 사용해서 있는 부분을 확인해가면서 지우는 방법
우선 가장 Raw한 방식인 것 같습니다.
제가 방법을 서칭하기 전에 자주 사용했는데요..
굳이 없애고 싶지 않은 부분은 제외하고 지워주는 데에는 이 방법만 한게 없는거 같다고 느끼긴 하는데, 코드 양이 좀만 많아져도 힘들었습니다.
2. Babel-plugin 사용하기
바벨은 흔히들 Transpiler라고 소개를 합니다.
우리가 최신 JS문법을 사용했을때, 브라우저에서는 아직 지원해주지 않는 최신 문법들을 낮춰서 호환가능한 코드로 변환시켜주죠.
이런 바벨은 여러 설정을 위한 플러그인들이 존재합니다.
플러그인은,
이런 건 저렇게 변환하는 규칙 정도로 생각해주시면 될 것 같은데요.
다양한 플러그인들 중에는 역시나 저처럼 생각을 한 개발자가 있었네요
3. JS의 기능 활용하기
이건 저도 서칭하면서 새롭게 안 내용인데요
JS의 window객체를 활용하면 로그 내용들을 빌드 시에만 제거해버릴 수도 있다고 합니다!
Javascript 파일의 최상단에 아래 코드를 추가해주면 됩니다!
// 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 막기
}
JavaScript
복사
위처럼 작성한 후에는,
build 명령어를 실행하는 경우엔, —mode production을 추가해서 production 모드임을 명시해줍니다.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
JavaScript
복사
물론, 이 경우에
env파일을 통해서 환경변수를 설정해주셔야 합니다!