콘텐츠가 풍부한 CMS를 React와 통합하는 방법

콘텐츠 관리 기능을 프레젠테이션 로직에서 분리하는 것은 헤드리스 CMS의 핵심 기능으로, 유연성을 높이고 다양한 유형의 애플리케이션과 쉽게 통합할 수 있습니다.

애플리케이션 내에 콘텐츠 관리 시스템(CMS)을 통합하면 통합 플랫폼을 통해 콘텐츠를 중앙 집중식으로 관리할 수 있어 웹사이트, 모바일 앱 등 다양한 프런트엔드 매체에 손쉽게 정보를 배포할 수 있습니다.

헤드리스 CMS란 무엇인가요?

헤드리스 콘텐츠 관리 시스템(CMS)은 통합 플랫폼에서 콘텐츠와 디지털 자산을 모두 생성하고 관리하는 프로세스를 간소화합니다. 이 접근 방식은 기존 CMS 시스템과 차별화되며, 콘텐츠 전송을 위해 RESTful API가 아닌 GraphQL API와 같은 API를 활용합니다. 따라서 여러 웹 및 모바일 애플리케이션에서 콘텐츠를 원활하게 공유할 수 있습니다.

이 방법을 구현하면 콘텐츠 관리와 시각적 표현을 분리하여 책임 분담이 용이해집니다. 이를 통해 데이터의 무결성과 계층적 조직을 유지하면서 다양한 플랫폼 및 장치에서 정보 표시를 조정할 수 있습니다.

Contentful CMS 시작하기

Contentful은 포괄적인 API(애플리케이션 프로그래밍 인터페이스) 세트를 활용하여 혁신적인 헤드리스 콘텐츠 관리 솔루션을 제공함으로써 사용자가 다양한 플랫폼과 애플리케이션에서 디지털 자산과 멀티미디어 자료를 손쉽게 생성, 유지 관리 및 배포할 수 있도록 지원합니다.

콘텐츠풀의 콘텐츠 관리 시스템(CMS)을 활용하기 위해서는 초기 단계로 콘텐츠 모델을 수립하는 것이 필요합니다.

콘텐츠 모델 생성

콘텐츠풀 내에서 콘텐츠 모델을 구축하려면 다음 절차를 준수하시기 바랍니다:

Contentful 웹사이트 을 방문하여 계정을 만들고 로그인하여 스페이스에 액세스합니다. Contentful은 이 스페이스 내에서 모든 프로젝트 관련 콘텐츠와 관련 자산을 정리합니다.

⭐ 스페이스의 왼쪽 상단 모서리에서 콘텐츠 모델 탭을 클릭하여 설정 페이지를 엽니다.

⭐ 콘텐츠 모델 설정 페이지에서 콘텐츠 유형 추가 버튼을 클릭합니다. 이 경우 콘텐츠 유형은 콘텐츠풀에 추가할 데이터의 모델(구조)을 나타냅니다.

⭐ 이제 팝업 모달에 콘텐츠 유형에 대한 이름과 설명을 입력합니다. 입력한 이름에 따라 Contentful에서 API 식별자 필드를 자동으로 채웁니다.

⭐ 다음으로 콘텐츠 구조 자체를 정의합니다.필드 추가 버튼을 클릭하여 콘텐츠 모델에 몇 개의 필드를 추가합니다. 다음은 모델에 사용할 수 있는 몇 가지 필드입니다:

 user_ID = type <number>
first_name = type <text (short)>
role = type <text (short)> 

⭐ 필드를 추가하려면 유형 팝업 창에서 유형을 선택합니다.

⭐ 필드 이름을 입력한 다음 추가 및 구성 버튼을 클릭합니다.

⭐ 마지막으로 확인 페이지에서 필드 속성이 예상대로 표시되는지 확인합니다. 또한 확인 페이지에 있는 동안 유효성 검사 규칙과 같은 필드에 대한 추가 속성을 지정할 수 있습니다.

‘확인’을 클릭하면 인터페이스 내에서 사용 가능한 옵션을 활용하여 모델에 추가 필드를 포함할 수 있습니다.

⭐ 모델에 필요한 필드를 모두 추가하면 아래와 같이 목록 형식으로 표시됩니다. 완료하려면 저장 버튼을 클릭하여 변경 사항을 콘텐츠 모델에 적용합니다.

콘텐츠 추가

애플리케이션에 대한 포괄적인 콘텐츠 모델을 설정했으면 다음 프로세스를 통해 관련 콘텐츠를 자유롭게 추가할 수 있습니다:

스페이스 대시보드에 액세스하면 그 안에 있는 콘텐츠 탭으로 이동합니다.

⭐ 검색창의 드롭다운 메뉴에서 생성한 콘텐츠 모델인 콘텐츠 유형을 선택합니다. 그런 다음 항목 추가 버튼을 클릭하여 콘텐츠를 추가합니다.

⭐ 다음으로 콘텐츠 편집기에 콘텐츠를 추가합니다. 각 항목에 대해 게시를 클릭하여 스페이스에 저장하는 것을 잊지 마세요.

API 키 생성

React 기반 플랫폼에서 콘텐츠 정보를 조회하고 검색하는 데 필요한 자격 증명을 얻으려면 API 키를 반드시 확보해야 합니다.

⭐ 대시보드 페이지의 오른쪽 상단 모서리에 있는 설정 드롭다운 메뉴를 클릭합니다. 그런 다음 API 키 옵션을 선택합니다.

API 키 설정 페이지에 액세스하려면 ‘API 키 추가’ 버튼을 클릭합니다.

⭐ Contentful에서 API 키를 자동으로 생성하여 API 키 설정 페이지에 채웁니다. 키 집합을 고유하게 식별할 수 있는 이름만 입력하면 됩니다.

콘텐츠 전송 API 키와 콘텐츠 미리보기 API입니다. 프로덕션 환경과 같은 라이브 환경에서 사용하려면 콘텐츠 전송 API 키로 알려진 전자가 필요합니다.

이 플랫폼을 사용하여 개발하려면 스페이스 식별자와 콘텐츠 미리 보기 액세스 키만 있으면 됩니다. 이 두 가지 요소를 복사하여 코딩 프로세스를 진행하세요.

이 프로젝트의 소스 코드는 전용 GitHub 리포지토리를 통해 쉽게 액세스할 수 있습니다.

React 프로젝트 생성

프로세스를 시작하기 위해 create-react-app 도구를 사용하거나 Vite로 React 프로젝트를 설정하는 두 가지 옵션 중 하나를 사용할 수 있습니다. 프로젝트가 설정되면 설치를 통해 이 특정 패키지를 도입합니다.

 npm install contentful 

외부 서비스에서 제공하는 API를 활용하기 위해서는 애플리케이션 환경 내에 해당 자격 증명을 안전하게 저장해야 합니다. 이를 위해 필요한 API 키가 포함된 .env 파일을 생성하면 개발 프로세스 전반에 걸쳐 쉽게 사용할 수 있습니다. 이 파일은 프로젝트 폴더의 루트 레벨에 배치하여 보안을 손상시키지 않으면서도 쉽게 액세스할 수 있도록 해야 합니다.

 VITE_REACT_APP_CONTENTFUL_SPACE_ID="<space-id>" 

VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN="<content-preview-API-access-token>" 

useContentful Hook 생성

프로젝트의 “src” 디렉토리에 “hooks”라는 이름의 새로운 하위 디렉토리를 생성합니다. 이 지정된 영역 내에서 “useContentful.jsx”라는 제목의 개별 파일 생성을 구현하고 그 안에 후속 콘텐츠를 통합합니다.

 import { createClient } from "contentful";

export default useContentful = () => {

  const accessToken = import.meta.env.VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN;
  const spaceID = import.meta.env.VITE_REACT_APP_CONTENTFUL_SPACE_ID;

  const client = createClient({
    space: spaceID,
    accessToken: accessToken,
    host: "preview.contentful.com",
    environment: 'master',
  });

  const getUsers = async () => {

    try {
      const data = await client.getEntries({
        content_type: "users",
        select: "fields"
      });
      const sanitizedData = data.items.map((item) => {
        return {
          ...item.fields 
        };
      }); 
      return sanitizedData;
    } catch (error) {
      console.log(`Error fetching users ${error}`);
    }

  };
  return { getUsers };
};

 

이 맞춤형 후크 구현을 활용하면 지정된 액세스 토큰 및 콘텐츠 공간 식별자와의 보안 연결을 설정하여 지정된 Contentful 공간에서 정보를 검색할 수 있습니다.

`getUsers` 함수의 컨텍스트 내에서 Contentful 클라이언트를 활용하여 시스템은 지정된 방법을 사용하여 특정 콘텐츠 유형의 항목을 검색합니다. 이 경우 구현은 관련 필드 데이터에만 집중하면서 ‘사용자’ 콘텐츠 유형에서 정보를 추출합니다. 그 후, 획득된 데이터는 추가 처리를 위해 사용자 객체 배열로 구성되기 전에 철저한 클렌징 프로세스를 거칩니다.

App.jsx 파일 업데이트

App.jsx 파일에서 일반 React 코드를 제거하고 아래 제공된 코드 스니펫으로 대체하세요:

 import { useEffect, useState } from "react";
import useContentful from "./hooks/useContentful";

const App = () => {
  const [users, setUsers] = useState([]);
  const { getUsers} = useContentful();

  useEffect(() => {
    getUsers().then((response) => response && setUsers(response));
  });
  return (
       <>
        <h1>Contentful CMS With React Tutorial</h1>
            {users.map((user, index) => (
            <div key={index}>
            <p> {user.userId} </p> 
            <p > {user.firstName} </p>
            <p > {user.role} </p>

            </div> 
          ))} 
      </>
  );
};
export default App 

useContentful 훅에서 제공하는 Contentful 통합 기능을 활용하면 웹 애플리케이션에서 직접 Contentful CMS에 저장된 콘텐츠 데이터를 효과적으로 검색하고 렌더링할 수 있습니다. 또한 앞서 언급한 애플리케이션에 대한 수정 사항을 업데이트할 목적으로 개발 서버를 시작하는 것이 좋습니다.

 npm run dev 

실제로 저희 솔루션을 구현하면 이제 React 애플리케이션 내에서 Contentful에 추가된 모든 콘텐츠를 검색하고 표시할 수 있습니다. 외관을 더욱 향상시키기 위해 Tailwind CSS를 자유롭게 활용하여 애플리케이션에 뛰어난 시각적 디자인을 불어넣을 수 있습니다.

간편한 콘텐츠 관리

분리형 콘텐츠 관리 시스템(CMS)을 아키텍처에 통합하면 개발 프로세스가 크게 빨라져 과도한 시간과 리소스를 소모할 수 있는 광범위한 콘텐츠 관리 책임에 대한 부담 없이 기본 애플리케이션 로직 생성에 더욱 집중할 수 있습니다.