컴포넌트 유형

컴포넌트를 정의합니다. 컴포넌트는 UI와 연결되는 데이터 계층입니다.

사용자 지정 컴포넌트는 블로그 게시물, 작성자, 주소, 사용자 정의 원시 데이터 등을 의미합니다. UI 컴포넌트는 UI 요소로 표시된 사용자 지정 컴포넌트로, 푸터, 헤더, 히어로 영역 등을 포함합니다. 시스템 컴포넌트는 CMS에서 국가와 언어처럼 미리 정의된 항목입니다.

UI 컴포넌트란 무엇인가요?

페이지는 둘 이상의 UI 컴포넌트로 구성됩니다.

예시:

• 히어로 블록
• 피처 블록
• 이미지 캐러셀
• 헤더/푸터

각 UI 컴포넌트는 페이지의 한 섹션을 나타냅니다.

UI 컴포넌트 워크플로우

1. 컴포넌트 빌더에서 컴포넌트(블록의 구조)를 정의합니다.
2. UI 컴포넌트를 생성합니다.
3. UI 컴포넌트를 페이지에 할당합니다.
4. 블록 레지스트리와 렌더러 설정에서 적절한 블록을 사용하여 클라이언트에서 렌더링합니다.

예시: 히어로 블록 스키마

히어로 블록에는 다음과 같은 요소가 포함될 수 있습니다:

• 이미지
• 제목
• 부제목

에디터의 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(페이지 할당)을 클릭합니다.
• 새로 생성한 블록을 추가합니다.

클라이언트에서 렌더링

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

요약

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