React 및 헤드 없는 CMS를 사용하여 CRUD 응용 프로그램을 구축하는 방법

여러 해 동안 웹 프로젝트는 콘텐츠 관리 시스템(CMS)을 이용하여 콘텐츠를 만들고 관리하여 데이터베이스에 저장하고 서버에서 보이는 프로그래밍 언어로 콘텐츠를 표시해 왔다.WordPress, Drupal, Joomla는 이 목적을 위한 유명한 응용 프로그램입니다.
기존 CMSE의 문제점 중 하나는 백엔드와 표현 레이어의 결합입니다.이 때문에 개발자들은 특정한 프로그래밍 언어와 프레임워크를 사용해서 정보를 표시할 수밖에 없다.이로 인해 다른 플랫폼(예를 들어 모바일 애플리케이션)에서 같은 내용을 다시 사용하는 것은 어려워지고, 머리 없는 CMSE는 많은 장점을 제공할 수 있다.
헤드 없는 CMS는 표현 레이어에 바인딩되지 않는 컨텐츠 관리 시스템입니다.API를 통해 정보를 공개하고 다양한 장치와 플랫폼에서 API에 액세스할 수 있는 컨텐츠 저장소로 구축되었습니다.헤드 없는 CMS는 조직적이고 구조화된 콘텐츠를 저장하고 공개하기 위해 설계되었으며 콘텐츠가 어디에 있고 사용자에게 어떻게 전달될지 걱정할 필요가 없습니다.
이 프레젠테이션과 스토리지 분리는 다음과 같은 몇 가지 이점을 제공합니다.

유연성: 개발자는 같은 실제 출처를 사용하여 서로 다른 설비와 플랫폼에서 내용을 나타낼 수 있다.

확장성: 헤드 없는 CMSE를 사용하면 어플리케이션 전면에 영향을 주지 않고 컨텐츠 라이브러리를 확장할 수 있습니다.

보안: 필요한 데이터만 앞에서 공개할 수 있고 내용을 편집하는 웹 관리자에게 완전히 독립된 로그인을 제공할 수 있습니다.

속도: API를 통해 데이터가 소모될 경우 내용을 다시 표시하지 않고 페이지에 동적으로 데이터를 표시할 수 있습니다.

본고에서 애완동물 입양 CRUD 프로그램을 만드는 방법을 보여 드리겠습니다.백엔드는 이름Strapi의 헤드리스 CMS를, 프런트엔드는 이름React의 헤드리스 CMS를 사용합니다.이 프로그램은 모든 애완동물과 관련된 상세한 정보를 포함하는 애완동물 목록을 보여 줍니다. 목록에서 애완동물을 추가하거나 편집하거나 삭제할 수 있습니다.

뇌두 애플리케이션 계획

CRUD는 생성, 읽기, 업데이트 및 삭제를 나타냅니다.CRUD 응용 프로그램은 일반적으로 사용자가 데이터베이스에 저장된 엔티티와 상호 작용할 수 있는 페이지 또는 끝점으로 구성됩니다.인터넷에 배치된 대부분의 응용 프로그램은 최소한 일부는 CRUD 응용 프로그램이고 많은 응용 프로그램은 완전히 CRUD 응용 프로그램이다.
이 예시 프로그램은 Pet 개의 실체와 모든 애완동물에 대한 상세한 정보를 가지고 있으며, 그것들에 대해 CRUD 작업을 수행할 수 있습니다.이 프로그램은 애완동물 목록이 있는 화면과 다른 화면을 가리키는 링크를 가지고 애완동물을 목록에 추가합니다.애완동물에 대한 자세한 정보를 업데이트하는 단추와 데이터베이스에서 애완동물을 삭제하는 단추도 포함된다.

백엔드 데이터 구조 구축

반려동물과 관련된 데이터를 생성, 관리 및 저장하기 위해 Node에 구축된 오픈소스 헤드 없는 CMS를 사용합니다.js.
Strapi는 프로그램의 실체에 대한 내용 형식을 만들 수 있으며, 필요에 따라 대시보드를 설정할 수 있습니다.솔리드를 채우는 데 사용할 항목은 무엇입니까?
Strapi 백엔드에서 생성된 코드를 보려면 Strapi에서 다운로드할 수 있습니다.
응용 프로그램 백엔드를 만들려면 Strapi를 설치하고 새 항목을 만듭니다.


npx create-strapi-app pet-adoption-backend --quickstart

이것은 Strapi를 설치하고 모든 의존 항목을 다운로드하며 pet-adoption-backend 라는 초기 프로젝트를 만들 것입니다.
추가--quickstart 플래그는 Strapi가 데이터베이스에 SQLite를 사용하도록 지시합니다.이 플래그를 사용하지 않으면 로컬 데이터베이스를 설치하여 Strapi 프로젝트에 연결해야 합니다.자세한 내용과 다양한 설치 옵션에 대해서는 its Content API을 참조하십시오.
모든 파일을 다운로드하고 설치하고 프로젝트를 만들면 URLthis GitHub repository에서 등록 페이지가 열립니다.
Strapi's installation documentation
페이지의 필드를 완성하여 관리자 사용자를 만듭니다.
그런 다음 대시보드로 리디렉션됩니다.이 페이지에서 응용 프로그램의 모든 데이터와 설정을 관리할 수 있습니다.
http://localhost:1337/admin/auth/register-admin
이미 Users 집합 형식이 있는 것을 보실 수 있습니다.새 컬렉션 유형을 만들려면 왼쪽 메뉴의 [컨텐트 유형 생성기] 링크로 이동한 다음 +를 클릭하여 새 컬렉션 유형을 만듭니다.애완동물이라고 불러.

그런 다음 컨텐트 유형에 필드를 추가하고 각 필드의 이름과 유형을 정의합니다.이 애완동물 입양 프로그램의 경우 다음 필드를 포함하십시오.

name(텍스트-짧은 텍스트)

animal(계수: 고양이-개-새)

breed(텍스트-짧은 텍스트)

location(텍스트-짧은 텍스트)

age(숫자-정수)

sex(계수: 남성-여성)

각 필드에 대해 고급 설정을 클릭하여 다른 매개변수를 정의할 수 있습니다.각 솔리드를 정의한 후 저장을 클릭합니다.
응용 프로그램의 전단을 만들더라도 Strapi 대시보드에 새 항목을 추가할 수 있습니다.왼쪽 메뉴에서 Pets 집합 유형으로 이동한 다음 새 애완동물 추가를 누르십시오.

기본적으로 새 항목은 '초고' 로 저장되어 있기 때문에 새로 추가된 애완동물을 보려면 발표해야 합니다.

Strapi REST API 사용

Strapi는 완벽한 REST API를 제공합니다.애완동물 목록을 공개하려면(만들기, 편집 또는 업데이트에 권장되지 않음) 설정으로 이동하고 캐릭터를 클릭한 다음 공개를 편집하십시오.Public 역할에find와findone을 활성화합니다.

현재, 프로그램에서 REST 노드를 호출해서 모든 애완동물을 열거할 수도 있고, http://localhost:1337/pets/[petID] 호출해서 특정 애완동물에 대한 상세한 정보를 얻을 수도 있습니다.

http://localhost:1337/pets Strapi GraphQL 플러그인 사용

REST API를 사용하지 않고

끝점을 사용하려는 경우 하나를 추가할 수 있습니다.왼쪽 메뉴에서 시장에 들어가세요.플러그인 목록이 표시됩니다.다운로드를 클릭하여 GraphQL 플러그인을 가져옵니다.

플러그인을 설치한 후 GraphQL로 이동하여 포트를 보고 테스트할 수 있습니다.

http://localhost:1337/graphql 프런트엔드 구축

애완동물 목록에 애완동물을 추가하고 갱신하고 삭제하는 기능은 리액션 위드

를 사용합니다.Redux는 주 관리 도서관입니다.Redux 스토리지와 React 애플리케이션 간의 통신을 위한 중개 툴react-redux이 필요합니다.
제 주된 중점은headless CMS를 사용하여 CRUD 프로그램을 만드는 것을 보여 주는 것입니다. 따라서 이 강좌에서 모든 스타일을 보여 주지는 않지만 코드를 얻으려면 fork 를 사용할 수 있습니다.
먼저 새 React 애플리케이션을 만듭니다.


npx create-react-app pet-adoption

React 애플리케이션을 만든 후 필요한 npm 패키지를 설치합니다.


npm install react-router-dom @reduxjs/toolkit react-redux axios

react-router-dom는 서로 다른 페이지를 처리한다.

@reduxjs/toolkit와 react-reduxredux 저장소를 응용 프로그램에 추가합니다.

axios는 Strapi REST API에 연결됩니다.

src 폴더에 Strapi API에 연결하는 데 사용할 코드가 포함된 도우미http.js 파일을 만듭니다.


import axios from "axios";

export default axios.create({

 baseURL: "http://localhost:1337",

 headers: {

   "Content-type": "application/json",

 },

});

이름petsService.js이라는 새 폴더의 모든 CRUD 작업에 대한 도움말 방법이 포함된 pets 파일을 생성합니다.


import http from "../http";

class PetsService {

 getAll() {

   return http.get("/pets");

 }

 get(id) {

   return http.get(`/pets/${id}`);

 }

 create(data) {

   return http.post("/pets", data);

 }

 update(id, data) {

   return http.put(`/pets/${id}`, data);

 }

 delete(id) {

   return http.delete(`/pets/${id}`);

 }

}

export default new PetsService();

Redux는 Action 및 Reducer를 사용합니다.Redux에 따르면 작업은'응용 프로그램에서 발생한 일을 설명하는 이벤트'입니다.축소기는 현재 상태와 동작을 매개 변수로 하고 새로운 상태 결과를 되돌려주는 함수입니다.
작업을 만들려면 먼저 작업 유형을 정의해야 합니다.pets 폴더에 actionTypes.js라는 파일을 만듭니다.


export const CREATE_PET = "CREATE_PET";

export const RETRIEVE_PETS = "RETRIEVE_PETS";

export const UPDATE_PET = "UPDATE_PET";

export const DELETE_PET = "DELETE_PET";

같은 폴더에 actions.js 파일을 만들려면 다음과 같이 하십시오.


import {

 CREATE_PET,

 RETRIEVE_PETS,

 UPDATE_PET,

 DELETE_PET,

} from "./actionTypes";

import PetsService from "./petsService";

export const createPet =

 (name, animal, breed, location, age, sex) => async (dispatch) => {

   try {

     const res = await PetsService.create({

       name,

       animal,

       breed,

       location,

       age,

       sex,

     });

     dispatch({

       type: CREATE_PET,

       payload: res.data,

     });

     return Promise.resolve(res.data);

   } catch (err) {

     return Promise.reject(err);

   }

 };

export const retrievePets = () => async (dispatch) => {

 try {

   const res = await PetsService.getAll();

   dispatch({

     type: RETRIEVE_PETS,

     payload: res.data,

   });

 } catch (err) {

   console.log(err);

 }

};

export const updatePet = (id, data) => async (dispatch) => {

 try {

   const res = await PetsService.update(id, data);

   dispatch({

     type: UPDATE_PET,

     payload: data,

   });

   return Promise.resolve(res.data);

 } catch (err) {

   return Promise.reject(err);

 }

};

export const deletePet = (id) => async (dispatch) => {

 try {

   await PetsService.delete(id);

   dispatch({

     type: DELETE_PET,

     payload: { id },

   });

 } catch (err) {

   console.log(err);

 }

};

감속기를 만들려면 같은 폴더에 새 reducers.js 파일을 추가합니다.


import {

 CREATE_PET,

 RETRIEVE_PETS,

 UPDATE_PET,

 DELETE_PET,

} from "./actionTypes";

const initialState = [];

function petReducer(pets = initialState, action) {

 const { type, payload } = action;

 switch (type) {

   case CREATE_PET:

     return [...pets, payload];

   case RETRIEVE_PETS:

     return payload;

   case UPDATE_PET:

     return pets.map((pet) => {

       if (pet.id === payload.id) {

         return {

           ...pet,

           ...payload,

         };

       } else {

         return pet;

       }

     });

   case DELETE_PET:

     return pets.filter(({ id }) => id !== payload.id);

   default:

     return pets;

 }

}

export default petReducer;

이제 작업과 감속기가 생겨서 store.js 폴더에 src 파일을 만듭니다.


import { configureStore } from "@reduxjs/toolkit";

import petReducer from "./pets/reducers";

export default configureStore({

 reducer: {

   pets: petReducer,

 },

});

이 곳에서 Redux 저장소를 설정하고 petReducer 함수를 추가하여 상태를 바꾸고 있습니다.애플리케이션의 어느 곳에서든 스토리지를 액세스할 수 있도록 설정하고 있습니다.그런 다음 Redux Packager를 사용하여 전체 애플리케이션을 스토어에 포장합니다.
이제 index.js 파일이 다음과 같습니다.


import App from "./App";

import { Provider } from "react-redux";

import React from "react";

import ReactDOM from "react-dom";

import store from "./store";

ReactDOM.render(

 <Provider store={store}>

   <App />

 </Provider>,

 document.getElementById("root")

);

PetList.jsx라는 새 구성 요소를 생성합니다.


import React, { Component } from "react";

import { connect } from "react-redux";

import { Link } from "react-router-dom";

import { retrievePets, deletePet } from "../pets/actions";

class PetList extends Component {

 componentDidMount() {

   this.props.retrievePets();

 }

 removePet = (id) => {

   this.props.deletePet(id).then(() => {

     this.props.retrievePets();

   });

 };

 render() {

   const { pets } = this.props;

   return (

     <div className="list row">

       <div className="col-md-6">

         <h4>Pet List</h4>

         <div>

           <Link to="/add-pet">

             <button className="button-primary">Add pet</button>

           </Link>

         </div>

         <table className="u-full-width">

           <thead>

             <tr>

               <th>Name</th>

               <th>Animal</th>

               <th>Breed</th>

               <th>Location</th>

               <th>Age</th>

               <th>Sex</th>

               <th>Actions</th>

             </tr>

           </thead>

           <tbody>

             {pets &&

               pets.map(

                 ({ id, name, animal, breed, location, age, sex }, i) => (

                   <tr key={i}>

                     <td>{name}</td>

                     <td>{animal}</td>

                     <td>{breed}</td>

                     <td>{location}</td>

                     <td>{age}</td>

                     <td>{sex}</td>

                     <td>

                       <button onClick={() => this.removePet(id)}>

                         Delete

                       </button>

                       <Link to={`/edit-pet/${id}`}>

                         <button>Edit</button>

                       </Link>

                     </td>

                   </tr>

                 )

               )}

           </tbody>

         </table>

       </div>

     </div>

   );

 }

}

const mapStateToProps = (state) => {

 return {

   pets: state.pets,

 };

};

export default connect(mapStateToProps, { retrievePets, deletePet })(PetList);

App.js 파일에서 이 구성 요소를 사용하고 응용 프로그램 홈 페이지에 표시합니다.
펫을 목록에 추가하는 데 사용할 다른 파일AddPet.jsx을 만듭니다.


import React, { Component } from "react";

import { connect } from "react-redux";

import { createPet } from "../pets/actions";

import { Redirect } from "react-router-dom";

class AddPet extends Component {

 constructor(props) {

   super(props);

   this.onChangeName = this.onChangeName.bind(this);

   this.onChangeAnimal = this.onChangeAnimal.bind(this);

   this.onChangeBreed = this.onChangeBreed.bind(this);

   this.onChangeLocation = this.onChangeLocation.bind(this);

   this.onChangeAge = this.onChangeAge.bind(this);

   this.onChangeSex = this.onChangeSex.bind(this);

   this.savePet = this.savePet.bind(this);

   this.state = {

     name: "",

     animal: "",

     breed: "",

     location: "",

     age: "",

     sex: "",

     redirect: false,

   };

 }

 onChangeName(e) {

   this.setState({

     name: e.target.value,

   });

 }

 onChangeAnimal(e) {

   this.setState({

     animal: e.target.value,

   });

 }

 onChangeBreed(e) {

   this.setState({

     breed: e.target.value,

   });

 }

 onChangeLocation(e) {

   this.setState({

     location: e.target.value,

   });

 }

 onChangeAge(e) {

   this.setState({

     age: e.target.value,

   });

 }

 onChangeSex(e) {

   this.setState({

     sex: e.target.value,

   });

 }

 savePet() {

   const { name, animal, breed, location, age, sex } = this.state;

   this.props.createPet(name, animal, breed, location, age, sex).then(() => {

     this.setState({

       redirect: true,

     });

   });

 }

 render() {

   const { redirect } = this.state;

   if (redirect) {

     return <Redirect to="/" />;

   }

   return (

     <div className="submit-form">

       <div>

         <div className="form-group">

           <label htmlFor="name">Name</label>

           <input

             type="text"

             className="form-control"

             id="name"

             required

             value={this.state.name}

             onChange={this.onChangeName}

             name="name"

           />

         </div>

         <div className="form-group">

           <label htmlFor="animal">Animal</label>

           <input

             type="text"

             className="form-control"

             id="animal"

             required

             value={this.state.animal}

             onChange={this.onChangeAnimal}

             name="animal"

           />

         </div>

         <div className="form-group">

           <label htmlFor="breed">Breed</label>

           <input

             type="text"

             className="form-control"

             id="breed"

             required

             value={this.state.breed}

             onChange={this.onChangeBreed}

             name="breed"

           />

         </div>

         <div className="form-group">

           <label htmlFor="location">Location</label>

           <input

             type="text"

             className="form-control"

             id="location"

             required

             value={this.state.location}

             onChange={this.onChangeLocation}

             name="location"

           />

         </div>

         <div className="form-group">

           <label htmlFor="age">Age</label>

           <input

             type="text"

             className="form-control"

             id="age"

             required

             value={this.state.age}

             onChange={this.onChangeAge}

             name="age"

           />

         </div>

         <div className="form-group">

           <label htmlFor="sex">Sex</label>

           <input

             type="text"

             className="form-control"

             id="sex"

             required

             value={this.state.sex}

             onChange={this.onChangeSex}

             name="sex"

           />

         </div>

         <button onClick={this.savePet} className="btn btn-success">

           Submit

         </button>

       </div>

     </div>

   );

 }

}

export default connect(null, { createPet })(AddPet);

이 구성 요소는 상태에 애완동물을 추가합니다.
이제 EditPet.jsx 파일을 만듭니다.


import React, { Component } from "react";

import { connect } from "react-redux";

import { updatePet } from "../pets/actions";

import { Redirect } from "react-router-dom";

import PetService from "../pets/petsService";

class EditPet extends Component {

 constructor(props) {

   super(props);

   this.onChangeName = this.onChangeName.bind(this);

   this.onChangeAnimal = this.onChangeAnimal.bind(this);

   this.onChangeBreed = this.onChangeBreed.bind(this);

   this.onChangeLocation = this.onChangeLocation.bind(this);

   this.onChangeAge = this.onChangeAge.bind(this);

   this.onChangeSex = this.onChangeSex.bind(this);

   this.savePet = this.savePet.bind(this);

   this.state = {

     currentPet: {

       name: "",

       animal: "",

       breed: "",

       location: "",

       age: "",

       sex: "",

     },

     redirect: false,

   };

 }

 componentDidMount() {

   this.getPet(window.location.pathname.replace("/edit-pet/", ""));

 }

 onChangeName(e) {

   const name = e.target.value;

   this.setState(function (prevState) {

     return {

       currentPet: {

         ...prevState.currentPet,

         name: name,

       },

     };

   });

 }

 onChangeAnimal(e) {

   const animal = e.target.value;

   this.setState(function (prevState) {

     return {

       currentPet: {

         ...prevState.currentPet,

         animal: animal,

       },

     };

   });

 }

 onChangeBreed(e) {

   const breed = e.target.value;

   this.setState(function (prevState) {

     return {

       currentPet: {

         ...prevState.currentPet,

         breed: breed,

       },

     };

   });

 }

 onChangeLocation(e) {

   const location = e.target.value;

   this.setState(function (prevState) {

     return {

       currentPet: {

         ...prevState.currentPet,

         location: location,

       },

     };

   });

 }

 onChangeAge(e) {

   const age = e.target.value;

   this.setState(function (prevState) {

     return {

       currentPet: {

         ...prevState.currentPet,

         age: age,

       },

     };

   });

 }

 onChangeSex(e) {

   const sex = e.target.value;

   this.setState(function (prevState) {

     return {

       currentPet: {

         ...prevState.currentPet,

         sex: sex,

       },

     };

   });

 }

 getPet(id) {

   PetService.get(id).then((response) => {

     this.setState({

       currentPet: response.data,

     });

   });

 }

 savePet() {

   this.props

     .updatePet(this.state.currentPet.id, this.state.currentPet)

     .then(() => {

       this.setState({

         redirect: true,

       });

     });

 }

 render() {

   const { redirect, currentPet } = this.state;

   if (redirect) {

     return <Redirect to="/" />;

   }

   return (

     <div className="submit-form">

       <div>

         <div className="form-group">

           <label htmlFor="name">Name</label>

           <input

             type="text"

             className="form-control"

             id="name"

             required

             value={currentPet.name}

             onChange={this.onChangeName}

             name="name"

           />

         </div>

         <div className="form-group">

           <label htmlFor="animal">Animal</label>

           <input

             type="text"

             className="form-control"

             id="animal"

             required

             value={currentPet.animal}

             onChange={this.onChangeAnimal}

             name="animal"

           />

         </div>

         <div className="form-group">

           <label htmlFor="breed">Breed</label>

           <input

             type="text"

             className="form-control"

             id="breed"

             required

             value={currentPet.breed}

             onChange={this.onChangeBreed}

             name="breed"

           />

         </div>

         <div className="form-group">

           <label htmlFor="location">Location</label>

           <input

             type="text"

             className="form-control"

             id="location"

             required

             value={currentPet.location}

             onChange={this.onChangeLocation}

             name="location"

           />

         </div>

         <div className="form-group">

           <label htmlFor="age">Age</label>

           <input

             type="text"

             className="form-control"

             id="age"

             required

             value={currentPet.age}

             onChange={this.onChangeAge}

             name="age"

           />

         </div>

         <div className="form-group">

           <label htmlFor="sex">Sex</label>

           <input

             type="text"

             className="form-control"

             id="sex"

             required

             value={currentPet.sex}

             onChange={this.onChangeSex}

             name="sex"

           />

         </div>

         <button onClick={this.savePet} className="btn btn-success">

           Submit

         </button>

       </div>

     </div>

   );

 }

}

export default connect(null, { updatePet })(EditPet);

이제 API를 로컬 Strapi 인스턴스로 호출하여 응용 프로그램을 실행할 수 있습니다.Strapi 개발자 서버와 새 React 응용 프로그램을 동시에 실행하려면 다음 프로그램을 실행합니다.


# Start Strapi

npm run develop

# Start React

npm run start

현재 Strapi는 포트 1337 에서 실행되고, React 프로그램은 포트 3000 에서 실행됩니다.
액세스하는 경우this GitHub repository:
Redux documentation

http://localhost:3000/ 결론

본고에서 당신은

을 전형적인 CRUD 응용 프로그램의 백엔드로 어떻게 사용하는지 이해했습니다.그리고 React와 Redux를 사용하여 전체 응용 프로그램에서 변경 사항을 전파할 수 있도록 위탁 관리 상태를 가진 전단을 구축했습니다.
헤드 없는 CMSE는 거의 모든 어플리케이션 아키텍처의 일부로 사용할 수 있는 다기능 도구입니다.다양한 디바이스, 플랫폼 및 서비스에서 정보를 저장하고 관리할 수 있습니다.당신은 이런 모델을 사용하여 당신의 블로그에 내용을 저장하고 전자상거래 플랫폼에서 제품을 관리하거나 오늘 보신 것처럼 애완동물 입양 플랫폼을 구축할 수 있습니다.

Reference

이 문제에 관하여(React 및 헤드 없는 CMS를 사용하여 CRUD 응용 프로그램을 구축하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/strapi/how-to-build-a-crud-app-with-react-and-a-headless-cms-30jf

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)