투케이2K

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

JavaScript

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

투케이2K 2026. 5. 28. 21:05
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / JavaScript / console


- 사전) 👉 new Proxy 간략 설명 : 

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

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

  >> new Proxy 기본 구조 : 

    const proxy = new Proxy(target, handler);

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

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

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      } 

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module"> 

      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          // --------------------------------------
          // ✅ 콘솔 로그 출력 설정을 위한 플래그값 선언
          // --------------------------------------
          const CONSOLE_LOG_SHOW_FLAG = false; // true = 로그 표시 / false = 로그 숨김


          // --------------------------------------
          // ✅ CONSOLE_LOG_SHOW_FLAG 플래그 값에 따라서 Proxy 사용해 console 로그 출력 제외 설정
          // --------------------------------------
          if (CONSOLE_LOG_SHOW_FLAG == false) {

            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);
            }
          }

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

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

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

-----------------------------------------------------------------------------------------





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

▶️ [자바스크립트 Deep Proxy (재귀 Proxy) 사용해 JSON 객체 데이터 전체 변경 상태 이벤트 감지 - 깊은 객체 변경 감지]

https://kkh0977.tistory.com/8723

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


▶️ [자바스크립트 new Proxy 사용해 객체 변경 상태 이벤트 감지 , json 특정 key 데이터 변경 및 key 삭제 이벤트 감지]

https://kkh0977.tistory.com/8722

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


▶️ [var , let , const 변수 사용해 데이터 삽입 및 console log (콘솔 로그) 결과 출력 실시]

https://kkh0977.tistory.com/792

https://blog.naver.com/kkh0977/222380882942?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

542. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 qrcode 라이브러리 사용해 QR 코드 표시 팝업창 생성 수행  (0) 2026.05.29
541. (javaScript) [간단 소스] 자바스크립트 resize 이벤트 사용해 개발자 모드 진입 상태 확인 location.href blank 표시 소스 코드 숨김 설정  (0) 2026.05.28
539. (javaScript) [간단 소스] 자바스크립트 ms-powerpoint 스키마 호출을 통해 파워포인트 앱 실행 및 파일 열기 수행 - open scheme file  (0) 2026.05.27
538. (javaScript) [간단 소스] 자바스크립트 접속 한 브라우저 환경이 윈도우 환경 인지 확인 - is windows browser  (0) 2026.05.23
537. (javaScript) [간단 소스] 자바스크립트 파일 데이터 fetch get 방식 호출 및 응답 파일 내용 읽기 , window.open 동적 html 팝업창 표시  (0) 2026.05.21
'JavaScript' Related Articles more
Comments