Faust.js로 헤드리스 WordPress 사이트를 만드는 방법(9단계)

WordPress를 헤드리스로 실행해야 하는 경우 품질 프레임워크가 필수입니다. 그러나 최신 프레임워크의 약간의 도움을 받아도 콘텐츠를 효과적으로 미리 보는 데 여전히 어려움을 겪을 수 있습니다.

바로 여기에서 Faust.js가 등장합니다. 이 새로운 프레임워크는 Next.js 및 React의 기능을 활용하고 이를 편리한 사후 미리보기 기능과 결합합니다. Faust.js를 사용하면 기존 WordPress 웹 사이트와 정확히 동일한 Publish 를 누르기 전에 콘텐츠를 볼 수 있습니다.

이 기사에서는 다음 헤드리스 WordPress 프로젝트에 Faust.js를 사용하려는 이유를 살펴보겠습니다. 그런 다음 이 새로운 프레임워크를 설정하고 간단한 프런트 엔드를 구축하는 방법을 보여드리겠습니다. 시작하자!

헤드리스 워드프레스 사이트를 운영해야 하는 이유

일반적인 CMS(콘텐츠 관리 시스템)는 프런트 엔드와 백 엔드로 구성되며 WordPress도 예외는 아닙니다. 그러나 WordPress를 헤드리스로 실행할 수 있습니다.

'헤드'는 프레젠테이션 계층을 나타내고 '본문'은 콘텐츠가 저장되고 작성되는 곳입니다. 백 엔드(본체)에서 프런트 엔드(헤드)를 제거하면 워드프레스 헤드리스를 실행할 수 있습니다.

헤드리스 프로젝트에서는 익숙한 WordPress 대시보드 및 도구를 계속 사용할 수 있습니다. 그러나 WordPress의 일반적인 제약 조건과 상관없이 자신만의 프런트 엔드를 자유롭게 디자인할 수 있습니다. 이렇게 하면 콘텐츠가 표시되는 방식을 완전히 제어할 수 있습니다.

자신만의 프론트 엔드를 만드는 것은 흥미로운 잠재 고객일 수 있지만 특히 간단하지는 않습니다. 다행히도 많은 작업을 수행할 수 있는 도구가 있습니다.

많은 헤드리스 CMS 사용자는 Frontity, Gatsby 프레임워크 또는 React 기반 Next.js와 같은 도구의 도움을 받기로 선택합니다. 그러나 전통적으로 프레임워크를 사용하더라도 헤드리스 사이트에서 게시물과 페이지를 미리 보는 것은 어려웠습니다. 여기서 Faust.js가 등장합니다.

이 프레임워크는 Next.js 및 React를 기반으로 구축되었으며 기존 WordPress와 일관된 게시 환경을 제공하기 위해 노력합니다. 이를 위해 Faust.js는 원활한 콘텐츠 미리보기를 제공합니다.

Faust.js는 GraphQL 클라이언트도 사용합니다. 이를 통해 GraphQL 쿼리를 미리 알 필요 없이 WordPress WPGraphQL API를 쿼리할 수 있습니다.

또한 Faust.js는 WordPress 백엔드를 인증하기 위한 기본 제공 메커니즘을 제공합니다. 이렇게 하면 헤드리스 CMS로 게이트 콘텐츠 및 전자 상거래 사이트를 쉽게 구축할 수 있습니다.

Faust.js로 헤드리스 WordPress 사이트를 만드는 방법(9단계)

이제 Faust.js가 무엇이고 주요 이점 중 일부를 다루었으므로 이 프레임워크를 시작하는 방법을 살펴보겠습니다. 다음은 9단계로 Faust.js를 사용하여 헤드리스 CMS를 만드는 방법입니다.

1단계: 개발 환경 준비

시작하기 전에 Node.js와 노드 패키지 관리자(NPM)를 설치해야 합니다. 또한 로컬 또는 웹 서버에서 호스팅할 수 있는 WordPress 설치가 필요합니다.

또한 몇 가지 WordPress 플러그인을 사용하게 됩니다. 먼저 WPGraphQL 플러그인은 WordPress를 프로젝트에서 사용할 수 있는 GraphQL API로 변환합니다.

WPE 헤드리스도 필요합니다. 이 플러그인은 WordPress가 헤드리스 CMS로 올바르게 작동하도록 하는 몇 가지 추가 기능을 제공합니다. 이 플러그인의 최신 버전을 다운로드한 다음 WordPress 대시보드에 업로드할 수 있습니다.

Faust.js 프레임워크를 시작하는 데 도움이 되도록 create-next-app 스타터 프로젝트를 사용합니다. 이렇게 하면 필요한 모든 구성과 파일이 이미 있는 부트스트랩된 Next.js 애플리케이션이 생성됩니다. 그런 다음 이것을 헤드리스 Faust.js 프로젝트의 기초로 사용할 수 있습니다.

NPM과 함께 제공되는 npx 도구를 사용하여 create-next-app을 설치할 수 있습니다. 로컬 터미널 또는 명령 프롬프트 창에서 다음을 실행합니다.

 npx create-next-app faust-headless-demo

이것은 컴퓨터의 로컬 사용자 디렉토리에 faust-headless-demo 프로젝트를 생성합니다. 이 프로세스가 완료되면 터미널은 다음 명령을 사용하여 Next.js 애플리케이션을 시작하라는 메시지를 표시합니다.

 cd faust-headless-demo npm run dev

축하합니다. Next.js 프로젝트를 성공적으로 만들었습니다! 이 응용 프로그램을 보려면 브라우저에서 "http://localhost:3000"으로 이동하십시오.

이제 Next.js 시작 사이트가 표시되어야 합니다. 오류 메시지가 표시되면 npm run dev 명령을 다시 실행하여 문제를 해결할 수 있습니다.

2단계: TypeScript 설정

Faust.js는 컴파일 타임 유형 검사를 추가하는 JavaScript의 유형이 지정된 상위 집합인 TypeScript를 사용합니다. 이를 통해 런타임까지 기다리지 않고 컴파일 시간에 오류를 포착할 수 있습니다. TypeScript를 설치하려면 터미널에서 다음 명령을 실행하십시오.

 npm install --save-dev @types/react npm install typescript --save-dev

이제 tsconfig.json 파일을 생성해야 합니다. 이 파일은 프로젝트를 실행하는 데 필요한 컴파일러 옵션을 지정합니다.

 npx tsc --init

TypeScript를 설정했으면 몇 가지 JavaScript 파일을 TypeScript 형식으로 변환해야 합니다. 새로운 faust-headless-demo 디렉토리를 포함해야 하는 로컬 사용자 디렉토리로 이동합니다.

faust-headless-demo 내부에서 페이지 디렉토리를 엽니다. 이제 _app.js 파일의 이름을 _app.tsx 로 바꾸고 내용을 다음으로 바꿀 수 있습니다.

 import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp;

다음으로 pages/index.js 의 이름을 pages/index.tsx 로 바꿉니다. 이제 Next.js 앱이 TypeScript에 대해 올바르게 구성되었습니다.

3단계: 재사용 가능한 React 컴포넌트 생성

이 시점에서 일부 더미 콘텐츠를 표시하여 프로젝트를 테스트할 수 있습니다. 로컬 페이지 디렉토리에서 posts.tsx 파일을 생성합니다:

이 파일에서 텍스트를 입력할 것입니다. 브라우저에 다음 콘텐츠가 표시되면 Next.js 애플리케이션이 올바르게 구성되었음을 알 수 있습니다.

 export default function PostsPage() { return <h1>The posts page</h1>; }

브라우저에서 "http://localhost:3000/posts"로 이동합니다. 이제 다음 더미 콘텐츠가 표시되어야 합니다.

설정을 확인했으면 다음 단계는 기본 React 구성 요소를 만드는 것입니다. 결국 이 구성 요소를 사용하여 모든 WordPress 게시물 목록을 표시합니다.

모든 React 구성 요소를 전용 디렉토리에 추가하는 것이 가장 좋습니다. 이를 염두에 두고 프로젝트의 루트로 이동하여 구성 요소 폴더를 만듭니다.

이 디렉토리 안에 post.tsx 파일을 생성합니다. React 컴포넌트는 component props를 통해 상위 컴포넌트로부터 데이터를 받을 수 있습니다. 이 예에서는 각 게시물의 제목과 콘텐츠를 게시물 구성 요소에 전달합니다.

TypeScript에서 전달하려는 데이터를 매핑하는 인터페이스를 만들어 이를 달성할 수 있습니다. posts.tsx 파일 안에 다음을 추가하세요.

 export interface PostProps { title: string; content: string; } export default function Post(props: PostProps) { const { title, content } = props; return ( <article> <h1>{title}</h1> <p>{content}</p> </article> ); }

이제 재사용 가능한 React 구성 요소가 있습니다. 다음 단계는 게시물 페이지에서 이 구성 요소를 사용하는 것입니다.

4단계: 게시물 목록 표시

시작하려면 pages/posts.tsx 파일을 엽니다. 이 시점에서 목록 형식으로 표시할 가짜 데이터를 제공하기만 하면 됩니다.

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod, lacus felis tincidunt ante, sit amet eleifend metus enim in orci. Vivamus tincidunt eleifend leo, at scelerisque lacus viverra ac.', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.', }, ]; export default function PostsPage() { return <h1>My posts page</h1>; }

게시물 배열을 반복하여 게시물 목록을 만들 수 있습니다. 이렇게 하려면 각 항목에 대해 Post 구성 요소를 렌더링해야 합니다.

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod....', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor...', }, ]; export default function PostsPage() { return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

변경 사항을 저장하고 이 파일을 닫습니다. 그런 다음 "http://localhost:3000/posts"로 이동합니다.

이제 이 탭에 가짜 게시물 목록이 표시됩니다. Faust.js를 WordPress 백엔드에 연결했으면 이 React 구성 요소를 사용하여 웹사이트의 실제 게시물 목록을 표시합니다.

5단계: Faust.js 프레임워크 구성

마침내 Faust.js 프레임워크를 설정할 준비가 되었습니다. 시작하려면 다음 명령을 실행하여 프로덕션 및 개발 종속성을 설치하십시오.

 npm install --save-prod @faustjs/core @faustjs/next npm install --save-dev @gqty/cli dotenv

그런 다음 프로젝트의 루트 디렉터리로 이동합니다. 이 폴더 안에 새 faust.config.js 파일을 만듭니다.

이 파일을 사용하여 Faust.js를 WordPress 백엔드에 연결합니다. 이제 다음 코드를 입력할 수 있습니다.

 import { config as coreConfig } from '@faustjs/core'; if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) { console.error( 'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env.local file?', ); } /** * @type {import("@faustjs/core").Config} */ export default coreConfig({ wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL, apiClientSecret: process.env.WP_HEADLESS_SECRET, });

이 디렉토리 안에 .env.local 파일도 생성해야 합니다. 이것은 모든 환경 변수를 보유합니다.

.env.local 내부에 다음 코드를 추가합니다. 귀하의 사이트를 귀하의 URL로 바꾸십시오 .

 NEXT_PUBLIC_WORDPRESS_URL=http://your-site.com WP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET

또한 YOUR_PLUGIN_SECRET 을 사이트의 헤드리스 비밀로 바꿔야 합니다. WordPress 대시보드에서 설정 > 헤드리스 로 이동하여 이 정보를 찾을 수 있습니다.

Faust.js는 이 헤드리스 비밀을 사용하여 WordPress에 대한 요청을 인증합니다. 이렇게 하면 프런트 엔드에서 초안 콘텐츠를 미리 볼 수 있습니다.

6단계: Faust.js용으로 GraphQL 클라이언트 구성

Faust.js는 GQty를 GraphQL 클라이언트로 사용합니다. GQty를 구성하려면 프로젝트의 루트 디렉터리에 gqty.config.js 파일을 만듭니다.

이제 편집을 위해 이 파일을 열 수 있습니다. gqty.config.js 내부에 다음을 복사하여 붙여넣습니다.

 require('dotenv').config(); /** * @type {import("@gqty/cli").GQtyConfig} */ const config = { react: false, scalarTypes: { DateTime: 'string' }, introspection: { endpoint: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql`, headers: {}, }, destination: './client/index.ts', subscriptions: false, javascriptOutput: false, }; console.log(`Using "${config.introspection.endpoint}" to generate schema...`); module.exports = config;

다음 단계는 웹사이트의 데이터를 쿼리하는 데 사용할 GQty 클라이언트를 만드는 것입니다. 프로젝트의 루트에서 새 클라이언트 디렉터리를 만듭니다. 이 폴더 안에 다음 코드가 포함된 index.ts 파일을 만듭니다.

 import type { IncomingMessage } from 'http'; import { getClient } from '@faustjs/next'; import { generatedSchema, scalarsEnumsHash, GeneratedSchema, SchemaObjectTypes, SchemaObjectTypesNames, } from './schema.generated'; export const client = getClient< GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes >({ schema: generatedSchema, scalarsEnumsHash, }); export function serverClient(req: IncomingMessage) { return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({ schema: generatedSchema, scalarsEnumsHash, context: req, }); } export * from './schema.generated';

이제 변경 사항을 저장하고 index.ts 파일을 닫을 수 있습니다. 이제 모든 부분이 준비되었으므로 GraphQL 스키마를 생성할 준비가 되었습니다.

7단계: 스크립트 생성 실행

다음 단계는 package.json 파일에 생성 스크립트를 추가하는 것입니다. 이 스크립트는 WordPress 사이트의 구조에 따라 필요한 스키마를 생성합니다.

이 스크립트를 추가하려면 프로젝트의 루트 폴더로 이동하여 package.json 파일을 엽니다. 이제 첫 번째 코드 블록에 생성 스크립트를 추가할 수 있습니다.

 { "name": "fause-headless-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", //Add the following// "generate": "gqty generate" },

이 스크립트를 실행하기 전에 웹사이트에 대한 공개 검사를 일시적으로 활성화해야 합니다. WordPress 대시보드에서 GraphQL > 설정 으로 이동합니다. 그런 다음 Enable Public Introspection 으로 스크롤하고 해당 확인란을 선택합니다.

변경 사항 저장 을 클릭합니다. 이제 터미널에 다음 명령을 입력하여 생성 스크립트를 실행할 수 있습니다.

 npm run generate

이 스크립트는 client/schema.generated.ts 파일을 생성합니다. 이 시점에서 WordPress 대시보드 내에서 Public Introspection을 비활성화할 수 있습니다.

8단계: FaustProvider 구성 요소 및 후크 정의

이제 내장된 <FaustProvider> 구성 요소를 사용하여 Next.js 애플리케이션을 래핑해야 합니다. 이 React Higher-Order Component는 Faust.js에 데이터를 가져오고 캐시하는 데 필요한 컨텍스트를 제공합니다.

이를 수행하려면 프로젝트의 pages/_app.tsx 파일을 엽니다. 그런 다음 해당 내용을 다음으로 바꿀 수 있습니다.

 import '../faust.config'; import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; import { FaustProvider } from '@faustjs/next'; import { client } from '../client'; function MyApp({ Component, pageProps }: AppProps) { return ( <FaustProvider client={client} pageProps={pageProps}> <Component {...pageProps} /> </FaustProvider> ); } export default MyApp;

이제 WordPress 백엔드에서 데이터를 쿼리할 준비가 되었습니다. 헤드리스 WordPress API에서 게시물 목록을 검색하는 표준 인터페이스를 제공하는 usePosts 후크를 사용할 것입니다.

pages/posts.tsx 디렉토리를 열고 상용구 Lorem Lipsum 코드를 모두 삭제하십시오. 그런 다음 usePosts 후크를 구현할 수 있습니다.

 import { client } from '../client'; import Post from '../components/post'; export default function PostsPage() { const { usePosts } = client; const posts = usePosts()?.nodes; return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

생성한 스키마 파일은 Post 유형을 내보냅니다. 즉, 이 유형을 사용하여 Post 구성 요소 소품을 정의할 수 있습니다. Post 소품을 수락하려면 components/post.tsx 파일을 열고 다음을 추가하세요.

 import { Post as PostType } from '../client'; export interface PostProps { post: PostType; } export default function Post(props: PostProps) { const { post } = props; return ( <article> <h1>{post.title()}</h1> <div dangerouslySetInnerHTML={{ __html: post.content() }} /> </article> ); }

렌더링된 콘텐츠 또는 원시 콘텐츠를 수신할지 여부를 지정할 수 있습니다. 위의 코드에서는 렌더링된 콘텐츠를 선택합니다.

9단계: Faust.js를 WordPress 웹사이트에 연결

마지막 단계는 데이터와 Post 구성 요소 간의 링크를 만드는 것입니다. 이렇게 하려면 posts.tsx 파일에 한 줄의 코드를 추가해야 합니다.

 … .... …. {posts.map((post) => ( //Add the following line// <Post key={post.id} post={post} /> ))} </div> ); }

이러한 변경을 수행한 후 브라우저에서 "http://localhost:3000/posts"를 로드합니다. 이제 WordPress 웹사이트의 모든 게시물 목록이 표시됩니다.

게시물이 표시되지 않으면 터미널을 닫아 실행 중인 프로세스를 종료하세요. 그런 다음 새 창을 열고 디렉토리 변경 명령을 사용하여 터미널이 로컬 Faust.js 프로젝트를 가리키도록 합니다(예: cd /Users/username/faust-headless-demo ). 그런 다음 개발 서버( npm run dev )를 시작하고 "http://localhost:3000/posts" 페이지를 새로고침해 보세요.

결론

많은 헤드리스 WordPress 개발자는 프레임워크를 사용하기로 선택합니다. 그러나 콘텐츠를 미리 볼 때가 되면 많은 프레임워크에서 강제로 외부 사이트에 로그인하거나 프레임 내에서 미리보기 페이지를 볼 수 있습니다.

Faust.js는 일관되고 원활한 미리보기 경험을 제공하기 시작했습니다. 이 프레임워크를 설정하면 친숙한 WordPress 워크플로를 사용하여 콘텐츠를 볼 수 있습니다. 또한 친숙한 React 및 Node.js 도구 세트에 액세스할 수 있습니다.

Faust.js 프레임워크에 대해 질문이 있습니까? 아래 의견 섹션에서 알려주십시오!