JavaScript에서 globalThis.appState를 활용하여 브라우저 탭 내에서 앱 상태를 공유하고 동적으로 스크립트 코드를 호출하는 방법을 2026년 최신 기준으로 정리했습니다. 동일 탭에서는 상태 공유가 가능하지만, iframe, Web Worker, 다른 탭이나 기기에서는 기본적으로 공유되지 않습니다.
globalThis.appState로 앱 상태를 공유하는 방법은?
JavaScript에서 globalThis 객체는 브라우저 환경에 상관없이 전역 객체를 가리키는 표준 키워드입니다. ES2020부터 표준화되어 최신 런타임에서 널리 지원됩니다. 이를 활용하면 동일한 탭 내에서 여러 스크립트 간에 상태를 공유할 수 있습니다. 예를 들어, `globalThis.appState` 객체를 정의하고 여기에 `globalValue`와 같은 변수 및 `testFunction`과 같은 함수를 포함시켜 관리할 수 있습니다. 실제 경험상, 이 방식은 동적 모듈이나 플러그인 간의 상태 연동에 유용합니다. `globalThis.appState.globalValue` 값을 변경하면 해당 값을 참조하는 다른 스크립트에서도 즉시 반영됩니다.
동적 스크립트 코드를 호출하는 방법은?
동적으로 스크립트 코드를 호출하려면, 먼저 JavaScript 문자열 형태로 코드를 정의해야 합니다. ES 모듈 문법(export)을 사용하는 코드는 모듈로 로딩해야 하므로, `new Function()` 생성자나 `eval()` 함수를 사용하여 문자열을 실행할 수 있습니다. 다만, `eval()`은 보안상의 이유로 사용을 지양하는 것이 좋으며, `new Function()`을 사용할 때는 코드 실행 컨텍스트를 명확히 이해하고 사용해야 합니다. 예를 들어, `globalThis.appState.testFunction()`을 호출하면 내부적으로 `setTimeout`을 통해 `globalThis.appState.globalValue`를 증가시키고, 이 변경된 값이 `value` 변수에 할당되어 콘솔에 출력됩니다. 이처럼 동적으로 정의된 함수를 호출하여 전역 상태를 변경하고 이를 다른 코드에서 활용할 수 있습니다.
globalThis.appState 사용 시 주의할 점은?
globalThis.appState는 동일 탭 내에서만 상태를 공유한다는 점을 명확히 인지해야 합니다. iframe, Web Worker, 다른 탭이나 기기에서는 기본적으로 상태가 분리되므로, 이러한 환경 간의 상태 공유가 필요하다면 `postMessage` API와 같은 별도의 통신 메커니즘을 사용해야 합니다. 또한, 전역 상태를 과도하게 사용하면 코드의 복잡성이 증가하고 예측하기 어려워질 수 있으므로, 꼭 필요한 경우에만 제한적으로 사용하는 것이 좋습니다. 실제 개발 시에는 상태 관리 라이브러리(예: Redux, Zustand)를 활용하는 것이 더 체계적이고 효율적인 방법일 수 있습니다. 개인의 개발 환경과 프로젝트 규모에 따라 적절한 방법을 선택하는 것이 중요합니다.
더 자세한 내용은 원본 글에서 확인하세요.
