마이크로 프론트엔드 콘텐츠 조각 선택기 micro-frontend-content-fragment-selector

Last update: Wed Apr 02 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

적용 대상:
Experience Manager as a Cloud Service

작성 대상:

관리자
사용자

마이크로 프론트엔드 콘텐츠 조각 선택기는 Adobe Experience Manager(AEM) as a Cloud Service 저장소와 쉽게 통합하는 사용자 인터페이스를 제공합니다. 인터페이스에서 저장소의 콘텐츠 조각을 찾아보거나 검색하고 애플리케이션에서 사용할 수 있습니다.

Micro-Frontend 사용자 인터페이스는 콘텐츠 조각 선택기 패키지를 사용하여 애플리케이션에서 사용할 수 있습니다. 패키지에 대한 모든 업데이트는 애플리케이션에 자동으로 가져와서 로드됩니다.

마이크로 프론트엔드 콘텐츠 조각 선택기 - 개요

콘텐츠 조각 선택기는 다음과 같은 많은 이점을 제공합니다.

모든 Adobe 애플리케이션과의 간편한 통합
콘텐츠 조각 선택기 패키지에 대한 업데이트는 애플리케이션에서 사용할 수 있는 콘텐츠 조각 선택기에 자동으로 배포되므로 유지 관리가 쉽습니다. 즉, 애플리케이션이 최신 수정 사항을 로드하기 위해 조치를 취할 필요가 없습니다.
애플리케이션 내에서 콘텐츠 조각 선택기 표시를 제어하는 속성을 사용하여 간편하게 맞춤화할 수 있습니다.
전체 텍스트 검색과 맞춤형 필터를 사용하면 작성 환경 내에서 콘텐츠 조각을 빠르게 탐색할 수 있습니다.
콘텐츠 조각 선택을 위해 IMS 조직 내에서 저장소를 전환하는 기능입니다.
콘텐츠 조각을 정렬하고 선택한 보기에서 보는 기능.

사전 요구 사항 prerequisites

IMS 인증 ims-authentication

IMS 인증 워크플로가 필요한 경우 다음을 확인해야 합니다.

응용 프로그램이 HTTPS에서 실행 중입니다.
애플리케이션의 URL이 IMS 클라이언트에 대해 허용되는 리디렉션 URL 목록에 있습니다.
IMS 로그인 흐름은 웹 브라우저의 팝업을 사용하여 구성 및 렌더링됩니다. 따라서 타깃 브라우저에서 팝업을 활성화하거나 허용해야 합니다.

또는 애플리케이션이 IMS 워크플로우로 이미 인증된 경우 대신 적절한 IMS 정보를 추가할 수 있습니다.

설치 installation

ContentFragmentSelector 구성 요소를 사용합니다. 몇 가지 설치 옵션이 있습니다.

NPM 레지스트리(개인 Adobe 레지스트리)

.npmrc에 다음 추가:

code language-html
`@aem-sites:registry=https://artifactory.corp.adobe.com/artifactory/api/npm/npm-aem-sites-release/`

그런 다음 설치

code language-html
`npm install @aem-sites/content-fragment-selector`

Git 저장소

package.json 종속성에 다음 내용을 추가하십시오.

code language-html
`"@aem-sites/content-fragment-selector": "git+https://github.com/adobe/<your-private-repo-url>.git#version"`

콘텐츠 조각 선택기 사용 using-the-Content-Fragment-selector

AEM as a Cloud Service 애플리케이션에서 콘텐츠 조각 선택기를 사용하도록 콘텐츠 조각 선택기를 설정하고 인증하면 콘텐츠 조각을 선택하거나 다양한 작업을 수행하여 저장소에서 조각을 검색할 수 있습니다.

콘텐츠 조각 선택기

오른쪽 상단의 저장소 선택기를 사용하여 사용할 저장소를 선택할 수 있습니다
맨 왼쪽 패널에서 다음 작업을 수행할 수 있습니다.
- 선택한 저장소에서 폴더 숨기기 또는 표시
- 특정 폴더를 선택하여 해당 폴더에 콘텐츠 조각 표시
기본 패널에서 다음 작업을 수행할 수 있습니다.
- 콘텐츠 조각 선택
- 콘텐츠 조각 검색
- 현재 목록을 오름차순 또는 내림차순 모두 다양한 열에 따라 정렬
- 보기 형식 표시기 참조
- 필터 표시, 숨기기 및 지정