CMS에서 편집자 경험 및 개발자 경험을 조정합니다

재사용 가능한 구성 요소는 강력하고 코드 효율적인 프론트 엔드를 구축하는 데 환상적입니다. 똑같이 강력한 컨텐츠 관리는 프론트 엔드 프레젠테이션에서 컨텐츠 편집을 분리합니다. 이를 통해 유연한 컨텐츠 구조화 및 API 소비 프론트 엔드로 전달할 수 있습니다. 이 조합은 Jamstack 아키텍처의 초석입니다.

그러나 구성 요소 기반 프론트 엔드를 헤드리스 CMS 경험과 정렬하는 것은 어려울 수 있습니다. 그것들을 연결하는 것은 본질적으로 어렵지 않지만, CMS 편집기의 경험을 반영하는 재사용 가능한 일관된 구성 요소 시스템을 만들려면 신중한 고려가 필요합니다. 이상적인 시나리오는 완벽한 컨텐츠 생성 및 예측 가능한 구성 요소 구조화입니다.

CMS와 프론트 엔드 구성 요소 간의 간격을 연결합니다

간단한 버튼 구성 요소는 이러한 복잡성을 보여줍니다. React에서는 버튼이 (대상 링크) 및 children (버튼 텍스트) 속성이 to 수 있습니다. 컨텐츠 편집자의 경우 이러한 속성 이름은 직관적이지 않습니다.

이를 해결하기 위해 몇 가지 접근법을 탐색합니다.

CMS 필드를 구성 요소 속성과 일치시킵니다

CMS 필드 ( to 및 children )를 구성 요소 특성에 직접 매핑하는 것이 종종 실패합니다. 편집자는이 용어가 혼란스럽게 생각합니다. CMS에서 "label"및 "url"과 같은보다 사용자 친화적 인 레이블을 사용하면 유용성이 향상되지만 코드와 일치하지 않습니다.

마스킹 속성

헤드리스 CMSS는 종종 API 이름과 다르게 레이블링 필드를 허용합니다. CMS에서 "레이블"과 "URL"을 사용할 수 있지만 코드에서 "어린이"와 "to"를 사용할 수 있습니다. 그러나 이로 인해 CMS 레이블과 코드 속성 간의 관계가 가려져 디버깅 복잡성이 추가됩니다.

구성 요소 속성 수정

CMS 필드 이름과 일치하도록 구성 요소 속성을 조정하는 것은 간단 해 보이지만 유연성을 제한하고 불일치로 이어질 수 있습니다. CMS 데이터에는 label 및 url 을 사용하지만 기능 (아이콘과 같은 기능을 추가하려면 추가 로직 또는 속성이 필요하므로 구성 요소의 디자인을 손상시킬 수 있습니다.

변압기 솔루션

최적의 솔루션에는 편집자 및 개발자 경험을 분리하는 것이 포함됩니다. 편집기를위한 CMS를 사용하고 사용하기 쉽고 개발자 효율성을위한 코드베이스를 설계하십시오. 직접적인 패리티는 거의 없기 때문에 트랜스포머를 소개합니다.

트랜스포머는 프레임 워크에 관계없이 CMS 데이터를 프론트 엔드 구성 요소에 의해 쉽게 소비 할 수있는 형식으로 변환하는 유틸리티입니다. 세 가지 구현 접근법이 존재합니다.

1. 구성 요소 수준 변압기

트랜스포머를 해당 구성 요소와 함께 배치하십시오. 이것은 관련 파일을 함께 유지합니다. index.js 파일은 컨트롤러 역할을하여 구성 요소와 변압기를 가져오고 내 보냅니다. 변압기는 렌더링하기 전에 속성을 수정합니다.

버튼 :

 // index.js
"React"에서 React React;
"./component"에서 구성 요소 가져 오기;
"./transformer"에서 가져 오는 획득;

const button = (props) =><component></component> ;

기본 버튼 내보내기;

 // transformer.js
내보내기 기본값 (입력) => ({
  ...입력,
  어린이 : 입력 .Children || 입력. label,
  to : input.to || input.url,
});

 // component.js
const button = ({children, to}) => <a href="%7Bto%7D">{children}</a> ;

이 접근법은 간단하고 논리를 현지화하지만 많은 파일로 이어질 수 있습니다.

2. 펀칭 턴 변환

처음에 애플리케이션으로 가져온 지점에서 데이터를 변환하십시오. 이로 인해 브라우저 워크로드가 줄어들어 성능이 향상됩니다. 그러나 특히 복잡한 데이터 구조에서 복잡성을 크게 증가시킵니다. 테스트가 더 어려워집니다.

3. 전용 변환 엔진

모든 변환을 처리 할 수있는 별도의 응용 프로그램을 만듭니다. 이것은 가장 복잡하지만 여러 프로젝트에서 재사용 가능성을 제공합니다. 오버 헤드를 추가하지만 중앙 집중식으로 유지 가능한 솔루션을 제공합니다.

구성 요소 수준 변압기로 시작하고 필요에 따라보다 복잡한 접근 방식으로 진행하십시오. 핵심은 편집자와 개발자 모두에게 즐겁고 효율적인 경험을 만드는 것입니다.

위 내용은 CMS에서 편집자 경험 및 개발자 경험을 조정합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!