헤드리스 워드프레스란 무엇입니까? 어떻게 만드는가? [지도 시간]

WordPress 헤드리스 CMS의 장점과 단점은 무엇입니까?

헤드리스 WordPress에는 많은 장점과 단점이 있으며, 각각은 다양한 시나리오에서 작업에 영향을 미칠 수 있습니다. 명확한 그림을 얻기 위해 비교표 형식으로 장단점을 비교해 보겠습니다.

헤드리스 워드프레스가 좋은가요?

이전에 언급한 제한 사항을 무시하면 헤드리스 WordPress를 사용하는 것이 도움이 될 수 있는 특정 시나리오가 있습니다.

• 웹사이트 보안이 최우선이고 데이터 처리가 매우 민감하거나 중요한 경우.
• WordPress의 제한된 테마 옵션의 제약 없이 맞춤형 디자인과 무한한 가능성을 즐기고 독특한 프런트엔드 디자인을 찾고 있다면 Headless WordPress를 선택하세요.
• WordPress의 빈번한 업데이트 및 업그레이드를 통해 웹사이트를 격리하고 싶은 경우.
• 웹사이트나 애플리케이션을 미래 지향적으로 만들고 전체 인프라를 점검하지 않고도 새로운 기술, 트렌드 및 사용자 행동에 적응하려면 헤드리스 WordPress를 고려해보세요.
• 데모 웹사이트, 소규모 또는 단기 프로젝트, 튜토리얼을 찾는 경우 헤드리스 설정이 좋은 옵션이 될 수 있습니다.

헤드리스 워드프레스는 어떻게 작동하나요?

표준 WordPress에 대해 이야기하면 사용자 친화적인 인터페이스와 사용하기 쉬운 관리 패널이 제공되어 콘텐츠를 쉽게 편집, 생성 및 삭제하고 웹 사이트를 관리할 수 있습니다.

프런트엔드의 경우 내장 테마와 타사 테마를 결합하여 수천 개의 테마 옵션을 제공하여 화면에서 시각적으로 매력적인 웹사이트를 만듭니다.

하지만 WordPress를 분리하면 두 세계의 장점을 모두 누릴 수 있습니다. 이를 가능하게 하기 위해 WordPress에는 WordPress REST API라는 API가 있습니다.

개발자가 표준 HTTP 방법을 사용하여 WordPress 웹 사이트 데이터에 액세스하고 상호 작용할 수 있도록 하는 프로그래밍 인터페이스입니다.

이를 통해 개발자는 WordPress 콘텐츠를 원격으로 검색, 생성, 업데이트 및 삭제할 수 있습니다. 이를 통해 WordPress를 다른 애플리케이션 플랫폼이나 React.js, Angular.js 등과 같은 기타 프런트엔드 기술과 통합하여 사용자 지정 웹 사이트를 만드는 것이 더 쉬워집니다.

WordPress를 헤드리스로 만들려면 어떻게 해야 하나요? (헤드리스 WordPress 튜토리얼)

사용할 기술, 리소스, 선호하는 언어 및 프레임워크에 따라 표준 WordPress를 분리하는 다양한 방법이 있을 수 있습니다. 어떤 방법을 사용하든 프론트엔드 언어는 물론 WordPress Rest API에도 익숙해야 합니다.

하지만 지금은 대부분의 개인이 초보자이기 때문에 가장 간단한 방법을 선택하겠습니다. 아래 단계를 확인하세요.

1단계: WordPress 설정

가장 먼저 해야 할 일은 서버에서 평소처럼 WordPress 웹사이트를 만드는 것입니다. 이는 웹사이트가 활성화되어 있어야 하고 도메인과 적절한 웹 호스팅 계정이 있어야 함을 의미합니다.

그러나 올바른 WordPress 호스팅 플랫폼을 선택하는 것은 그 자체로 매우 어려운 작업이며 WordPress를 설정하고 헤드리스 CMS를 생성할 때 매우 중요한 단계이기도 합니다.

프런트엔드와 백엔드가 분리되더라도 백엔드는 여전히 호스팅이 필요한 서버에 상주해야 하기 때문에 이는 매우 중요합니다.

서버는 모든 웹 사이트 콘텐츠를 저장할 수 있는 공간을 제공할 뿐만 아니라 어떤 기술을 사용하든 웹 사이트 콘텐츠를 프런트 엔드에 원활하게 전달하는 데 있어 서버의 성능, 보안 및 안정성도 매우 중요합니다.

따라서 엄청나게 빠른 서버 성능과 강화된 보안을 제공하는 호스트를 선택하는 것이 필수적입니다.

이를 고려하여 속도, 엔터프라이즈 수준 보안 및 컨시어지 지원을 혼합하여 제공하는 가장 빠르고 선도적인 완전 관리형 WordPress 호스팅 회사 중 하나인 WPOven을 선택하면 헤드리스 WordPress 여정이 더 원활해집니다.

• 특히 WPOven은 최고 수준의 클라우드 제공업체인 Linode 에서 관리형 호스팅을 제공하여 고속 성능과 확장성을 보장합니다.
• 이 플랫폼은 WordPress 사전 설치를 제공하므로 WordPress 및 기타 도구 설정이 번거롭지 않습니다.
• 또한 내장된 고급 캐싱 시스템과 Cloudflare의 CDN(콘텐츠 전송 네트워크)을 통해 사용자 위치에 관계없이 콘텐츠가 더 빠르게 전송됩니다.
• 또한 WPOven은 내장된 웹 보호 방화벽과 SSL 설치를 통해 기업 수준의 강력한 보안을 보장하여 백엔드 데이터와 상호 작용을 보호하는 데 도움을 줍니다.
• 자동 백업 및 손쉬운 복원 옵션은 데이터 보호 계층을 강화하고 마음의 평화를 제공합니다.
• 또한 WPOven의 연중무휴 고객 지원과 광범위한 지식 기반을 통해 모든 문제가 신속하게 해결되므로 호스팅 관련 번거로움 없이 헤드리스 CMS 구축 및 관리에 집중할 수 있습니다.

2단계: REST API 활성화

다음으로 해야 할 일은 WordPress REST API가 활성화되어 있는지 확인하는 것입니다. 기본적으로 모든 새로운 WordPress 설치에서는 활성화되어 있습니다.

하지만 여전히 웹사이트에서 활성화되어 있는지 여부를 확인해야 합니다. 브라우저에 다음 URL을 입력하여 API 요청을 하면 됩니다.

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

실제 도메인 이름으로 'example.com'을 변경하고 API가 활성화된 경우 웹사이트 게시물에 대한 일부 정보가 포함된 JSON 응답이 표시됩니다.

또는 WP REST API 플러그인과 같은 플러그인의 도움을 받을 수 있습니다.

읽기: WordPress REST API: 시작 가이드

3단계: API를 통해 게시물 데이터 가져오기

게시물 데이터를 가져오려면 다음 단계를 따르세요.

• WordPress 대시보드 > 설정 > 영구 링크를 열고 게시물 이름을 선택하세요.

• 그런 다음 Postman API 테스트 도구를 다운로드해야 합니다.
• 이제 Postman API 도구 내에서 아래 형식과 같이 URL을 입력합니다.

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

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

6단계: React 애플리케이션 설정

이제 백엔드 작업은 끝났고, 이제 프론트엔드 작업을 시작할 차례입니다. 먼저 터미널에서 아래 코드를 실행하여 React 애플리케이션을 생성합니다.

npm create vite@latest my-blog-app
cd my-blog-app
npm install

이 명령은 Vite를 사용하여 새로운 React 애플리케이션을 생성하고 필요한 외부 라이브러리 또는 패키지도 설치합니다.

또한 HTTP 요청을 처리하려면 Axios도 포함해야 합니다. 이를 위해 다음 명령을 실행하여 설치하십시오.

npm install axios

이제 터미널이나 명령 프롬프트에서 npm run dev 명령을 실행하여 애플리케이션에 대한 로컬 개발 서버를 시작할 수 있습니다.

이 명령을 실행하면 로컬 컴퓨터에서 서버가 시작되고 URL https://127.0.0.1:5173 에서 애플리케이션을 사용할 수 있게 됩니다.

다음으로 해야 할 일은 코드 편집기(Visual Studio Code, Subkline Text, Atom 등 원하는 대로)에서 프로젝트를 열고 index.css, app.css 등과 같은 불필요한 파일도 제거하는 것입니다.

7단계: WordPress에서 게시물 검색

App.jsx 파일 상단에서 React 라이브러리의 useState 후크를 가져옵니다. 이를 통해 기능적 구성 요소에서 상태를 사용할 수 있습니다.

import React, { useState } from 'react';

기능 구성 요소 App 내에서 useState 후크를 사용하여 posts 이라는 상태 부분을 초기화합니다. 이 상태에는 일련의 게시물이 보관됩니다. useState([]) 빈 배열을 초기 값으로 사용하여 posts 초기화합니다.

const [posts, setPosts] = useState([]);

useState([]) 사용하여 빈 배열로 posts 상태를 초기화한 후 WordPress REST API에서 게시물을 가져오는 코드를 추가해야 합니다. 여기에는 게시물 데이터를 제공하는 API 엔드포인트에 대한 HTTP 요청이 포함됩니다.

상태 선언 후에 게시물 데이터를 가져오는 데 필요한 코드를 추가해야 합니다. 이 코드에는 일반적으로 fetch() 와 같은 메서드나 Axios와 같은 라이브러리를 사용하여 게시물 데이터를 제공하는 WordPress API 엔드포인트에 HTTP GET 요청을 보내는 작업이 포함됩니다.

다음으로 상태 선언 뒤에 다음 코드를 추가하여 WordPress REST API에서 게시물 데이터를 검색하고 이에 따라 게시물을 업데이트합니다.

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

이 코드는 구성 요소가 마운트될 때 WordPress 웹 사이트의 REST API에서 게시물을 가져오고, useState 후크의 setPosts 함수를 사용하여 가져온 데이터로 구성 요소의 상태를 업데이트합니다.

8단계: Blog 구성 요소 생성 및 렌더링

이제 src 폴더 안에 "comComponents"라는 새 폴더를 만들고 두 개의 새 파일 Blog.jsx 및 blog.css(컴포넌트 내부)를 만듭니다.

그런 다음 먼저 Blog.jsx 파일에 다음 코드를 추가합니다.

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedImage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedImage(response.data.source_url);
});
};

useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}

이 구성 요소는 prop으로 전달된 블로그 게시물의 제목, 날짜, 발췌 및 특집 이미지를 가져와 표시합니다.

그런 다음 blog.css 파일에 다음 스타일을 추가합니다.

@import url("https://fonts.googleapis.com/css?display=swap&family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}

.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}

.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}

마지막으로 App.jsx 파일의 return 문 안에 다음 코드 조각을 삽입합니다. 여기에서 JSX 구문을 사용하여 구성 요소 UI의 구조를 정의합니다.

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

Here's the final version of your "App.jsx":
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("https://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}

useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}

파일을 저장하고 브라우저를 새로 고치십시오. 이제 렌더링된 블로그 게시물을 화면에서 볼 수 있습니다.

헤드리스 WordPress 예

귀하의 참조와 자신감 구축을 위해 여기에서 몇 가지 헤드리스 WordPress 예제를 제공합니다.

1. 테크크런치

기술 애호가라면 TechCrunch에 대해 잘 알고 있어야 합니다. 이는 선도적인 기술 미디어 매체이자 뉴스 웹사이트입니다. 그들은 원활한 사용자 경험을 제공하기 위해 웹사이트의 프런트 엔드를 재설계했습니다.

이를 달성하기 위해 그들은 헤드리스 WordPress 접근 방식을 채택하고 React 애플리케이션을 사용하여 프런트 엔드를 만들고 백엔드용 헤드리스 WordPress를 만들었습니다.

2. 페이스북 브랜드 리소스 센터

이제 소셜 미디어 거대 기업인 Meta로 널리 알려진 Facebook은 브랜드 리소스 센터 웹 사이트에서 브랜드 자산에 대한 스타일 가이드로 이 헤드리스 WordPress 접근 방식을 사용합니다.

이 웹사이트는 독특하고 우아한 웹 디자인과 원활한 사용자 경험을 독특하게 혼합하여 사용합니다. 거대 기술 대기업과 같은 Facebook/Meta가 가능하다면 말이죠. 헤드리스 WordPress를 믿으세요. 당신도 그렇게 할 수 있습니다.

결론

결론적으로 특정 제한 사항, 단점 또는 단점을 제외하고. 헤드리스 접근 방식은 올바르게 구현되면 놀라운 일을 할 수 있습니다. 특히 헤드리스 웹 애플리케이션을 만들고 싶어하는 개발자나 콘텐츠 제작자에게는 매우 유리할 수 있습니다.

의심할 바 없이, 표준 WordPress를 분리하면 React를 사용하여 웹 사이트 UI를 자유롭게 디자인하고 WordPress를 사용하여 콘텐츠를 관리하는 등의 가능성의 세계가 열릴 수 있습니다.

이 기술을 사용하면 유연성, 확장성 및 SEO 최적화의 이점과 함께 각 기술의 완전한 기능을 누릴 수 있습니다.

이 블로그 전체에서 우리는 헤드리스 WordPress에 관한 모든 일반적인 질문을 해결하려고 시도했으며 참조용으로 헤드리스 WordPress를 만드는 방법에 대한 몇 가지 단계도 제공했습니다. (그러나 WordPress를 분리하는 방법은 여러 가지가 있을 수 있으므로 가장 쉬운 방법을 따르십시오.)

자주 묻는 질문

라훌

Rahul Kumar는 웹 매니아이자 WordPress 및 웹 호스팅을 전문으로 하는 콘텐츠 전략가입니다. 수년간의 경험과 업계 동향에 대한 최신 정보를 얻으려는 노력을 통해 그는 트래픽을 유도하고 참여도를 높이며 전환율을 높이는 효과적인 온라인 전략을 수립합니다. 세부 사항에 대한 Rahul의 관심과 매력적인 콘텐츠 제작 능력은 그를 온라인 인지도를 향상시키려는 모든 브랜드에 귀중한 자산으로 만듭니다.