🔧 워드프레스 REST API의 강력함

워드프레스는 2016년 버전 4.7부터 REST API를 코어에 포함시켰어. 이게 정말 게임 체인저였지! 이제 워드프레스는 단순한 블로그 플랫폼이 아니라, 강력한 콘텐츠 관리 백엔드로 활용할 수 있게 된 거야. 💪

REST API는 HTTP 프로토콜을 통해 데이터를 주고받는 표준화된 방식이야. 워드프레스 REST API를 사용하면 게시글, 페이지, 미디어, 사용자, 댓글 등 거의 모든 데이터에 접근할 수 있어.

예를 들어, 최신 게시글 10개를 가져오고 싶다면? 이렇게 간단해:

fetch('https://yoursite.com/wp-json/wp/v2/posts?per_page=10')
  .then(response => response.json())
  .then(data => console.log(data));

이렇게 가져온 JSON 데이터를 React, Vue, Angular 등 어떤 프론트엔드 프레임워크에서든 자유롭게 활용할 수 있어! 🎨

🏗️ 헤드리스 CMS 구현 단계별 가이드

먼저 워드프레스를 설치해야 해. 로컬 환경이든 서버든 상관없어. 중요한 건 REST API가 활성화되어 있는지 확인하는 거야.

워드프레스 관리자 페이지에서 설정 → 고유주소로 가서 "기본" 이외의 다른 옵션을 선택해줘. REST API는 고유주소가 활성화되어 있어야 제대로 작동하거든!

프론트엔드와 백엔드가 다른 도메인에 있을 경우, CORS(Cross-Origin Resource Sharing) 문제가 발생할 수 있어. 이걸 해결하려면 워드프레스의 functions.php 파일에 다음 코드를 추가해줘:

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
    header("Access-Control-Allow-Headers: Content-Type, Authorization");
}
add_action('init','add_cors_http_header');

물론 실제 운영 환경에서는 * 대신 특정 도메인만 허용하는 게 보안상 좋아! 🔒

기본 REST API만으로는 부족할 때가 있어. 특별한 데이터 구조가 필요하거나, 여러 데이터를 한 번에 가져오고 싶을 때 말이야. 이럴 때는 커스텀 엔드포인트를 만들면 돼!

add_action('rest_api_init', function () {
    register_rest_route('custom/v1', '/featured-posts/', array(
        'methods' => 'GET',
        'callback' => 'get_featured_posts',
        'permission_callback' => '__return_true'
    ));
});

function get_featured_posts() {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
        'meta_key' => 'featured',
        'meta_value' => '1'
    );
    
    $posts = get_posts($args);
    
    $data = array();
    foreach($posts as $post) {
        $data[] = array(
            'id' => $post->ID,
            'title' => $post->post_title,
            'excerpt' => $post->post_excerpt,
            'thumbnail' => get_the_post_thumbnail_url($post->ID, 'medium')
        );
    }
    
    return new WP_REST_Response($data, 200);
}

이제 /wp-json/custom/v1/featured-posts/로 접근하면 특별히 선별된 게시글만 가져올 수 있어! 🎯

게시글을 읽는 건 누구나 할 수 있지만, 작성하거나 수정하려면 인증이 필요해. 워드프레스 REST API는 여러 인증 방식을 지원해:

JWT(JSON Web Token) 방식이 가장 인기 있어. JWT Authentication for WP REST API 플러그인을 설치하면 쉽게 구현할 수 있어!

// 로그인 요청
fetch('https://yoursite.com/wp-json/jwt-auth/v1/token', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        username: 'your_username',
        password: 'your_password'
    })
})
.then(response => response.json())
.then(data => {
    // 토큰 저장
    localStorage.setItem('token', data.token);
});

이제 재미있는 부분이야! React로 실제 프론트엔드를 만들어보자. 먼저 프로젝트를 생성해:

npx create-react-app my-headless-site
cd my-headless-site
npm install axios

간단한 블로그 목록 컴포넌트를 만들어볼게:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function BlogList() {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        axios.get('https://yoursite.com/wp-json/wp/v2/posts?_embed')
            .then(response => {
                setPosts(response.data);
                setLoading(false);
            })
            .catch(error => {
                console.error('Error fetching posts:', error);
                setLoading(false);
            });
    }, []);

    if (loading) return <div>로딩 중...</div>;

    return (
        <div className="blog-list">
            {posts.map(post => (
                <article key={post.id} className="post-card">
                    {post._embedded?.['wp:featuredmedia'] && (
                        <img 
                            src={post._embedded['wp:featuredmedia'][0].source_url} 
                            alt={post.title.rendered}
                        />
                    )}
                    <h2>{post.title.rendered}</h2>
                    <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
                    <a href={`/post/${post.slug}`}>더 읽기</a>
                </article>
            ))}
        </div>
    );
}

export default BlogList;

?_embed 파라미터를 추가하면 썸네일 이미지, 작성자 정보 등 관련 데이터를 한 번에 가져올 수 있어. 엄청 편리하지? 😊

🚀 성능 최적화 전략

매번 API를 호출하면 서버에 부담이 가고 속도도 느려져. 캐싱을 적극 활용해야 해!

React에서는 SWR이나 React Query 같은 라이브러리를 사용하면 자동으로 캐싱과 재검증을 처리해줘:

import useSWR from 'swr';

const fetcher = url => fetch(url).then(res => res.json());

function Posts() {
    const { data, error } = useSWR(
        'https://yoursite.com/wp-json/wp/v2/posts',
        fetcher,
        { refreshInterval: 60000 } // 1분마다 재검증
    );

    if (error) return <div>로딩 실패</div>;
    if (!data) return <div>로딩 중...</div>;

    return (
        <div>
            {data.map(post => (
                <div key={post.id}>{post.title.rendered}</div>
            ))}
        </div>
    );
}

워드프레스는 업로드된 이미지의 여러 크기를 자동으로 생성해. REST API에서도 이걸 활용할 수 있어:

// 미디어 정보 가져오기
const media = post._embedded['wp:featuredmedia'][0];

// 다양한 크기 활용
const thumbnail = media.media_details.sizes.thumbnail.source_url;
const medium = media.media_details.sizes.medium.source_url;
const large = media.media_details.sizes.large.source_url;

반응형 이미지를 위해 srcset을 활용하면 더욱 좋아:

<img 
    src={medium}
    srcSet={`${thumbnail} 300w, ${medium} 768w, ${large} 1024w`}
    sizes="(max-width: 768px) 100vw, 768px"
    alt={post.title.rendered}
/>

한 번에 모든 게시글을 가져오면 성능이 떨어져. 페이지네이션을 구현해보자:

function PaginatedPosts() {
    const [posts, setPosts] = useState([]);
    const [page, setPage] = useState(1);
    const [totalPages, setTotalPages] = useState(0);

    useEffect(() => {
        axios.get(`https://yoursite.com/wp-json/wp/v2/posts?page=${page}&per_page=10`)
            .then(response => {
                setPosts(response.data);
                setTotalPages(parseInt(response.headers['x-wp-totalpages']));
            });
    }, [page]);

    return (
        <div>
            {posts.map(post => (
                <div key={post.id}>{post.title.rendered}</div>
            ))}
            
            <div className="pagination">
                <button 
                    onClick={() => setPage(page - 1)} 
                    disabled={page === 1}
                >
                    이전
                </button>
                <span>{page} / {totalPages}</span>
                <button 
                    onClick={() => setPage(page + 1)} 
                    disabled={page === totalPages}
                >
                    다음
                </button>
            </div>
        </div>
    );
}

워드프레스 REST API는 응답 헤더에 총 페이지 수(X-WP-TotalPages)와 총 게시글 수(X-WP-Total)를 포함해줘. 이걸 활용하면 페이지네이션 UI를 쉽게 만들 수 있어! 👍

🎨 고급 기능 구현하기

워드프레스 REST API는 기본적으로 검색 기능을 제공해:

function SearchPosts() {
    const [searchTerm, setSearchTerm] = useState('');
    const [results, setResults] = useState([]);

    const handleSearch = async () => {
        const response = await axios.get(
            `https://yoursite.com/wp-json/wp/v2/posts?search=${searchTerm}`
        );
        setResults(response.data);
    };

    return (
        <div>
            <input 
                type="text" 
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="검색어를 입력하세요"
            />
            <button onClick={handleSearch}>검색</button>
            
            <div className="search-results">
                {results.map(post => (
                    <div key={post.id}>
                        <h3>{post.title.rendered}</h3>
                        <p dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
                    </div>
                ))}
            </div>
        </div>
    );
}

특정 카테고리나 태그의 게시글만 가져오고 싶을 때:

// 카테고리 ID로 필터링
axios.get('https://yoursite.com/wp-json/wp/v2/posts?categories=5')

// 태그 ID로 필터링
axios.get('https://yoursite.com/wp-json/wp/v2/posts?tags=12')

// 여러 카테고리 (OR 조건)
axios.get('https://yoursite.com/wp-json/wp/v2/posts?categories=5,8,12')

// 카테고리 제외
axios.get('https://yoursite.com/wp-json/wp/v2/posts?categories_exclude=3')

카테고리 목록을 먼저 가져와서 필터 UI를 만들 수도 있어:

function CategoryFilter() {
    const [categories, setCategories] = useState([]);
    const [selectedCategory, setSelectedCategory] = useState(null);
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        // 카테고리 목록 가져오기
        axios.get('https://yoursite.com/wp-json/wp/v2/categories')
            .then(response => setCategories(response.data));
    }, []);

    useEffect(() => {
        // 선택된 카테고리의 게시글 가져오기
        const url = selectedCategory 
            ? `https://yoursite.com/wp-json/wp/v2/posts?categories=${selectedCategory}`
            : 'https://yoursite.com/wp-json/wp/v2/posts';
        
        axios.get(url).then(response => setPosts(response.data));
    }, [selectedCategory]);

    return (
        <div>
            <div className="category-filter">
                <button onClick={() => setSelectedCategory(null)}>전체</button>
                {categories.map(cat => (
                    <button 
                        key={cat.id}
                        onClick={() => setSelectedCategory(cat.id)}
                        className={selectedCategory === cat.id ? 'active' : ''}
                    >
                        {cat.name}
                    </button>
                ))}
            </div>
            
            <div className="posts">
                {posts.map(post => (
                    <div key={post.id}>{post.title.rendered}</div>
                ))}
            </div>
        </div>
    );
}

Advanced Custom Fields(ACF) 플러그인을 사용하면 게시글에 다양한 커스텀 필드를 추가할 수 있어. REST API에서도 이걸 가져올 수 있어!

ACF Pro 버전을 사용하거나, 무료 버전에서는 다음 코드를 추가해줘:

// functions.php에 추가
add_action('rest_api_init', function() {
    register_rest_field('post', 'custom_fields', array(
        'get_callback' => function($post) {
            return get_fields($post['id']);
        }
    ));
});

이제 API 응답에 custom_fields 항목이 포함돼:

{
    "id": 123,
    "title": {
        "rendered": "멋진 게시글"
    },
    "custom_fields": {
        "subtitle": "부제목입니다",
        "author_info": "작성자 정보",
        "rating": 4.5,
        "featured_video": "https://youtube.com/..."
    }
}

댓글도 REST API로 관리할 수 있어:

// 특정 게시글의 댓글 가져오기
axios.get('https://yoursite.com/wp-json/wp/v2/comments?post=123')

// 댓글 작성하기
axios.post('https://yoursite.com/wp-json/wp/v2/comments', {
    post: 123,
    author_name: '홍길동',
    author_email: 'hong@example.com',
    content: '좋은 글 감사합니다!'
}, {
    headers: {
        'Authorization': `Bearer ${token}`
    }
})

React 컴포넌트로 만들면:

function Comments({ postId }) {
    const [comments, setComments] = useState([]);
    const [newComment, setNewComment] = useState('');

    useEffect(() => {
        axios.get(`https://yoursite.com/wp-json/wp/v2/comments?post=${postId}`)
            .then(response => setComments(response.data));
    }, [postId]);

    const handleSubmit = async (e) => {
        e.preventDefault();
        
        try {
            const response = await axios.post(
                'https://yoursite.com/wp-json/wp/v2/comments',
                {
                    post: postId,
                    content: newComment
                },
                {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token')}`
                    }
                }
            );
            
            setComments([...comments, response.data]);
            setNewComment('');
        } catch (error) {
            console.error('댓글 작성 실패:', error);
        }
    };

    return (
        <div className="comments-section">
            <h3>댓글 {comments.length}개</h3>
            
            {comments.map(comment => (
                <div key={comment.id} className="comment">
                    <strong>{comment.author_name}</strong>
                    <p dangerouslySetInnerHTML={{ __html: comment.content.rendered }} />
                    <small>{new Date(comment.date).toLocaleString()}</small>
                </div>
            ))}
            
            <form onSubmit={handleSubmit}>
                <textarea 
                    value={newComment}
                    onChange={(e) => setNewComment(e.target.value)}
                    placeholder="댓글을 입력하세요"
                />
                <button type="submit">댓글 작성</button>
            </form>
        </div>
    );
}

🔒 보안 강화하기

REST API를 공개하면 누구나 접근할 수 있어. 필요에 따라 접근을 제한해야 해:

// 특정 IP만 허용
add_filter('rest_authentication_errors', function($result) {
    $allowed_ips = ['123.456.789.0', '111.222.333.444'];
    $user_ip = $_SERVER['REMOTE_ADDR'];
    
    if (!in_array($user_ip, $allowed_ips)) {
        return new WP_Error(
            'rest_forbidden',
            '접근이 거부되었습니다.',
            array('status' => 403)
        );
    }
    
    return $result;
});

API 남용을 방지하기 위해 요청 횟수를 제한할 수 있어:

function check_rate_limit() {
    $ip = $_SERVER['REMOTE_ADDR'];
    $transient_key = 'api_rate_limit_' . md5($ip);
    
    $requests = get_transient($transient_key);
    
    if ($requests === false) {
        set_transient($transient_key, 1, MINUTE_IN_SECONDS);
    } else if ($requests >= 60) { // 분당 60회 제한
        return new WP_Error(
            'rate_limit_exceeded',
            '요청 횟수 제한을 초과했습니다.',
            array('status' => 429)
        );
    } else {
        set_transient($transient_key, $requests + 1, MINUTE_IN_SECONDS);
    }
    
    return true;
}

add_filter('rest_pre_dispatch', function($result, $server, $request) {
    $rate_check = check_rate_limit();
    if (is_wp_error($rate_check)) {
        return $rate_check;
    }
    return $result;
}, 10, 3);

기본적으로 REST API는 많은 정보를 노출해. 필요 없는 정보는 숨기는 게 좋아:

// 사용자 이메일 숨기기
add_filter('rest_prepare_user', function($response, $user, $request) {
    if (!current_user_can('edit_users')) {
        unset($response->data['email']);
    }
    return $response;
}, 10, 3);

// 특정 게시글 타입 숨기기
add_filter('rest_prepare_post', function($response, $post, $request) {
    if ($post->post_status === 'draft' && !current_user_can('edit_posts')) {
        return new WP_Error(
            'rest_forbidden',
            '이 게시글에 접근할 수 없습니다.',
            array('status' => 403)
        );
    }
    return $response;
}, 10, 3);

🌟 실전 프로젝트 예제

Next.js를 사용하면 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 쉽게 구현할 수 있어. SEO에도 엄청 유리하지!

// pages/index.js
export async function getStaticProps() {
    const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts?_embed');
    const posts = await res.json();

    return {
        props: {
            posts,
        },
        revalidate: 60, // 60초마다 재생성
    };
}

export default function Home({ posts }) {
    return (
        <div>
            <h1>내 블로그</h1>
            {posts.map(post => (
                <article key={post.id}>
                    <h2>{post.title.rendered}</h2>
                    <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
                    <Link href={`/posts/${post.slug}`}>
                        <a>더 읽기</a>
                    </Link>
                </article>
            ))}
        </div>
    );
}

개별 게시글 페이지도 만들어보자:

// pages/posts/[slug].js
export async function getStaticPaths() {
    const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts');
    const posts = await res.json();

    const paths = posts.map(post => ({
        params: { slug: post.slug },
    }));

    return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
    const res = await fetch(
        `https://yoursite.com/wp-json/wp/v2/posts?slug=${params.slug}&_embed`
    );
    const posts = await res.json();
    const post = posts[0];

    return {
        props: {
            post,
        },
        revalidate: 60,
    };
}

export default function Post({ post }) {
    return (
        <article>
            <h1>{post.title.rendered}</h1>
            {post._embedded?.['wp:featuredmedia'] && (
                <img 
                    src={post._embedded['wp:featuredmedia'][0].source_url}
                    alt={post.title.rendered}
                />
            )}
            <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
        </article>
    );
}

Vue.js도 워드프레스 REST API와 환상의 궁합이야:

// PostList.vue
<template>
  <div class="post-list">
    <div v-if="loading">로딩 중...</div>
    <div v-else>
      <article v-for="post in posts" :key="post.id" class="post-card">
        <h2 v-html="post.title.rendered"></h2>
        <div v-html="post.excerpt.rendered"></div>
        <router-link :to="`/post/${post.slug}`">더 읽기</router-link>
      </article>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'PostList',
  data() {
    return {
      posts: [],
      loading: true
    };
  },
  async mounted() {
    try {
      const response = await axios.get(
        'https://yoursite.com/wp-json/wp/v2/posts?_embed'
      );
      this.posts = response.data;
    } catch (error) {
      console.error('게시글 로딩 실패:', error);
    } finally {
      this.loading = false;
    }
  }
};
</script>

<style scoped>
.post-card {
  border: 1px solid #e0e0e0;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
}
</style>

React Native나 Flutter로 모바일 앱을 만들 때도 동일한 API를 사용할 수 있어. 이게 헤드리스 CMS의 진짜 강점이야!

// React Native 예제
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, Image, StyleSheet } from 'react-native';
import axios from 'axios';

const BlogApp = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('https://yoursite.com/wp-json/wp/v2/posts?_embed')
      .then(response => setPosts(response.data));
  }, []);

  const renderPost = ({ item }) => (
    <View style={styles.postCard}>
      {item._embedded?.['wp:featuredmedia'] && (
        <Image 
          source={{ uri: item._embedded['wp:featuredmedia'][0].source_url }}
          style={styles.thumbnail}
        />
      )}
      <Text style={styles.title}>{item.title.rendered}</Text>
    </View>
  );

  return (
    <FlatList
      data={posts}
      renderItem={renderPost}
      keyExtractor={item => item.id.toString()}
    />
  );
};

const styles = StyleSheet.create({
  postCard: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  thumbnail: {
    width: '100%',
    height: 200,
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginTop: 10,
  },
});

export default BlogApp;

🌈 미래 지향적 기능들

REST API도 좋지만, GraphQL을 사용하면 더 유연하게 데이터를 가져올 수 있어. WPGraphQL 플러그인을 설치하면 워드프레스에서 GraphQL을 사용할 수 있어:

// GraphQL 쿼리 예제
query GetPosts {
  posts(first: 10) {
    nodes {
      id
      title
      excerpt
      featuredImage {
        node {
          sourceUrl
        }
      }
      author {
        node {
          name
        }
      }
    }
  }
}

GraphQL의 장점은 필요한 데이터만 정확히 요청할 수 있다는 거야. Over-fetching이나 Under-fetching 문제가 없어! 🎯

댓글이나 좋아요 같은 실시간 기능이 필요하다면 WebSocket을 고려해봐:

// Socket.io 예제
import io from 'socket.io-client';

const socket = io('https://yoursite.com');

socket.on('new_comment', (comment) => {
    // 새 댓글이 달리면 실시간으로 업데이트
    setComments(prevComments => [...prevComments, comment]);
});

socket.on('post_updated', (postId) => {
    // 게시글이 수정되면 다시 로드
    fetchPost(postId);
});

헤드리스 CMS로 만든 사이트를 PWA로 만들면 오프라인에서도 작동하고, 홈 화면에 추가할 수 있어:

// service-worker.js
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 캐시에 있으면 캐시에서, 없으면 네트워크에서
        return response || fetch(event.request);
      })
  );
});