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

---

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

---

[설명 정리]

​

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

- 개발 환경 : Web


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


- 사전) 👉 globalThis 간략 설명 : 

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

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

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

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





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

1. 사전) globalThis.appState 에서 appState 는 개발자 임의로 설정할 수 있는 전역 사용자 정의 변수입니다.

  >> ✔️ appState 외에 다른 이름을 지정할 수 있으며, 이름을 어떻게 짓느냐는 100% 개발자 선택입니다.


2. globalThis.appState 는 관용적으로 애플리케이션 전역 공유 상태를 담기 위한 네임스페이스 객체입니다.


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


4. globalThis.appState 는 전역 변수 난립을 방지하고 한 곳으로 모으는 효과 (예: appState.user, appState.config, appState.counters 등) 를 가집니다.


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

  >> 동일 탭 내부 : ✅ 공유됨

  >> iframe 내부 : ❌ 기본적으로 분리됨

  >> Web Worker : ❌ 분리됨 (postMessage 필요)

  >> 다른 탭 : ❌ 공유 안 됨

  >> 다른 브라우저 : ❌ 공유 안 됨

  >> 다른 기기 : ❌ 공유 안 됨


6. globalThis.appState 안전한 초기화 패턴 예시 : 여러 번 실행되어도 덮어쓰지 않게 존재할 때는 유지하고 없으면 생성하는 방식

  >> globalThis.appState ??= { defaultCnt: 0 };

  >> ??=(Nullish Coalescing Assignment) 사용 : 값이 null/undefined일 때만 대입


7. globalThis.appState 를 사용해 동적 자바스크립트 코드 생성 및 공용 상태 활용 소스 코드 예시

  window.onload = async function() {
    console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

    try {

      // --------------------------------------------
      // ✅ [자바스크립트 소스 코드 문자열을 정의 : ES 모듈 문법(export)을 사용하고 있어 모듈로 로딩할 의도 정의]
      // --------------------------------------------
      const data = "twok";        

      const source = `
        globalThis.appState = { defaultCnt: 0 }; // ✅ (공유) 상태 준비

        export function run() {
          console.log('dynamic module start');

          try {

            globalThis.appState.defaultCnt++; // ✅ 전역 공유 상태 수정

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

      console.log('globalThis.appState.defaultCnt : ', globalThis.appState.defaultCnt);

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

  };

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





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

[간단 소스] 자바스크립트 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

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

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8668

502. (javaScript) [간단 소스] 자바스크립트 window.open 사용해 새창 팝업창 열기 후 window.opener.postMessage

---