개요

Contentful이란 무엇입니까?

Contentful은 외관이 없는 CMS로 블로그, 뉴스 등 글을 정의하는 모델을 정의한 후 API를 통해 정의된 모델을 등록하거나 실제 글(데이터)을 참조할 수 있다.
난폭하게 말하자면 워드프레스의 외관에는 없는 보도 관리 기능의 느낌이다.

하고 싶은 일

Contentful에 정의된 블로그 글을 React에 표시하고 싶습니다.

사전 준비

Contentful 등록
https://app.contentful.com/

1. 블로그 글 쓰기

Contentful 관리 화면에 블로그 기사를 작성합니다.

스페이스 만들기

Contentful에 로그인한 후 제목 메뉴의 팔꿈치 마디를 열고 + Createspace를 눌러 적당한 공간을 만듭니다.

컨텐트 모델 생성하기

문장의 원형 모델을 정의하다.
내용 모드를 열고'콘텐츠 type 추가'단추를 누르십시오.
대화 상자에서 이름에 대한 적절한 이름을 작성합니다(예: Post).
이것은 포스트라는 탁자를 만드는 형상이다.
그리고 제목, 바디를 필드로 추가합니다.(오른쪽 메뉴에서 추가 가능)
이렇게 되면 돼.오른쪽 상단의 저장으로 저장합니다.

글 추가

내용을 열면 정의된 모델에 글을 추가할 수 있습니다.

적당히 두 편의 보도를 추가하면 끝난다.

2. API 키 설정

그런 다음 API에서 호출할 때 필요한 태그를 추가합니다.
설정에서 API 키를 엽니다.
API 키 추가 를 클릭하여 키를 추가합니다.추가할 수 있다면 영패 등을 확인할 수 있습니다.

나중에 키프레임이 생성된 공간 ID와 컨텐트를 사용하여 API-access token을 제거합니다.

3. React에서 글 호출

다음은 React에서 기사를 볼 것입니다.
react 모형 만들기

# create-react-app contentfultest
# cd contentfultest 

그런 다음 contentful API를 사용합니다.

# npm install --save contentful

그리고 앱.js를 (으)로 변경합니다.<SpaceID> 및 <Content Delivery API -access token> 방금 생성한 API 키의 값을 붙여넣습니다.

import React from 'react';
import './App.css';
import * as contentful from 'contentful';

class App extends React.Component{

  client = contentful.createClient({
    space: "<Space ID>",
    accessToken: "<Content Delivery API - access token>"
  });

  state = {
    items: []
  }

  componentDidMount = () => {
    this.client.getEntries()
    .then((response) => {
      this.setState({
        items: response.items
      });
    });
  }

  render(){
    return (
      <div>
        {
          this.state.items.map((item) => (
            <li>{item.fields.title}</li>
           ))
        }
      </div>
    );  
  }
}


export default App;

이렇게 하면 npmstart는 다음과 같은 보도 일람표를 얻을 수 있다.

간단한 코드이기 때문에 설명할 필요가 없다

createClient()로 API 영패가 설정된 clinet

만들기

client에서 getentries를 호출하여 모든 글을 가져옵니다

state의 items에 entries를 넣은 item

화면에 각 item의 title

보이기
이런 느낌.
모델에 설정된 각 필드는 fields.xxxx 에서 확인할 수 있습니다.
따라서 보도 주체를 표시하려면 위의 코드 프로세스로 item입니다.fields.바디라면 본문을 표시할 수 있습니다.

API 참조

Contentful API 참조입니다.

https://www.contentful.com/developers/docs/references/content-management-api/#/reference