개요
현대 웹 개발에서 헤드리스 CMS(콘텐츠 관리 시스템)의 사용이 증가하고 있습니다. 워드프레스는 이러한 헤드리스 CMS로서의 가능성을 제공하기 위해 WP REST API를 지원합니다. WP REST API는 개발자가 워드프레스를 백엔드로 사용하고, 프론트엔드 프레임워크(React, Vue.js, Angular 등)를 사용하여 유연한 사용자 인터페이스를 구현할 수 있는 방법을 제시합니다. 본 글에서는 WP REST API를 이용한 헤드리스 워드프레스 구현 방법에 대해 자세히 설명하고, 실제 코드 예제를 통해 이해를 돕겠습니다.
1. 헤드리스 워드프레스란?
헤드리스 워드프레스는 프론트엔드와 백엔드가 분리된 구조를 말합니다. 전통적인 워드프레스는 백엔드와 프론트엔드가 tightly coupled되어 있어, 사용자 인터페이스를 변경하고 싶으면 백엔드와의 깊은 통합이 필요했습니다. 그러나 헤드리스 구조에서는 워드프레스가 오직 데이터 저장소로 기능하고, 클라이언트는 REST API를 통해 데이터를 요청하여 필요할 때 동적으로 콘텐츠를 받아옵니다.
2. WP REST API 소개
WP REST API는 워드프레스에서 제공하는 API로, JSON 형식으로 데이터에 접근할 수 있도록 해줍니다. REST API를 통해 사용자는 다양한 HTTP 메소드를 사용하여 워드프레스의 게시물(post), 페이지(page), 댓글(comment) 등의 데이터에 CRUD(Create, Read, Update, Delete) 작업을 수행할 수 있습니다.
2.1 주요 엔드포인트
GET /wp-json/wp/v2/posts: 모든 게시물 목록 조회GET /wp-json/wp/v2/posts/{id}: 특정 게시물 조회POST /wp-json/wp/v2/posts: 게시물 생성PUT /wp-json/wp/v2/posts/{id}: 게시물 수정DELETE /wp-json/wp/v2/posts/{id}: 게시물 삭제
3. 헤드리스 워드프레스 설정하기
헤드리스 워드프레스를 구현하기 위해서는 WP REST API를 활성화하고, 이를 활용하기 위한 프론트엔드 코드를 작성해야 합니다. 다음 단계에 따라 헤드리스 클라이언트를 설정해보겠습니다.
3.1 WP REST API 활성화
기본적으로 최신 버전의 워드프레스에서는 WP REST API가 활성화되어 있습니다. 그러나 사용 중인 테마나 플러그인에 따라 API의 접근 제한이 있을 수 있으므로 확인이 필요합니다.
3.2 CORS 설정
프론트엔드 애플리케이션과 워드프레스 서버가 서로 다른 출처(origin)일 경우, CORS(Cross-Origin Resource Sharing)를 설정해야 합니다. 이를 통해 API 요청이 가능하게 됩니다. 워드프레스의 functions.php에 다음 코드를 추가하여 CORS를 허용할 수 있습니다:
add_action('init', 'add_cors_http_header');
function add_cors_http_header(){
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With");
}
4. 프론트엔드 코드 구현
이제 React.js를 사용하여 프론트엔드 애플리케이션을 구현해보겠습니다. React 앱을 생성하기 위해 Create React App을 사용하겠습니다. 다음 명령어로 새로운 React 애플리케이션을 생성합니다.
npx create-react-app headless-wp-client생성된 React 애플리케이션 디렉토리로 이동한 후, npm start 명령으로 개발 서버를 실행합니다.
4.1 게시물 목록 가져오기
워드프레스에서 게시물을 가져오는 기능을 구현하기 위해 axios 라이브러리를 사용합니다. axios를 설치하려면 다음 명령어를 입력합니다:
npm install axios이제 App.js 파일을 다음과 같이 수정하여 게시물 목록을 가져오도록 합니다:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function App() {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchPosts = async () => {
const result = await axios(
'https://your-wordpress-site.com/wp-json/wp/v2/posts',
);
setPosts(result.data);
};
fetchPosts();
}, []);
return (
워드프레스 게시물 목록
{posts.map(post => (
-
{post.title.rendered}
))}
);
}
export default App;
4.2 게시물 상세 보기
게시물의 상세 보기를 위해, 게시물 ID를 기반으로 추가적인 API 요청을 처리합니다. React Router를 사용하여 라우팅을 구현할 수 있습니다. React Router를 설치하려면 다음 명령어를 사용합니다:
npm install react-router-dom그 다음, 아래와 같은 구조로 라우터를 설정합니다:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from './App';
import Post from './Post';
function Routes() {
return (
);
}
export default Routes;
4.3 게시물 상세 컴포넌트 구현
Post.js라는 파일을 생성하고 아래 코드를 추가하여 특정 게시물을 API로 가져오도록 설정합니다:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function Post({ match }) {
const [post, setPost] = useState(null);
useEffect(() => {
const fetchPost = async () => {
const result = await axios(
`https://your-wordpress-site.com/wp-json/wp/v2/posts/${match.params.id}`,
);
setPost(result.data);
};
fetchPost();
}, [match.params.id]);
if (!post) return Loading...;
return (
{post.title.rendered}
);
}
export default Post;
5. 결론
헤드리스 워드프레스는 더 나은 사용자 경험과 성능을 제공할 수 있는 유연한 해결책을 제공합니다. WP REST API를 이용하여 데이터를 외부 애플리케이션에서 요청하고, 필요한 장소에서 자유롭게 렌더링할 수 있습니다. 이는 동적인 웹사이트나 앱을 구축하는 데 있어 강력한 장점을 제공합니다. 또한, 위의 예제를 통해 기본적인 설정 및 툴을 이해하고 활용할 수 있는 길잡이가 되기를 바랍니다.