투케이2K

518. (javaScript) 자바스크립트 globalThis.appState 공통 접근 전역 공유 상태 value 값 , function 함수 정의 및 동적 스크립트 코드 호출 본문

JavaScript

518. (javaScript) 자바스크립트 globalThis.appState 공통 접근 전역 공유 상태 value 값 , function 함수 정의 및 동적 스크립트 코드 호출

투케이2K 2026. 3. 27. 19:50
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / export function / import module / globalThis.appState


- 사전) 👉 globalThis 간략 설명 : 

  >> globalThis 는 전역 객체를 가리키는 표준 키워드입니다.

    - 브라우저 환경마다 전역 객체 이름이 달랐지만, globalThis 는 어디서나 동일합니다.

  >> globalThis 는 ES2020 (ES11) 부터 표준화되어 최신 런타임에서 널리 지원됩니다.

  >> globalThis 는 동적 모듈/플러그인, 레거시 스크립트, 여러 번 로드되는 코드 간에 같은 상태를 공유할 수 있습니다.

  >> globalThis.appState 가 공유 되는 기준 : 

    - 동일 탭 내부 : ✅ 공유됨
    - iframe 내부 : ❌ 기본적으로 분리됨
    - Web Worker : ❌ 분리됨 (postMessage 필요)
    - 다른 탭 : ❌ 공유 안 됨
    - 다른 브라우저 : ❌ 공유 안 됨
    - 다른 기기 : ❌ 공유 안 됨

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





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

<!DOCTYPE HTML>
<html lang="ko">
<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">


    <!-- 내부 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 = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {
          

          // --------------------------------------------
          // [자바스크립트 기본 변수 선언]
          // --------------------------------------------
          var value = 0;


          // --------------------------------------------
          // ✅ [자바스크립트 공유 상태 정의 부분에 함수 생성 수행]
          // --------------------------------------------
          globalThis.appState = {
            globalValue: 0, // 변수 생성

            testFunction(){ // 함수 생성
              console.log("testFunction start");

              const timeAlert = setTimeout(() => { // 타이머
                              
                globalThis.appState.globalValue ++; // ✅ 공유 변수 값 변경

                value = globalThis.appState.globalValue; // 변수값 지정

                console.log("testFunction value : ", value);
      
              }, 500 );
            }
          };


          // --------------------------------------------
          // ✅ [자바스크립트 소스 코드 문자열을 정의 : ES 모듈 문법(export)을 사용하고 있어 모듈로 로딩할 의도 정의]
          // --------------------------------------------          
          const source = `
            
            export function run() {
              console.log('dynamic module start');

              try {

                globalThis.appState.testFunction(); // ✅ 공유 함수 호출 수행

              }
              catch(exception){
                console.error('dynamic module exception : ', exception);
              }

            }
          `;


          // --------------------------------------------
          // [문자열을 Blob 으로 감싸 브라우저가 읽을 수 있는 바이너리 객체로 변환]
          // --------------------------------------------                      
          const blob = new Blob([source], { type: 'text/javascript' });
          const url = URL.createObjectURL(blob); // Blob을 참조하는 Object URL 생성


          // --------------------------------------------
          // [동적 import()로 모듈 로딩]
          // --------------------------------------------            
          const mod = await import(url);
          mod.run(); // ✅ export function run() 으로 내보낸 함수를 호출


          // --------------------------------------------
          // [리소스 정리: Object URL 해제]
          // --------------------------------------------
          URL.revokeObjectURL(url);


          // --------------------------------------------
          // ✅ [로그 출력 예시]
          // --------------------------------------------
          // dynamic module start
          // testFunction start
          // testFunction value :  1
          // --------------------------------------------

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

        }

      };

    </script>


</head>


<body>

</body>

</html>

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





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

[자바스크립트 globalThis.appState 공통으로 접근 가능한 전역 공유 상태 설명 정리]

https://kkh0977.tistory.com/8709

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


[간단 소스] 자바스크립트 window.open 사용해 새창 팝업창 열기 후 window.opener.postMessage 메시지 전달 수행

https://kkh0977.tistory.com/8668

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


[자바스크립트 동적 html 코드 및 style 코드 작성 후 window open 동작 테스트]

https://kkh0977.tistory.com/8663

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


[동적으로 div 레이아웃 생성 및 스타일 속성 지정 실시]

https://kkh0977.tistory.com/833

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


[부트스트랩 (bootstrap) 사용해 게시판 table 동적 목록 생성, pagination 페이징 처리]

https://kkh0977.tistory.com/1011

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

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

'JavaScript' 카테고리의 다른 글

517. (javaScript) 자바스크립트 Deep Proxy (재귀 Proxy) 사용해 JSON 객체 데이터 전체 변경 상태 이벤트 감지 - 깊은 객체 변경 감지  (0) 2026.03.26
516. (javaScript) 자바스크립트 new Proxy 사용해 객체 변경 상태 이벤트 감지 , json 특정 key 데이터 변경 및 key 삭제 이벤트 감지  (0) 2026.03.25
515. (javaScript) 자바스크립트 globalThis.appState 공통으로 접근 가능한 전역 공유 상태 설명 정리  (0) 2026.03.20
514. (javaScript) [간단 소스] 자바스크립트 string 문자열 형식 동적 자바 스크립트 코드 작성 및 import 모듈 로딩 , 소스 코드 실행  (0) 2026.03.19
513. (javaScript) [간단 소스] 자바스크립트 new Map 맵 객체 생성 및 기본 사용 방법 정리 - set , get , delete , has , clear  (0) 2026.03.18
'JavaScript' Related Articles more
Comments