Headless WordPress + Next.js + JWT + WPGraphQL 아키텍처

좋습니다 👍. 이제 JWT 인증을 적용한 Next.js + WPGraphQL 전체 아키텍처 다이어그램을 설계하는 단계로 넘어가겠습니다. 이 단계에서는 데이터 흐름과 보안 구조를 시각적으로 정리해, 전체 시스템이 어떻게 연결되는지 한눈에 볼 수 있도록 합니다.

🏗️ Headless WordPress + Next.js + JWT + WPGraphQL 아키텍처

1. 구성 요소

• LocalWP (WordPress 백엔드)
  • 콘텐츠 작성 및 관리
  • WPGraphQL 플러그인 → GraphQL API 제공
  • JWT Authentication 플러그인 → 토큰 발급 및 검증
• Next.js 프론트엔드
  • GraphQL 클라이언트 (graphql-request, Apollo 등)
  • JWT 토큰을 포함한 요청으로 인증된 GraphQL Mutation 수행
  • React Context/Hooks로 인증 상태 관리
• 사용자 브라우저
  • 로그인 요청 → JWT 토큰 발급
  • 토큰 저장 (localStorage, cookie)
  • 인증된 요청 시 토큰을 헤더에 포함

2. 데이터 흐름

1. 사용자 로그인 요청
   • 브라우저 → Next.js API Route → WordPress JWT 엔드포인트
   • WordPress → JWT 토큰 발급
2. 토큰 저장 및 인증 상태 관리
   • Next.js → localStorage/cookie에 토큰 저장
   • React Context로 인증 상태 전역 관리
3. GraphQL 요청 (Query/Mutation)
   • 브라우저 → Next.js → WPGraphQL 엔드포인트
   • 헤더에 Authorization: Bearer <JWT> 포함
   • WordPress → 토큰 검증 후 데이터 반환
4. 보호된 리소스 접근
   • 인증된 사용자만 글 작성/수정 Mutation 가능
   • 비인증 사용자는 Query만 가능 (예: 글 목록 조회)

3. 아키텍처 다이어그램 (텍스트 표현)

[사용자 브라우저]
      │
      ▼
[Next.js 프론트엔드]
  ├── 로그인 요청 → /api/auth
  ├── JWT 토큰 저장 (localStorage/cookie)
  ├── GraphQL 요청 시 Authorization 헤더 포함
      │
      ▼
[LocalWP (WordPress 백엔드)]
  ├── WPGraphQL 플러그인 → GraphQL API 제공
  ├── JWT Authentication 플러그인 → 토큰 발급/검증
      │
      ▼
[데이터베이스 + 콘텐츠]
  └── 인증된 요청만 Mutation 허용

4. 보안 포인트

• JWT 토큰 만료 시간 설정 → 장기 세션 방지
• HTTPS 적용 → 토큰 전송 시 암호화
• Role 기반 권한 관리 → 관리자/편집자/구독자 권한 분리
• API Rate Limiting → 무차별 대입 공격 방지

👉 다음 단계에서는 제가 실제 JWT 인증 기반 GraphQL Mutation 테스트 코드 (Next.js API Route + Jest) 예시를 보여드릴 수 있습니다.