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

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

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

그렇다면 헤드리스 워드프레스는 도대체 무엇일까요?

'Headless'가 된다는 것은 CMS에 헤더 섹션이 없다는 것을 의미하지는 않습니다. 이는 프론트엔드 구축에 사용된 기술에 관계없이 CMS를 일반 콘텐츠 관리 시스템으로 사용할 수 있음을 의미합니다.

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

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

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

헤드리스 워드프레스 CMS 사용의 이점

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

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

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 폴더 안에 새 폴더 '구성 요소'를 만들고 새 파일 '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 는 웹 애플리케이션의 진입점이므로 이 파일 내의 "Book" 구성 요소를 참조하는 것이 중요합니다.

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" 구성 요소 내의 BookItems 구성 요소에 대한 참조를 제공해야 합니다.

내 최종 버전의 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를 사용하십시오.