강의

N
챌린지

멘토링

N
클립

커뮤니티

인프런 커뮤니티 질문&답변

geekgleeguru님의 프로필 이미지
geekgleeguru

작성한 질문수

웹 개발의 혁신: C, C++, Rust로 시작하는 WebAssembly 마스터 클래스

Qt Designer 를 이용한 Hello World 출력 예제 구현

테스트 배포시 에러가 발생합니다.

작성

·

67

·

수정됨

0

스크린샷 2025-06-15 오후 4.32.21.png.webp

 

스크린샷 2025-06-15 오후 4.32.28.png.webp

 

http://127.0.0.1:3305/ex03_hello_world_designer.html 주소로 이동했습니다.
ex03_hello_world_designer.js:9 Uncaught (in promise) DataCloneError: Failed to execute 'postMessage' on 'Worker': SharedArrayBuffer transfer requires self.crossOriginIsolated.
    at ex03_hello_world_designer.js:9:16758
    at new Promise (<anonymous>)
    at loadWasmModuleToWorker (ex03_hello_world_designer.js:9:15451)
    at Array.map (<anonymous>)
    at Object.loadWasmModuleToAllWorkers (ex03_hello_world_designer.js:9:16962)
    at ex03_hello_world_designer.js:9:14758
    at ex03_hello_world_designer.js:9:17642
    at Array.forEach (<anonymous>)
    at callRuntimeCallbacks (ex03_hello_world_designer.js:9:17631)
    at preRun (ex03_hello_world_designer.js:9:7603)
(익명) @ ex03_hello_world_designer.js:9
loadWasmModuleToWorker @ ex03_hello_world_designer.js:9
loadWasmModuleToAllWorkers @ ex03_hello_world_designer.js:9
(익명) @ ex03_hello_world_designer.js:9
(익명) @ ex03_hello_world_designer.js:9
callRuntimeCallbacks @ ex03_hello_world_designer.js:9
preRun @ ex03_hello_world_designer.js:9
run @ ex03_hello_world_designer.js:9
runCaller @ ex03_hello_world_designer.js:9
removeRunDependency @ ex03_hello_world_designer.js:9
receiveInstance @ ex03_hello_world_designer.js:9
receiveInstantiationResult @ ex03_hello_world_designer.js:9
Promise.then
(익명) @ ex03_hello_world_designer.js:9
Promise.then
instantiateAsync @ ex03_hello_world_designer.js:9
createWasm @ ex03_hello_world_designer.js:9
(익명) @ ex03_hello_world_designer.js:9
qtLoad @ qtloader.js:231
await in qtLoad
init @ ex03_hello_world_designer.html:53
onload @ ex03_hello_world_designer.html:24
http://127.0.0.1:3305/ex03_hello_world_designer.html 주소로 이동했습니다.
ex03_hello_world_designer.js:9 Uncaught (in promise) DataCloneError: Failed to execute 'postMessage' on 'Worker': SharedArrayBuffer transfer requires self.crossOriginIsolated.
    at ex03_hello_world_designer.js:9:16758
    at new Promise (<anonymous>)
    at loadWasmModuleToWorker (ex03_hello_world_designer.js:9:15451)
    at Array.map (<anonymous>)
    at Object.loadWasmModuleToAllWorkers (ex03_hello_world_designer.js:9:16962)
    at ex03_hello_world_designer.js:9:14758
    at ex03_hello_world_designer.js:9:17642
    at Array.forEach (<anonymous>)
    at callRuntimeCallbacks (ex03_hello_world_designer.js:9:17631)
    at preRun (ex03_hello_world_designer.js:9:7603)
(익명) @ ex03_hello_world_designer.js:9
loadWasmModuleToWorker @ ex03_hello_world_designer.js:9
loadWasmModuleToAllWorkers @ ex03_hello_world_designer.js:9
(익명) @ ex03_hello_world_designer.js:9
(익명) @ ex03_hello_world_designer.js:9
callRuntimeCallbacks @ ex03_hello_world_designer.js:9
preRun @ ex03_hello_world_designer.js:9
run @ ex03_hello_world_designer.js:9
runCaller @ ex03_hello_world_designer.js:9
removeRunDependency @ ex03_hello_world_designer.js:9
receiveInstance @ ex03_hello_world_designer.js:9
receiveInstantiationResult @ ex03_hello_world_designer.js:9
Promise.then
(익명) @ ex03_hello_world_designer.js:9
Promise.then
instantiateAsync @ ex03_hello_world_designer.js:9
createWasm @ ex03_hello_world_designer.js:9
(익명) @ ex03_hello_world_designer.js:9
qtLoad @ qtloader.js:231
await in qtLoad
init @ ex03_hello_world_designer.html:53
onload @ ex03_hello_world_designer.html:24
스크린샷 2025-06-15 오후 4.32.43.png.webp

 

스크린샷 2025-06-15 오후 4.31.08.png.webp

릴리스 선택후 빌드한 html를 브라우저에 띄워서 테스트 해보니 로딩이 끝나지 않습니다.

실제 브라우저에 배포하려면 설정이 더 필요한걸 까요?

 

qtwebassemblywasm

답변 2

0

김대진님의 프로필 이미지
김대진
지식공유자

안녕하세요. geekgleeguru 님,

에러 메시지와 현재 상황을 보면, Qt for WebAssembly 애플리케이션이 브라우저에서 SharedArrayBuffer 를 사용하려고 시도하는데, 이 기능을 사용하려면 웹 페이지가 crossOriginIsolated 되어야 합니다.

즉, 브라우저에서 로컬 서버(http://127.0.0.1)를 통해 Qt WebAssembly를 실행할 때 필요한 보안 헤더가 빠졌기 때문에 WebAssembly 모듈이 제대로 로딩되지 못하고 로딩 화면에서 멈춰 있는 것입니다.

 

원인:

Qt WebAssembly는 성능 향상을 위해 SharedArrayBuffer를 사용하려고 하며, 이를 위해서는 다음 조건을 모두 충족해야 함:

HTTPS 또는 localhost 에서 서비스되어야 함

HTTP 응답 헤더에 다음 두 항목이 반드시 포함되어야 함:

Cross-Origin-Opener-Policy: same-origin

Cross-Origin-Embedder-Policy: require-corp

혹시 더 궁금한게 있으면 언제든 질문해 주세요.
감사합니다. 김대진 드림.

0

인프런 AI 인턴님의 프로필 이미지
인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

geekgleeguru님의 질문에 대한 답변을 드리겠습니다. 현재 “DataCloneError”와 관련된 에러는 WebAssembly 환경에서의 SharedArrayBuffer 사용과 관련이 있습니다. SharedArrayBuffer는 브라우저에서 안전한 환경, 즉 cross-origin isolation이 설정되어야 사용이 가능합니다.

아래 문제 해결을 위한 몇 가지 사항을 정리해 보았습니다.

문제 요약

  • SharedArrayBuffer를 사용할 때 self.crossOriginIsolated가 true로 설정되어야 합니다.
  • DataCloneError는 브라우저가 메모리를 관리할 수 없는 상태일 때 발생합니다.

해결 방법

  1. 강화된 보안 설정(CORS 및 COOP/COEP 적용):

    • 브라우저에서 cross-origin isolation을 지켜야 하며, 이를 위해 COOP(Cross-Origin Opener Policy)와 COEP(Cross-Origin Embedder Policy) 헤더를 설정해야 합니다.
    • ex03_hello_world_designer.html 파일을 호스팅할 때, 웹 서버 설정에서 다음 헤더를 추가해야 합니다:
      
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

  2. 서버 설정 확인:

    • 이 설정이 적용되려면 파일을 로컬 서버에서가 아닌 실제 서버에서 로드하는 것이 권장됩니다. 기본적인 로컬 파일 접근은 이러한 보호 기능이 적용되지 않기 때문입니다.
    • 가능한 서버 환경:
      • Node.js 서버나 간단한 Python HTTP 서버 등을 사용할 수 있습니다. 예시:
      python3 -m http.server 3305

  3. 웹 브라우저의 버전 확인:

    • 최신 브라우저가 필요할 수 있습니다. 특히 WebAssembly와 관련된 최신 보안 업데이트가 필요한 경우입니다.

  4. 테스트 및 디버그:

    • 서버 상에서 페이지를 테스트하고, 브라우저의 개발자 도구의 ‘네트워크’ 탭을 통해서 적절한 헤더가 잘 전달되는지 확인할 수 있습니다.

추가적으로 참고할 자료:

이 해결 방법들이 도움이 되길 바라며, 추가적으로 궁금한 점이 있거나 문제가 지속된다면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

geekgleeguru님의 프로필 이미지
geekgleeguru

작성한 질문수

전체 Q&A
질문하기