설명서Experience Cloud KCS

AEM에서 서드파티 또는 SPA 구성 요소가 올바르게 렌더링되지 않음

마지막 업데이트: 2026년 7월 16일

Angular, React, 마이크로 프론트엔드, 외부 임베드 및 독립 실행형 SPA를 AEM 페이지에 통합하려면 올바른 통합 모델과 구성이 필요합니다. 잘못된 구현으로 인해 렌더링 문제, 스타일 누락, 작성 제한 사항, 유효성 검사 문제, 페이로드 불일치, Dispatcher 다시 작성 오류 등이 발생하는 경우가 많습니다. 이 문서에서는 지원되는 통합 패턴 및 이러한 문제를 방지하는 데 필요한 단계를 간략하게 설명합니다.

설명 description

환경

  • Adobe Experience Manager as a Cloud Service (AEMaaCS)
  • Adobe Experience Manager On-Premise 소프트웨어
  • AEM Managed Services

문제/증상

  • 스타일링이나 기능 없이 서드파티 Angular, React 또는 위젯 구성 요소를 렌더링합니다.
  • JavaScript 또는 CSS 리소스를 로드하지 못했습니다.
  • 경험 조각 HTML 선택기 요청이 404 오류를 반환합니다.
  • 작성자는 AEM 페이지 내에 서드파티 구성 요소를 배치하거나 편집할 수 없습니다.
  • 포함된 소셜 미디어 콘텐츠가 표시되지 않습니다.
  • 지원되는 Angular 또는 React 통합 모델에 대해서는 불확실성이 있습니다.
  • 원격 SPA가 제대로 로드되거나 통합되지 않습니다.

원인

AEM은 다양한 통합 모델을 지원하며, 각 통합 모델에는 특정 요구 사항과 제한 사항이 있습니다. 지원되지 않는 포함 메서드를 사용하거나, 통합 모델이 잘못 혼합되거나, 경험 조각 재작성이 잘못 구성되거나, 원격 애플리케이션이 지원되는 패턴에 따라 호스팅 및 구성되지 않을 때 문제가 발생합니다.

해결 방법 resolution

이 문제를 해결하려면 다음 단계를 수행합니다.

  1. 특정 사용 사례에 대해 지원되는 통합 패턴(예: SPA 편집기, 하이브리드 HTL 및 React, 포함 구성 요소, 마이크로 프론트엔드 프레임워크, 원격 SPA 또는 경험 조각 통합)을 선택하십시오.
  2. AEM 6.5의 Angular 구현의 경우 필요한 SPA Editor 기능 팩이 설치 및 구성되어 있는지 확인합니다.
  3. HTL 페이지의 React 구성 요소의 경우 지원되는 클라이언트 라이브러리, 웹 구성 요소 래퍼 또는 컨테이너 요소를 통해 구성 요소를 로드합니다.
  4. SPA Editor 구현의 경우 구성 요소 매핑 및 모델 통합을 확인하십시오.
  5. 지원되는 소셜 미디어 콘텐츠에 대해 포함 또는 HTML 구성 요소를 사용하십시오.
  6. iframe, 웹 구성 요소, 원격 스크립트 로드 또는 모듈 통합과 같은 지원되는 접근 방식을 통해 마이크로 프론트엔드를 구현합니다.
  7. 지원되는 배포 방법을 사용하여 원격 SPA를 호스팅하고 애플리케이션 자산에 액세스할 수 있는지 확인하십시오.
  8. 외부 애플리케이션에서 콘텐츠를 재사용할 때 경험 조각 HTML 선택기를 사용하고 재작성 동작을 확인합니다.
  9. 포함된 PDF 보기를 위해 클라이언트 라이브러리를 통해 뷰어를 구현하고 소스 PDF 파일에 계속 액세스할 수 있도록 합니다.
  10. 작성자 및 게시 환경 모두에서 렌더링, 작성 기능 및 에셋 로드를 확인합니다.

관련 읽기

recommendation-more-help
experience-cloud-kcs-help-kbarticles