React와 함께 WordPress를 사용하여 웹 애플리케이션용 헤드리스 CMS 생성

WordPress Rest API는 WordPress가 제공하는 많은 훌륭한 기능 중 하나입니다. 이를 통해 개발자는 매력적인 플러그인과 테마를 만들고 WordPress CMS로 타사 응용 프로그램을 구동할 수 있습니다.

콘텐츠 관리 시스템은 또한 최신 웹 애플리케이션에서 웹 사이트의 콘텐츠를 관리하기 위해 개발되었습니다. 이는 개발자에게 추가 작업 부하를 추가할 수 있습니다. Rest API 가 제공하는 많은 가능성으로 인해 React와 함께 WordPress를 JavaScript 기반 웹 응용 프로그램에 대한 헤드리스 CMS로 사용할 수도 있습니다.

헤드리스 워드프레스란?

헤드리스 WordPress 웹 사이트는 주로 WordPress를 콘텐츠 관리에 사용하고 다른 기술을 사용하여 프런트 엔드를 구축하고 웹 사이트 방문자에게 콘텐츠를 표시하는 사이트입니다.

Rest API를 사용하면 개발자가 동일한 JSON 언어를 사용하는 한 기술 간 인터페이스와 상호 작용할 수 있습니다. WordPress Rest API는 많은 웹 기술에서 이해할 수 있는 JSON 형식으로 데이터를 내보냅니다. JSON은 키-값 쌍의 데이터를 포함하는 JavaScript 객체의 텍스트 기반 표현입니다.

 "친구": [
      {
        "아이디": 0,
        "이름": "해리엇 스탠리"
      },
      {
        "아이디": 1,
        "이름": "벤튼 오돔"
      },
      {
        "아이디": 2,
        "이름": "재키 에드워즈"
      }
    ],

오늘은 기본 웹 애플리케이션을 위한 헤드리스 CMS로 React 및 WordPress와 함께 사용하여 WordPress Rest API 의 위력을 시연하겠습니다.

헤드리스 WordPress CMS 사용의 이점

오픈 소스 플랫폼인 WordPress는 모든 웹사이트를 만들 수 있는 뛰어난 유연성을 제공합니다. WordPress를 헤드리스 CMS로 사용하면 모든 웹 기술을 사용하여 웹 애플리케이션의 프론트 엔드를 만들고 가장 인기 있는 CMS 중 하나를 사용하여 콘텐츠를 관리할 수 있습니다.

React 또는 Angular로 구축된 기존 웹 앱에 블로그 기능을 추가해야 하는 상황이 발생할 수 있습니다. 네이티브 프레임워크에서 본격적인 콘텐츠 관리 시스템을 코딩하는 대신 헤드리스 WordPress CMS를 사용하여 Rest API를 사용하여 콘텐츠를 관리합니다.

ReactJS용 WordPress 사이트를 설정하는 방법

WordPress 사이트 설정부터 시작하겠습니다. 이것이 프론트엔드 React 애플리케이션의 데이터 소스 역할을 할 것이기 때문입니다.

git에서 WP-Rest API 플러그인의 zip 파일을 다운로드하고 WordPress 플러그인 폴더 안에 zip 폴더를 업로드합니다. 파일이 업로드되면 플러그인을 활성화합니다. 이렇게 하면 WordPress 웹사이트 내에서 WordPress Rest API가 활성화됩니다.

설정 → 퍼머링크로 이동하여 게시물 이름 또는 사용자 정의 구조를 선택합니다.

API 호출로 작업 중이므로 Postman 용 크롬 확장을 다운로드하십시오. Postman 내부에 다음 형식으로 URL을 입력합니다.

https://example.com/wp-json/wp/v2/posts

위의 URL은 WordPress 사이트 내부의 게시물 데이터를 가져옵니다.

사용자 정의 포스트 유형을 생성하기 위한 사용자 정의 포스트 유형 UI 플러그인을 다운로드하십시오. 이 사용자 정의 게시물은 다음 단계에서 WordPress를 React와 함께 사용할 때 표시됩니다.

플러그인을 설치 및 활성화하고 새 게시물 유형을 추가합니다. 이 튜토리얼에서는 Books에 대한 사용자 정의 포스트 유형을 생성할 것입니다.

Post Type Slug 안에 사용자 정의 게시물의 이름을 입력합니다.

REST API에 표시 확인란이 true 로 설정되어 있고 REST API 기본 슬러그도 설정되어 있는지 확인합니다. WordPress를 헤드리스 CMS로 사용하려는 경우 필수입니다.

REST API에서 얻으려는 정보의 모든 상자를 선택하십시오.

변경 사항을 저장하면 사이드바에 새 옵션이 채워진 것을 확인할 수 있습니다. 그것을 클릭하여 사용자 정의 게시물 유형 안에 새 책을 추가하십시오.

내 게시물에 대한 샘플 데이터와 발췌문을 넣어 첫 번째 책을 만들었습니다.

API를 통해 데이터를 사용할 수 있는지 확인하려면 Postman 내부의 URL을 누르십시오.

이제 URL은 https://exampe.com/wp-json/wp/v2/ books와 같아야 합니다.

RestAPI 플러그인에 ACF 및 ACF를 사용하여 Publisher와 같은 추가 필드를 추가할 수도 있습니다.

두 플러그인을 모두 설치하고 활성화합니다.

기본적으로 ACF는 WordPress Rest API와 통신하지 않습니다. 따라서 ACF REST API 플러그인도 다운로드해야 합니다.

사용자 정의 필드 플러그인을 사용하여 내 책에 대한 게시자 필드를 추가합니다.

목록에서 원하는 게시물 유형을 선택했는지 확인하세요. 그런 다음 ' 게시 '를 누르십시오.

내 책의 출판사를 정의할 수 있는 내 사용자 정의 게시물 유형 내부에 새 필드가 채워집니다. 이것이 우리가 ReactJS 웹 애플리케이션에 데이터를 보내기 위해 WordPress를 설정하는 데 필요한 모든 것입니다.

React 시작하기

ReactJS란?

React는 Facebook과 개발자 커뮤니티에서 관리하는 웹용 JavaScript 라이브러리입니다. JavaScript는 웹 개발을 위한 강력한 도구이며 웹 사이트의 기능을 향상시키기 위해 JavaScript로 작성된 여러 라이브러리가 있습니다. ReactJS는 주로 빠르고 강력하며 동적인 단일 페이지 애플리케이션을 개발하는 데 사용됩니다.

React 앱 설정

React 앱을 빌드하려면 컴퓨터에 다음 종속 항목이 설치되어 있어야 합니다.

• NodeJS 및 NPM.
• Sublime 또는 Visual Studio Code와 같은 텍스트 편집기.
• 버전 관리를 위한 Git(선택 사항)

환경 설정 후 커맨드 라인을 열고 다음 코드를 실행하여 ReactJS로 프로젝트를 생성합니다.

 npx create-react-app 프론트엔드

앱이 생성되면 애플리케이션 폴더로 cd(디렉토리 변경) 하고 다음 명령어를 입력하여 API 호출용 Axios 패키지를 설치합니다.

 npm i 액시오스

이제 즐겨 사용하는 텍스트 편집기에서 폴더를 엽니다. Visual Studio 코드를 사용하고 있습니다.

npm start 명령을 실행하여 애플리케이션을 시작합니다.

모든 것이 제대로 작동한다면 WordPress를 헤드리스 CMS로 사용하여 React로 웹 애플리케이션을 구축할 준비가 모두 되었습니다.

src 폴더 안에 ' components '라는 새 폴더를 만들고 ' components ' 폴더 안에 새 파일 ' Books.js '를 만듭니다.

ReactJS에서 포스트 데이터를 렌더링하는 방법

Book.js 파일 내에서 WordPress Rest API에서 데이터를 가져옵니다. 아래는 Rest API 엔드포인트(제 경우에는 ' /books ')를 요청하고 JSON 형식으로 데이터를 표시하는 코드입니다.

 'react'에서 React, { Component } 가져오기
'axios'에서 axios 가져오기

내보내기 클래스 책 확장 구성 요소 {
   상태 = {
       책: [],
       isLoaded: 거짓
   }

 componentDidMount() {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           책: res.data,
           isLoaded: 참
       }))
       .catch(err => console.log(err))
   }


   렌더링() {
      console.log(this.state);
       반품 (
           <div>
              
           </div>
       )
   }
}

기본 장부 내보내기

위의 코드는 콘솔에 데이터 배열을 표시한 다음 렌더 블록 내에서 활용됩니다.

이제 App.js 파일 내에서 아래와 같이 Books 컴포넌트를 호출합니다.

 '반응'에서 React 가져오기;
가져오기 './App.css';
'./components/Books'에서 책 가져오기;

함수 앱() {
 반품 (
   <div className="앱">
    <도서/>
   </div>
 );
}

기본 앱 내보내기;

App.js 는 웹 애플리케이션의 진입점입니다. 따라서 이 파일 내의 "장부" 구성 요소를 참조하는 것이 중요합니다.

ReactJS에 게시물 데이터를 표시하는 방법

render 메소드 내부에 코드를 추가하여 데이터를 표시할 수 있습니다.

 렌더링() {
       const {책, isLoaded} = this.state;
       반품 (
           <div>
               {books.map(책 =>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

여기에 데이터를 표시하는 대신 새 구성 요소를 만들고 상위 구성 요소와 별도로 유지하기 위해 ' BookItems.js '라는 이름을 지정합니다.

Bookk.js 내부의 렌더링 메서드를 다음과 같이 변경합니다.

 렌더링() {
       const {책, isLoaded} = this.state;
       반품 (
           <div>
               {books.map(책 =>
               <BookItems 키={book.id} 책={book}/>
               )}
           </div>
       );
   }

이제 BookItems 구성 요소를 대신 렌더링해야 합니다.

BookItems.js 내부에 다음 코드를 추가합니다.

 'react'에서 React, { Component } 가져오기
'axios'에서 axios 가져오기
'prop-types'에서 PropType을 가져옵니다.

내보내기 클래스 BookItems 확장 구성 요소 {
 
   렌더링() {
       const { 제목 } = this.props.book;
       반품 (
           <div>
              <h2>{title.rendered}</h2>
           </div>
       )
   }
}

기본 BookItem 내보내기

위의 코드에서 제목과 기타 정보를 얻기 위해 book prop을 참조하고 있습니다.

참고: "Books" 구성 요소 내의 BookItem 구성 요소를 참조해야 합니다.

BookItems.js 의 최종 버전은 다음과 같습니다.

 'react'에서 React, { Component } 가져오기
'prop-types'에서 PropType을 가져옵니다.
'axios'에서 axios 가져오기
내보내기 클래스 BookItems 확장 구성 요소 {

   상태 = {
       imgUrl: '',
       작가: '',
       isLoaded: 거짓
   }

   정적 소품 유형 = {
       책: PropTypes.object.isRequired
   }

   componentDidMount() {
       const {featured_media, 저자} = this.props.book;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
       const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
      
       Promise.all([getImageUrl, getAuthor]).then(res => {

           console.log(res);
           this.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               작성자: res[1].data.name,
               isLoaded: 참

           });
       });
    }
 
   렌더링() {
       const { 제목, 발췌 } = this.props.book;
       const {작성자, imgUrl, isLoaded} = this.state;
       반품 (
           <div>
              <h2>{title.rendered}</h2>
              <img src={imgUrl} alt={title.rendered}/>
              <strong>{저자}</strong><br/>
              <divrisklySetInnerHTML={{__html: excerpt.rendered}}></div>
           </div>
       )
   }
}

기본 BookItem 내보내기

그리고 브라우저의 출력은 다음과 같습니다.

가장 예쁘지 않죠? 글쎄, 그것은 스타일링이 이 튜토리얼의 범위를 벗어나기 때문입니다.

마무리!

오늘 저는 웹 애플리케이션을 위한 헤드리스 CMS로 React와 함께 WordPress를 사용하는 방법을 보여 드렸습니다. React 코드는 Git에서도 다운로드할 수 있습니다. 그러나 React에만 국한되지 않습니다. VueJS, Angular 또는 모든 JavaScript 프레임워크로 실험할 수도 있습니다. WordPress Rest API로 할 수 있는 일들이 많이 있습니다. 한계가 있으므로 다음 웹 프로젝트에 WordPress를 사용하십시오.