📘 개발자 실전 가이드 문서 / make.html
홈으로
Developer Blueprint & Setup Walkthrough

SPA + Jamstack
+ Headless WP + PWA
개발자 구축 튜토리얼

좌측 접이식 사이드바 메뉴를 통해 백엔드 구성, SPA 라우팅, Jamstack CDN 자동화, PWA 오프라인 캐싱 튜토리얼을 단계별로 탐색하세요.

튜토리얼 단계별 목차 보기 메인 아키텍처 홈으로
quick-setup-command.sh 
# 1. Clone Starter Repo & Install
$ git clone https://github.com/modernweb/stack-starter.git
$ cd stack-starter && npm install

# 2. Boot Headless WP & Frontend Dev Server
$ docker-compose up -d --build
$ npm run dev -- --open

✔ Headless WP: https://pwadev.makerskorean.kr/gmw101/
✔ Jamstack PWA: Ready ⚡
TABLE OF CONTENTS

튜토리얼 단계별 학습 목차

처음부터 끝까지 따라 할 수 있는 5단계 체계적인 가이드라인입니다.

STEP 01

Headless WordPress 인프라 세팅

워드프레스를 Headless CMS로 활용할 때 가장 중요한 것은 **CORS 헤더 허용** 및 **PHP 테마 렌더링 비활성화**입니다.

1-1. `wp-config.php` CORS 및 REST API 헤더 설정

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Authorization, Content-Type");

// WP REST API 및 WPGraphQL 활성화
define('WP_AUTO_UPDATE_CORE', false);

1-2. WPGraphQL 및 JWT Auth 추천 플러그인

  • WPGraphQL: REST API보다 강력한 쿼리 선택 라이브러리
  • JWT Authentication for WP REST API: 프론트엔드 토큰 인증 처리
  • Advanced Custom Fields (ACF): 커스텀 필드를 API JSON으로 출력
STEP 02

프론트엔드 SPA 라우터 & API 수신 라이브러리

브라우저 화면 새로고침 없이 history.pushState()를 활용하여 페이지 전환 지연(0ms)을 만듭니다. 

async function fetchHeadlessPosts(nodeEndpoint) {
  const res = await fetch(`${nodeEndpoint}/wp-json/wp/v2/posts?_embed`);
  if (!res.ok) throw new Error("API Response Error");
  return await res.json();
}
STEP 03

Jamstack Edge CDN 빌드 & Webhook 자동화

마케터가 워드프레스에서 '발행' 버튼을 누르면 Webhook이 실행되어 Cloudflare / Vercel에 정적 빌드를 지능적으로 트리거합니다. 

// WP Webhook Action Example
add_action('publish_post', function($post_id) {
    wp_remote_post('https://api.vercel.com/v1/integrations/deploy/webhook_id');
});
STEP 04

PWA Service Worker & Manifest 등록

네트워크가 완전 오프라인인 환경에서도 서비스 오프라인 캐시를 통해 앱처럼 즉각 열리도록 보장합니다. 

// sw.js Service Worker Caching
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => cached || fetch(event.request))
  );
});
STEP 05

성능 및 보안 최적화 (Audit)

⚡ 성능 최적화 (Lighthouse 100)

  • WebP 이미지 변환 및 크기 자동 조정
  • Font-display: swap으로 텍스트 로딩 지연 예방
  • Gzip / Brotli 압축 전송

🛡️ 데이터베이스 보안

  • 프론트엔드와 WP DB의 완전 격리로 직접 공격 원천 차단
  • WP Admin 주소 IP 제한 및 2FA 인증 적용