195. (TWOK/LOGIC) [Web] 자바스크립트 Proxy 사용해 운영 환경 인 경우 콘솔 로그 출력 히든 숨김 처리 로직 - console log, warn, error

---

[로직 정리]

​

정리 로직 : Web / Chrome / JavaScript

​

상태 : [Web] 자바스크립트 Proxy 사용해 운영 환경 인 경우 콘솔 로그 출력 히든 숨김 처리 로직 - console log, warn, error

​

 

---

[설 명]

​

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

1. 제 목 : [Web] 자바스크립트 Proxy 사용해 운영 환경 인 경우 콘솔 로그 출력 히든 숨김 처리 로직 - console log, warn, error


2. 테스트 환경 : Web / JavaScript / chrome


3. 사전) 👉 new Proxy 간략 설명 : 

  >> new Proxy 는 자바스크립트에서 객체의 동작을 가로채고 제어할 수 있는 강력한 메커니즘입니다.

  >> new Proxy 는 객체에 접근하거나 값을 바꾸는 행동을 “가로채서” 원하는 로직을 덧붙일 수 있습니다.

  >> new Proxy 기본 구조 : 

    const proxy = new Proxy(target, handler);

  >> 사전) new Proxy 단독 사용 시 주의점 : 

    - 상위 레벨만 감지
    - 중첩 객체 변경 → 감지 안 됨
    - 배열 내부 변경 → 감지 안 됨

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

------------------------------------------------------
✅ 사전 정리) 로직 구현 관련 필요 내용 정리
------------------------------------------------------

1. 웹 관리자 페이지 및 대시보드에서 운영 환경 인 경우 브라우저 콘솔 로그 출력을 막기 위해 해당 로직 구현


2. 출력 되는 콘솔 로그 종류로 ['log', 'debug', 'info', 'warn', 'error'] 에 포함 되는 로그 출력 막기 수행



------------------------------------------------------
✅ 로직 정리) window.onload 부분에서 운영 환경 버전 체크 후 new Proxy 사용해 콘솔 로그 출력 이벤트 막기 수행
------------------------------------------------------

1. 웹 자바스크립트에서 글로벌 전역 변수로 운영 및 개발 타입 환경 지정 플래그값 선언

  >> const GLOBAL_OPERATE_FLAG = true;


2. 자바스크립트 웹 브라우저 로드 완료 window.onload = async function() { } 이벤트에서 해당 플래그값 확인 수행

  window.onload = async function() { 

    if (GLOBAL_OPERATE_FLAG == true) { // 운영 모드 인 경우

      // .... 하위 로직 계속 ....

    }

  };


3. 운영 모드 플래그인 경우 > new Proxy 사용해 콘솔 로그 출력 제외 설정 실시

  try {
            
    // --------------------------------------
    // console 관련 로그 출력 막기
    // --------------------------------------
    // 'log', 'debug', 'info', 'warn', 'error' 관련 로그 출력 막기
    // --------------------------------------
    const noop = () => {};
    console = new Proxy(console, {
      get(target, prop) {
        if (['log', 'debug', 'info', 'warn', 'error'].includes(prop)) { // 🟦 로그 출력 제외 타입 지정
          return noop;
        }
        return target[prop];
      }
    });

  }
  catch(err){
    console.error("CONSOLE_LOG_SHOW_FLAG : Exception : ", err);
  }

  // .... 하위 로직 계속 .... 


4. 해당 설정 이후 소스 코드 단에서 출력 되는 콘솔 로그가 표시 되지 않는지 확인 수행

  console.log("[window onload] : 로그 출력 테스트 입니다.");
  console.warn("[window onload] : 로그 출력 테스트 입니다.");
  console.error("[window onload] : 로그 출력 테스트 입니다.");
  console.info("[window onload] : 로그 출력 테스트 입니다.");

  // --------------------------------------
  // 🟦 상위 설정으로 인해 로그 출력 테스트가 표시 되지 않음
  // --------------------------------------



------------------------------------------------------
✅ 자바스크립트 new Proxy 지원 범위 및 사용 가능한 브라우저 종류 정리
------------------------------------------------------

1. JavaScript new Proxy 는 ES6(ECMAScript 2015)에서 도입된 기능으로, 객체 동작을 가로채고(customize) 제어할 수 있는 기능입니다.


2. 데스크톱 브라우저 지원 범위 : 

  >> Chrome : 지원 : 오래된 버전부터 지원

  >> Edge (Chromium) : 지원 : 최신 완전 지원

  >> Firefox : 지원 : 완전 지원

  >> Safari : 지원 : 완전 지원

  >> Opera : 지원 : Chromium 기반

  >> Internet Explorer : ❌ 미지원 : 영구 미지원


3. 모바일 브라우저 지원 범위 : 

  >> Chrome : Android : 지원

  >> Safari : iOS : 지원

  >> Samsung Internet : 지원

  >> Firefox : Android : 지원

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

▶️ [간단 소스] 자바스크립트 Proxy 사용해 콘솔 로그 출력 막기 수행 - console log, debug, info, warn, error

https://kkh0977.tistory.com/8864

https://blog.naver.com/kkh0977/224299374888


▶️ [간단 소스] 자바스크립트 resize 이벤트 사용해 개발자 모드 진입 상태 확인 location.href blank 표시 소스 코드 숨김 설정

https://kkh0977.tistory.com/8865

https://blog.naver.com/kkh0977/224299381329


▶️ [간단 소스] 자바스크립트 Web 웹 크롬 브라우저 키이벤트 및 마우스 우클릭 이벤트 감지 개발자 도구 진입 막기 코드

https://kkh0977.tistory.com/8669

https://blog.naver.com/kkh0977/224202975940


▶️ [간단 소스] 자바스크립트 접속 한 브라우저 환경이 윈도우 환경 인지 확인 - is windows browser

https://kkh0977.tistory.com/8846

https://blog.naver.com/kkh0977/224294530021

// --------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8864

540. (javaScript) [간단 소스] 자바스크립트 Proxy 사용해 콘솔 로그 출력 막기 수행 - console log, debug, in

---