구성 요소 유형

사용자 지정 구성 요소와 UI 구성 요소를 만들고 시스템 구성 요소를 사용할 수 있습니다

구성 요소를 정의합니다. 구성 요소는 UI와 연결되는 데이터 계층입니다.

사용자 지정 구성 요소는 블로그 게시물, 작성자, 주소, 사용자 지정 원시 데이터 등입니다.

UI 구성 요소는 UI 요소, 푸터, 헤더, 히어로 등으로 표시된 사용자 지정 구성 요소일 뿐입니다.

시스템 구성 요소는 CMS에서 국가와 언어와 같이 미리 정의되어 있습니다.

UI 구성 요소란 무엇인가요?

페이지는 하나 이상의 UI 구성 요소로 이루어집니다

예시:

hero-block
feature-block
image-carousel
header/footer

각 UI 구성 요소는 페이지의 한 섹션을 나타냅니다.

UI 구성 요소 작업 흐름

컴포넌트 빌더에서 구성 요소(블록의 구조)를 정의합니다
UI 구성 요소를 생성합니다
UI 구성 요소를 페이지에 할당합니다
블록 레지스트리와 렌더러 설정에서 적절한 블록으로 클라이언트에서 렌더링합니다

예시: 히어로 블록 스키마

히어로 블록에는 다음이 포함될 수 있습니다:

이미지
제목
부제목

에디터의 JSON 스키마

[
  {
    "name": "heading",
    "type": "string",
    "required": false,
    "displayName": "heading"
  },
  {
    "name": "subtitle",
    "type": "string",
    "required": false,
    "displayName": "subtitle"
  },
  {
    "name": "hero_img",
    "type": "image",
    "required": false,
    "displayName": "hero_img"
  }
]

관리자 패널 설정

새 블록을 생성합니다
스키마(HeroSchema)를 연결합니다
블록 이름을 지정합니다(예: hero-block)

블록을 페이지에 할당

관리자 패널에서 라우트로 이동합니다
Assign Page 버튼을 클릭합니다
새로 만든 블록을 추가합니다

클라이언트에서 렌더링

블록이 할당되면 렌더러 설정을 사용하여 클라이언트 측에서 가져오고 렌더링할 수 있습니다.

요약

스키마는 블록의 구조를 정의합니다
블록은 페이지의 섹션을 정의합니다
페이지는 여러 블록으로 구성됩니다
완전히 사용자 지정 가능하며 재사용할 수 있습니다

Previous‹Collection of Pages with Components NextSetup server sent events (SSE) content refetch›

예시: 히어로 블록 스키마

히어로 블록에는 다음이 포함될 수 있습니다:

이미지

제목

부제목

에디터의 JSON 스키마

[
  {
    "name": "heading",
    "type": "string",
    "required": false,
    "displayName": "heading"
  },
  {
    "name": "subtitle",
    "type": "string",
    "required": false,
    "displayName": "subtitle"
  },
  {
    "name": "hero_img",
    "type": "image",
    "required": false,
    "displayName": "hero_img"
  }
]