ACF + WPGraphQL로 첫 헤드리스 WordPress 프로젝트를 구축하는 방법

WordPress 개발과 관련하여 누구나 좋아하는 도구가 있으며 이러한 도구 없이 헤드리스 사이트를 구축한다는 아이디어는 어려울 수 있습니다. 운 좋게도 WordPress 개발자가 가장 좋아하는 두 가지 도구인 ACF 및 WPGraphQL은 헤드리스 개발에 발을 담그는 데 도움이 될 수 있습니다.

이 세션에서 WP 엔진 선임 개발자 옹호자 Jeff Everhart는 Atlas를 사용하여 단 몇 분 만에 데모 사이트를 구축하여 인프라의 안팎을 보여줍니다!

세션 슬라이드:

성적 증명서:

JEFF EVERHART: 모두 안녕하십니까? 제 이름은 여기 WP Engine의 선임 개발자 지지자 Jeff Everhart입니다. ACF 및 WP GraphQL을 사용하여 첫 번째 헤드리스 WordPress 프로젝트를 구축하는 방법에 대한 오늘 강연에 참여해 주셔서 감사합니다. 건물을 짓기 전에 항상 헤드리스 WordPress가 무엇인지에 대한 컨텍스트를 제공하는 것을 좋아합니다. 헤드리스가 틈새 용어가 아닌 주류가 되어가는 것 같아서 설명을 짧게 하려고 합니다.

Headless WordPress의 핵심은 API를 통해 WordPress CMS를 사용하여 다른 유형의 애플리케이션에 전원을 공급하는 것입니다. 이 슬라이드의 다이어그램을 보면 사용자가 site.com/page를 요청하면 WordPress가 해당 요청을 처리하는 대신 JavaScript 애플리케이션이 해당 경로에 응답합니다. 경로를 살펴보고 WordPress 또는 기타 소스에서 필요한 데이터를 결정하고 해당 API를 호출하고 사용자에게 응답을 생성합니다.

Node.js 런타임 슬롯에 있는 것은 실제로 다양한 유형의 애플리케이션이나 클라이언트가 될 수 있다는 점에 유의하는 것이 중요합니다. 우리는 가장 널리 사용되는 모든 프레임워크로 구축된 모바일 앱 또는 웹사이트의 다양한 예에서 이 패턴을 성공적으로 사용하는 것을 보았습니다. 이제 헤드리스 WordPress가 무엇인지 잘 이해했으므로 오늘 프로젝트에 사용할 기술 스택을 살펴보겠습니다.

맨 뒤 계층에서 WP GraphQL을 API로 사용합니다. WP GraphQL은 WordPress 백엔드를 강력한 GraphQL API로 전환합니다. 기본 WordPress 및 핵심 REST API가 수행하는 것과 동일한 모든 역할 및 기능 보안 검사를 시행합니다. WP GraphQL은 선언적 쿼리 언어를 사용하여 해당 콘텐츠 기술 전체에서 다양한 콘텐츠 유형을 쿼리할 수 있기 때문에 헤드리스 애플리케이션 개발에 탁월한 선택입니다. 따라서 게시물, 카테고리가 있는 페이지를 모두 동일한 요청으로 가져옵니다.

이제 WordPress CMS를 사용하여 좀 더 복잡한 데이터를 구조화하고 모델링하는 방법을 살펴보겠습니다. 헤드리스 프로젝트에 접근하는 많은 개발자는 다른 데이터를 모델링하고 저장해야 합니다. WordPress의 일반적인 게시물 또는 페이지를 넘어 확장됩니다. ACF 또는 고급 사용자 정의 필드는 이러한 사용자 정의 필드를 모델링하기 위한 훌륭한 도구입니다. 향후 릴리스에서는 이 플러그인의 무료 버전에서 UI에 직접 게시물 유형 및 분류를 등록할 수 있도록 하여 더욱 강력해질 것입니다.

REST API를 통해 모든 데이터를 쉽게 사용할 수 있지만 해당 필드 데이터 중 일부를 GraphQL 스키마에 추가하려면 WP GraphQL 확장을 설치해야 합니다. 개인적으로 이 플러그인이 헤드리스 개발자를 위해 더욱 강력해지면서 진화하는 것을 보게 되어 정말 기쁩니다.

이제 복잡한 데이터를 모델링하고 WP GraphQL을 통해 쿼리할 수 있으므로 사용자를 위한 최신 웹 경험을 생성하는 동시에 WordPress를 이미 알고 사랑하는 콘텐츠 편집자를 지원하는 방법이 필요합니다. 여기에서 Faust가 등장합니다. Faust는 WordPress 플러그인과 Next.js 기반 JavaScript 프레임워크로 구성된 두 부분으로 구성된 프레임워크입니다. 헤드리스 WordPress 사이트를 쉽고 직관적으로 구축하기 위해 함께 작동합니다.

게시물 미리보기 및 즉시 인증과 같은 기능에 대한 지원을 추가하고 최신 JavaScript에서 재구상된 WP 템플릿 계층 구조 경험을 활용할 수 있습니다. Faust.js는 매우 확장 가능한 플랫폼이 되는 것을 목표로 하며 특정 사용 사례를 지원하는 경험을 사용자 지정하고 생성하는 데 사용할 수 있는 플러그인 시스템 및 관리 표시줄과 함께 제공됩니다.

마지막으로 중요한 것은 이러한 도구를 로컬 및 프로덕션 환경에서 사용할 수 있는 몇 가지 방법이 필요하다는 것입니다. 로컬 및 WP 마이그레이션을 사용하여 이 프로젝트에 필요한 모든 WordPress 리소스를 시작하기 위해 로컬로 끌어다 놓을 수 있는 단일 zip 파일로 가져왔습니다. 사이트 구축이 완료되면 작업을 Atlas 플랫폼으로 푸시할 수 있습니다. Atlas WP 엔진의 올인원 헤드리스 호스팅 솔루션은 WordPress 백엔드와 Node.js 컨테이너를 결합하여 하나의 원활한 대시보드를 통해 함께 작동하도록 조정되었습니다.

이제 오늘 프레젠테이션에서 사용할 모든 도구를 잘 이해했으므로 바로 시작하겠습니다. 브라우저에서 데모 코드에 액세스하려면 이 슬라이드의 URL을 여십시오. 이 경험을 최대한 쉽게 따라할 수 있도록 노력했지만 앞으로 25분 동안 많은 내용을 다룰 예정이므로 지금 시청하고 이 GitHub 리포지토리와 나중에 이 세션을 녹음하여 회의 후에도 계속 작업할 수 있습니다. 디코딩의 나머지 부분이 자동차 쇼인 경우 이 세션은 엔진을 구축하는 것입니다. 말장난 완전히 의도된.

이제 GitHub 리포지토리가 열렸으므로 시작하겠습니다. 내가 권장하는 첫 번째 작업은 자신의 계정에서 이 리포지토리를 포크하는 것입니다. 이 리포지토리에 포함된 내용을 살펴보면 이 프레젠테이션에서 수행할 모든 작업에 대한 readme의 단계별 지침과 샘플 코드를 볼 수 있습니다. 실제로 이 리포지토리에서 프로젝트로 직접 많은 복사 및 붙여넣기를 수행할 것입니다. 이것을 로컬로 복제하려면 계속해서 터미널 내부에서 Git 복제 명령을 실행하십시오.

다운로드하는 데 1초밖에 걸리지 않습니다. 그런 다음 프로젝트를 다운로드했으면 계속 진행하여 디렉터리를 해당 프로젝트 디렉터리로 변경합니다. 여기에서 VS Code에서 이 프로젝트를 여는 명령을 실행하겠지만 원하는 코드 편집기를 자유롭게 사용할 수 있습니다. VS Code에는 이미 통합 터미널이 있으므로 이를 정리한 다음 iTerm을 종료하면 됩니다. 이제 WordPress 로컬 사이트를 배치하는 것으로 전환할 수 있습니다. 이를 위해 Finder에서 이 프로젝트를 연 다음 준비한 헤드리스 WP 데모 zip 파일을 찾습니다.

해당 zip 파일을 로컬 개발 환경으로 직접 끌어다 놓으면 로컬에서 데모 WordPress 사이트의 압축을 풀고 부트스트랩하는 프로세스를 시작합니다. 우리는 기본값을 거의 고수할 수 있으며 로컬은 새로운 WordPress 사이트를 만드는 데 몇 분 밖에 걸리지 않습니다. 이제 이것은 WP 마이그레이션 프로의 훌륭한 기능으로 모든 사이트를 zip으로 내보내고 로컬로 직접 드래그 앤 드롭하여 플랫폼에 관계없이 프로덕션 사이트를 내 로컬 컴퓨터로 매우 빠르게 가져올 수 있습니다.

설치가 완료되면 이 SSL 인증서를 신뢰하고 WP Admin에서 이 프로젝트를 열 수 있습니다. 거기에서 이미 실행 중이고 실제로 다른 작업을 수행할 필요가 없으므로 로컬을 최소화합니다. 여기에서 이 데모 사이트에 대해 이미 생성한 관리자 사용자 이름과 비밀번호를 찾을 수 있는 저장소를 열 것입니다. 해당 자격 증명을 사용하여 WP 관리 대시보드에 로그인할 수 있어야 합니다. 여기에서 이 로컬 WordPress 설치 위치에 도달하는 데 1초밖에 걸리지 않습니다.

가장 먼저 할 일은 이 WordPress 사이트와 함께 설치된 플러그인을 살펴보는 것입니다. 데이터 모델링을 위한 고급 사용자 정의 필드와 같은 것을 볼 수 있습니다. 일부 헤드리스 기능, WP GraphQL이 사이트의 API 역할을 한 다음 ACF 확장을 위한 WP GraphQL을 사용하여 일부 ACF 필드 그룹을 표시하는 파울이 있습니다. 이제 게시물도 살펴보겠습니다. 이 프로젝트 내부에 미리 채워진 다양한 데모 게시물을 모두 보면 다양한 범주의 여러 게시물이 있음을 알 수 있습니다.

각 게시물 내부의 콘텐츠를 살펴보면 본문 콘텐츠, 일부 이미지, 추천 이미지 및 이미 만들고 미리 채워진 일부 ACF 필드 그룹이 있음을 알 수 있습니다. 필드 그룹에 대해 자세히 살펴보겠습니다. ACF 메뉴를 열면 food resource와 sweet mixtape이라는 두 개의 필드 그룹이 생성된 것을 볼 수 있습니다. 먼저 식량자원을 살펴보자.

이것은 두 개의 개별 필드(텍스트 및 URL)가 있는 정말 기본적인 필드 그룹입니다. 이러한 각 항목에 대해 GraphQL에 표시되도록 GraphQL에 표시 옵션을 선택했습니다. 그런 다음 필드 그룹 수준에서도 해당 옵션을 확인했습니다. 또한 이러한 게시물을 렌더링할 시기를 결정하는 조건부 논리가 있습니다. 즉, 게시물 범주가 음식과 같은지 여부입니다. 그리고 달콤한 믹스테이프는 어떤 모습일지 함께 확인해 볼까요?

우리는 이것이 식량 자원과 매우 유사해 보이고 두 개의 다른 분야가 있음을 보게 될 것입니다. 각각에는 GraphQL에 표시 옵션이 선택되어 있을 뿐만 아니라 필드 그룹 수준에서 추가로 선택되어 있습니다. 우리는 WP GraphQL 확장이 우리에게 필요하지 않을 수 있는 몇 가지 다른 설정이 있음을 알 수 있습니다. 또한 게시물 카테고리에 따라 조건부로 표시하고 있음을 알 수 있습니다.

이제 WP GraphQL과 도구 측면에서 우리에게 무엇을 제공하는지 살펴보겠습니다. GraphQL 메뉴를 열면 그래픽 IDE 안에 들어갑니다. 이제 이것은 WP GraphQL을 사용하여 쿼리를 생성할 수 있는 대화형 개발 환경입니다. 예를 들어 범주가 있는 처음 10개의 게시물을 원한다고 지정하고 여기에 추가 ACF 필드도 포함할 수 있습니다. 실행 버튼을 클릭하면 해당 쿼리의 데이터와 일치하는 WordPress 사이트에서 라이브 데이터를 다시 가져옵니다.

원하는 경우 쿼리 작성기 창을 열고 쿼리의 측면을 시각적으로 구성할 수 있습니다. 따라서 이것은 특정 WordPress 개체에 어떤 특정 필드나 데이터가 있는지 확실하지 않은 경우 매우 편리한 도구입니다. 쿼리 작성기를 사용하여 이러한 쿼리를 실시간으로 탐색하고 실행할 수 있습니다. 이제 Faust 설정 메뉴를 열어 Faust 구성으로 이동하겠습니다. 소개에서 말했듯이 Faust는 실제로 WordPress 플러그인과 프런트 엔드 코드 베이스로 구성된 두 부분으로 구성된 프레임워크입니다.

따라서 WordPress 플러그인 설정 메뉴로 돌아가면 프런트 엔드 사이트의 주소를 가리키는 프런트 엔드 사이트 URL에 대해 이 옵션을 설정한 것을 볼 수 있습니다. 비밀 키 옵션 바로 아래에서 재생성을 클릭하여 데모 프로젝트에 사용할 수 있는 고유한 키를 생성합니다. 여기에서 실제로 JavaScript 코드 베이스로 돌아가서 이 명령을 실행하여 샘플 환경 변수 파일을 사이트에서 사용할 수 있는 파일로 복사하겠습니다.

실행한 후 명령으로 .env.localfile을 열고 몇 가지 사항을 변경합니다. 첫 번째는 다음 공개 WordPress URL 옵션을 로컬 사이트의 위치로 대체한다는 것입니다. 그래서 ACF.WPEngine.local. 그런 다음 해당 비밀 키 값을 가져와 Faust 비밀 키에 사용합니다. 주석도 제거하고 마지막 환경 변수는 테스트 및 로컬 개발에 유용하므로 로컬 개발 환경에 연결하는 동안 발생할 수 있는 SSL 문제를 원활하게 해결할 수 있습니다.

여기에서 NPM Install을 실행하여 프로젝트의 모든 종속성을 설치한 다음 완료되면 NPM Run Dev를 실행하여 프로젝트를 시작할 수 있습니다. 컴파일하는 데 1초밖에 걸리지 않지만 일단 컴파일되면 브라우저에서 localhost:3000을 열 수 있고 작동 중인 Faust 사이트를 볼 수 있습니다.

일단 렌더링되면 Faust가 이미 우리를 위해 약간의 마법을 처리하고 있음을 볼 수 있습니다. 오른쪽 상단에 있는 메뉴를 보면 WordPress 백엔드에서 정의한 메뉴에서 이미 페이지와 콘텐츠를 가져오고 있음을 알 수 있습니다. WordPress 관리자로 다시 이동하면 다음을 볼 수 있습니다. 이 연결이 어떻게 작동하는지 좀 더 자세히 살펴보겠습니다.

Faust 플러그인은 프런트엔드 URL의 주소를 알고 있기 때문에 브라우저에서 열 때 프런트엔드 사이트 URL에서 열리도록 미리보기 링크와 같은 많은 링크를 다시 작성합니다. 귀하의 콘텐츠가 프런트 엔드에서 어떻게 보일지 실시간으로 미리 볼 수 있습니다.

이제 Faust JavaScript 프로젝트의 구조에 대해 자세히 살펴보겠습니다. Next.js 작업에 익숙하다면 페이지의 디렉토리를 사용하여 경로를 구현하는 페이지 구성 요소를 만들었을 것입니다. Faust에서 여전히 이 작업을 수행할 수 있지만 WordPress 노드라는 포괄 경로를 제공하여 WordPress가 관리하는 URI를 가져오고 이를 특정 콘텐츠로 해결할 수 있도록 함으로써 이 개념을 기반으로 합니다.

그런 다음 해당 콘텐츠 항목에 대한 추가 데이터를 가져와 구성 요소를 통해 전달하여 개별 콘텐츠 중 하나를 WP 템플릿 폴더의 특정 템플릿으로 해결할 수 있습니다. 이것은 템플릿 계층 구조 개념 및 기존 WordPress 테마 및 많은 명명 규칙과 매우 유사합니다. 예를 들어 frontpage.js는 우리 웹사이트의 첫 페이지이고 page.js는 페이지 콘텐츠 유형의 렌더링을 담당합니다. 그리고 single.js는 단일 게시물을 렌더링하기 위해 존재합니다.

이제 시작하여 frontpage.js를 조금 더 동적으로 만들어 보겠습니다. 좋아요 . 따라서 시작하려면 계속해서 front page.js 파일을 열고 작업할 공간을 조금 더 제공합니다. 따라서 이 파일의 내용을 보면 세 가지 주요 부분이 있음을 알 수 있습니다. 우리가 렌더링하는 구성 요소 자체, 구성 요소에 연결되는 쿼리 속성, 구성 요소를 렌더링할 때마다 실행되는 쿼리 속성, 그리고 맨 아래에서 전달할 수 있는 몇 가지 변수가 있습니다.

보시다시피 이것을 사용하는 두 가지 주요 방법이 있습니다. 구성 요소 내부에서 use 쿼리 후크를 사용하거나 구성 요소 자체에 소품으로 전달될 수 있으며 나중에 예제에서 확인할 수 있습니다. 이제 저장소로 돌아가서 2.1단계부터 시작하여 frontpage.js에 대한 쿼리를 업데이트해 보겠습니다. 그래서 우리는 그것을 복사한 다음 그래픽 IDE로 돌아가서 잠시 거기에서 놀 것입니다. 따라서 클립보드에 있는 이 쿼리는 처음 10개의 게시물을 가져오고 각 게시물과 연결된 몇 가지 데이터를 가져와야 합니다.

여기를 클릭하고 실행하면 모두 제대로 작동하는 것을 볼 수 있습니다. 따라서 계속해서 이를 구성 요소 쿼리 속성에 추가하려고 합니다. 그래서 우리는 그것을 할 수 있는 좋은 장소를 찾아서 거기에 붙여넣고 약간의 재포맷을 할 것입니다. 이것이 하는 일은 쿼리 자체에 쿼리의 개별 부분을 추가하는 것입니다. 따라서 우리는 여전히 해당 쿼리의 결과를 나머지 구성 요소에서 사용할 수 있도록 해야 하므로 계속해서 해당 게시물 결과를 작업할 수 있는 변수로 추출하는 추가 행을 추가합니다.

이제 이 홈페이지를 동적으로 만드는 다음 단계는 실제로 해당 게시물 발췌를 렌더링하는 구성 요소를 만드는 것입니다. 그렇게 해서 구성 요소 폴더에 두 개의 파일을 만들고 여기에서 언급하겠습니다. 계속해서 post excerpt 폴더 안에 postexcerpt.js를 만들겠습니다. 이 Faust.js 시작하기 프로젝트의 일부인 기존 구성 요소의 구조를 복제하는 것뿐입니다. 여기에서 원하는 것은 무엇이든 자유롭게 할 수 있으며, 저는 이 시작하기의 일부로 이미 나와 있는 프레임워크를 따르고 있습니다.

따라서 세 개의 파일이 모두 있으면 해당 게시물을 렌더링하기 위해 몇 가지 항목을 추가하기 시작합니다. 그래서 우리가 할 첫 번째 일은 포스트 발췌 구성 요소에 일부 콘텐츠를 넣는 것입니다. 저장소에서 복사하여 붙여넣으면 해당 module.css 파일을 가져오는 것을 볼 수 있습니다. 그리고 게시물인 하나의 소품을 맛보는 컴포넌트인 게시물 발췌라는 함수가 있습니다. 그런 다음 해당 게시물 URI로 직접 이동하는 링크가 있는 섹션을 렌더링하고 제목을 렌더링합니다. 그런 다음 아래에는 우리가 렌더링하고 있는 범주 타일이 있고 HTML에서 위험하게 설정된 것을 사용하여 게시물 발췌에 대한 HTML 콘텐츠를 설정합니다.

이제 모든 것이 훌륭하고 저장되면 저장하겠습니다. 하지만 여기에 와서 이 추가 범위 스타일을 구성 요소에 추가하여 범주에 대한 범위 태그의 스타일을 지정합니다. 그런 다음 기본 내보내기에서 명명된 내보내기로 가져오기 위해 index.js 파일 내부에서 일부 가져오기 내보내기를 수행하고 모든 항목을 저장합니다. 그런 다음 이를 다른 용도로 사용할 수 있도록 하는 마지막 단계는 구성 요소 폴더의 index.js 파일에 내보내기 행을 하나 더 추가하는 것입니다. 이제 이 작업을 수행했으므로 홈 페이지인 frontpage.js로 돌아가면 기존 가져오기 문에 추가 가져오기를 추가하여 게시물 발췌문을 사용할 수 있습니다.

이제 우리는 그것을 구현할 장소를 찾고 싶을 것입니다. 아래로 내려와 메인 요소 내부를 보면 영웅 바로 아래에 무언가가 있는 것을 볼 수 있습니다. 우리가 할 일은 리포지토리의 일부 코드를 복사하여 붙여넣고 게시물 발췌문을 사용하여 해당 메인 내부에 있는 내용을 덮어씁니다. 그리고 우리는 약간의 형식을 다시 지정하여 주변의 일부 항목을 매끄럽게 처리할 것입니다. 하지만 여기에서 우리가 하고 있는 작업이 해당 컨테이너 내부에 있음을 알 수 있습니다. 쿼리 결과를 반환한 다음 게시물을 전달하고 키를 제공하는 게시물 발췌 구성 요소를 반환합니다.

그런 다음 모든 것을 저장하고 브라우저에서 렌더링하고 새로고침하면 멋진 동적 홈 페이지가 있는 것을 볼 수 있습니다. 예, 각 제목에는 개별 카테고리 타일과 마찬가지로 클릭 가능한 링크가 있습니다. 클릭해 보면 Faust에 이미 있는 템플릿의 이점을 통해 ACF를 사용하여 만든 리소스 그룹 중 일부가 누락되었지만 모든 게시물 항목이 이미 렌더링되고 있음을 알 수 있습니다. 따라서 두 번째 게시물을 클릭하면 미리 만들어진 모든 범주 링크뿐만 아니라 훌륭하게 렌더링되는 것을 볼 수 있습니다. 해당 범주 JS 템플릿을 렌더링할 때 Faust에 의존하기 위해 해당 범주 URI를 사용하고 있습니다. .

이제 동적 홈 페이지가 있으므로 single.js 템플릿에서 렌더링할 ACF 필드를 가져오는 작업으로 이동하겠습니다. 계속해서 코드 편집기를 정리한 다음 single.js 파일을 열고 그 안에 무엇이 있는지 살펴볼 수 있습니다. 우리는 그 최상위 수준에서 우리가 실제로 소품을 취하는 이 구성 요소 함수를 내보내고 있다는 것과 동적 GraphQL 쿼리가 있는 component.query 속성이 있다는 것을 알고 있습니다.

그리고 우리가 궁극적으로 하고자 하는 것은 게시물 콘텐츠 하단에 다양한 게시물 리소스 중 일부를 표시하는 것입니다. 그래서 저장소로 돌아가서 3.1단계로 스크롤하여 단일 게시물 쿼리를 업데이트하고 살펴보겠습니다. 이전 단계. 해당 쿼리를 가져와 그래픽에 복사하여 붙여넣는 경우 계속해서 게시물의 데이터베이스 ID를 하드 코딩하고 필요하지 않은 몇 가지 다른 항목(예: 미리 보기 및 기타 조각)을 제거합니다. .

계속해서 실행하면 예상했던 내용이 포함된 일부 데이터가 반환되는 것을 확인할 수 있습니다. 내용, 저자를 되찾고 중요한 것은 해당 필드 그룹과 해당 데이터를 모두 얻습니다. 계속해서 해당 쿼리를 복사하고 다시 single.js로 돌아갑니다. 여기에서 쿼리의 해당 부분을 클립보드에서 가져온 항목으로 대체하겠습니다. 계속해서 저장할 수 있습니다. 원하는 경우 다시 포맷할 수 있지만 이것은 공백에 구애받지 않으므로 대부분 괜찮아 보입니다.

그래서 거기에서 우리는 마지막 단계에서 우리가 쿼리의 일부로 만들었던 것과 같은 일을 하기를 원할 것입니다. 이제 구성 요소 내에서 이러한 변수를 사용할 수 있는지 확인하려고 합니다. 그래서 우리는 그것들을 그 구조화 진술에 추가할 것입니다. 그리고 추가로 우리 게시물에 대한 몇 가지 다른 범주가 있기 때문에 우리는 음식 자원을 표시할지 달콤한 믹스테이프를 표시할지 여부를 결정하는 데 도움이 되는 몇 가지 부울 항목을 만들고 싶습니다. 여기에서 볼 수 있듯이 둘 다 반환되는 항목이 무엇이든 상관없이 달콤한 믹스테이프 필드에 대해 찾을 것이 없으면 null로 반환되기 때문입니다. 그래서 거기에서 몇 가지 조건부 검사를 수행하고 싶으므로 이 두 줄의 코드를 파일에 추가하겠습니다.

이것이 기본적으로 하는 일은 템플릿을 조건부로 렌더링하기 위해 아래에서 사용할 수 있는 몇 가지 부울 변수를 생성하는 것입니다. 여기에서 우리는 각 범주에 대한 노드를 살펴본 다음 기본적으로 노드를 필터링하여 노드에 음식이나 음악이 있는지 여부를 결정한 다음 길이를 확인합니다. 이 유형의 부울 변수를 구현할 수 있는 방법은 많을 것이므로 더 깔끔한 방법이 있다면 자유롭게 변경할 수 있지만 여기서 우리의 목적을 위해서는 그것이 잘 작동할 것이라고 생각합니다.

이제 다음 단계는 이전 단계에서와 같이 몇 가지 추가 구성 요소를 실제로 만들고자 하는 것입니다. 계속해서 내 구성 요소 파일 내에서 식량 자원 구성 요소를 생성하겠습니다. 폴더를 만들고 그 안에 food resources.js 파일을 만들고, index.js 파일과 CSS 모듈 파일을 함께 만들겠습니다. 이제 SCSS 모듈 파일은 특정 구성 요소에 대한 스타일 범위를 지정할 수 있기 때문에 정말 유용합니다. 따라서 펑키한 구문처럼 느껴지지만 결국 많은 클래스와 항목을 작성할 필요가 없기 때문에 정말 깨끗한 결과입니다.

따라서 리포지토리의 구성 요소 코드를 해당 파일에 직접 복사하여 붙여넣기 시작하겠습니다. 두 개의 소품 레시피 이름과 레시피 링크를 사용하는 음식 리소스 기능이 있는 것을 볼 수 있습니다. 그런 다음 브리또 이모지를 사용하여 나이보다 적은 항목을 렌더링하고 있습니다. 또한 일부 SCC 파일 스타일을 이 특정 폴더에 복사하여 붙여넣은 다음 index.js 구성 요소 폴더에서 내보내도록 합니다. 그리고 이전 예에서와 마찬가지로 구성 요소 폴더의 index.js에서도 이것을 내보내고 싶을 것입니다. 그러면 해당 구성 요소에서 직접 본 것처럼 가져오기에 정말 좋은 그룹이 있을 수 있습니다. 이러한 다른 파일 중 일부의 다른 위치에 있는 폴더입니다.

따라서 추가한 후에는 음악 리소스 구성 요소에 주의를 돌리고 동일한 작업을 수행합니다. 계속해서 동일한 파일 구조를 만들 것입니다. 따라서 음악 리소스 폴더와 그 안에 musicresources.js 파일이 있습니다. 그런 다음 index.js 파일을 만들어 내보낸 다음 해당 범위 스타일에 대한 musicresources.module.scss 파일도 만듭니다.

따라서 모든 항목을 확보한 후에는 식량 자원에 대해 수행한 것과 동일한 작업을 수행하고 저장소에서 이 코드 중 일부를 복사하여 붙여넣기만 하면 됩니다. 이 구성 요소가 거의 동일하게 보이는 것을 볼 수 있습니다. 우리는 음악 자원을 가지고 있습니다. 여기에는 실제로 두 개가 아닌 세 개의 소품이 있지만 이 필드 그룹에는 세 개의 필드가 있지만 styles.component 규칙은 동일합니다. 그리고 콘텐츠가 다르기 때문에 약간 다른 렌더링을 수행할 뿐입니다.

그래서 거기에서 SCSS 코드를 추가하고 구성 요소 폴더 index.js에서 내보낸 다음 여기 폴더로 가져옵니다. 실제로 만든 것 같습니다. 이름을 정말 빠르게 바꾸고 index.js와 구성 요소가 음악 리소스를 찾을 수 있도록 모든 이름 지정이 좋아 보이는지 확인하면 됩니다. 이제 single.js 파일에서 해당 구성 요소를 실제로 구현할 준비가 되었기 때문에 계속 진행하여 이러한 불필요한 탭을 모두 닫습니다.

이를 위해 이미 자동으로 인식하고 있는 기존 import 문에 이 두 구성 요소를 추가하기만 하면 됩니다. 그렇게 하기 좋은 위치를 찾을 것입니다. 그래서 우리는 이 콘텐츠 래퍼 컴포넌트를 여기 아래에 가지고 있습니다. 그래서 바로 지금 콘텐츠를 전달하고 있지만 실제로는 선택적으로 자식도 허용합니다. 따라서 콘텐츠를 전달할 수 있을 뿐만 아니라 일부 하위 구성 요소를 해당 콘텐츠 래퍼에 직접 전달할 수도 있으므로 이미 가지고 있는 멋진 수평 공간에 콘텐츠가 표시되고 모든 것이 정렬됩니다.

이것이 우리가 할 일입니다. 그런 다음 해당 코드를 거기에 복사하여 붙여넣고 형식을 다시 지정하고 이 특정 예에서 일어나는 일에 대해 이야기할 것입니다. 콘텐츠 래퍼 구성 요소 바로 내부에서 해당 리소스 구성 요소를 조건부로 렌더링하기 위해 음식과 음악 부울 변수를 사용하고 있습니다. 따라서 음식이 사실이고 이 게시물이 음식 범주에 있는 경우 이를 렌더링합니다. 그리고 그것이 음악이라면, 우리는 같은 일을 할 것입니다. 그리고 거기에서 우리가 그것을 렌더링하는 데 필요한 모든 다른 소품을 전달하고 있음을 볼 수 있습니다.

그리고 돌아와서 single.js 템플릿 페이지 중 하나를 새로고침하면 음식 리소스가 예상한 대로 렌더링되고 WP Admin 또는 집으로 돌아오면 해당 링크가 적절하게 작동함을 알 수 있습니다. 페이지. 하나와 음식 카테고리 또는 음악을 찾으면 Kinfolk Synth DIY를 열고 음악 리소스 구성 요소가 어떻게 보이는지 볼 수 있습니다. 실제로 두 범주 모두에 있는 항목을 찾으면 실제로 하단에서 예상한 대로 두 구성 요소를 모두 렌더링하는 것을 볼 수 있습니다.

좋아요. 이제 사이트를 원하는 방식으로 만들었으므로 이 사이트를 배포하는 방법에 대해 이야기해 보겠습니다. 이제 우리를 위해 생성된 GitHub 리포지토리 섹션이 있고 실제로 완료 분기에 완전히 별개의 배포된 분기를 만들었습니다. 이제 Git 체크아웃 실행이 완료되었습니다. 또한 해당 분기를 WP Engine의 헤드리스 WordPress 호스팅 솔루션인 Atlas에 직접 배포할 수도 있습니다.

이렇게 하면 WordPress 설치와 Node.js 컨테이너가 모두 제공되며 Atlas 랜딩 페이지에서 이 버튼을 클릭하기만 하면 무료 샌드박스 계정에 가입할 수 있습니다. 정말 빠른 포럼으로 이동하면 보시다시피 가격이 0입니다. 사기 방지 목적으로만 사용하는 신용 ​​카드를 입력해야 할 수도 있지만 무료 계정을 가지고 이를 테스트하고 원하는 대로 헤드리스 학습을 할 수 있습니다. 계속해서 WP 엔진 대시보드를 열어 이 사이트를 Atlas에 배포하기 시작하겠습니다.

실제로 가장 먼저 할 일은 사이트 목록을 여는 것입니다. 그리고 프로덕션 WordPress 사이트를 열 것입니다. 실제로 여기 보시는 ACF 헤드리스 사이트는 새 창에서 WP Admin을 열게 되는데 여러분 모두가 로컬에서 사용하는 zip 파일의 상위 사이트입니다. 그래서 저는 WP 내보내기를 사용하여 zip 파일을 만들었고 실제로 프로덕션 배포에 사용할 것입니다.

여기에서 Atlas 탭을 클릭한 다음 Create App을 클릭합니다. 이 옵션이 제공됩니다. Pull From Repo를 선택한 다음 계속을 클릭합니다. GitHub에서 인증하지 않은 경우 여기에서 인증을 받을 수 있지만 저는 이미 인증을 받았으므로 계속 진행하여 내 리포지토리를 선택할 수 있습니다. 계속해서 이 프로젝트에 사용할 리포지토리를 선택하고 계속을 클릭한 다음 US Central에 내 앱을 배포하겠습니다.

여기에서 분기를 선택할 수 있으며 앞서 말했듯이 Finished를 사용하겠습니다. 우리가 사용하지 않는 모노 리포지토리를 사용하는 경우에도 옵션이 있으며 I Have My WordPress Installation 및 Search For My ACF Headless Site를 선택한 상태로 두겠습니다. 이제 여기서 실제로 .env 파일을 사용하는 대신 내 파일 프로젝트에서 두 개의 환경 변수를 복사하려고 합니다.

따라서 첫 번째는 다음 공개 WordPress URL입니다. 이는 로컬 프로젝트에서 설정한 것과 동일한 환경 변수이며 프로덕션 WordPress 설치에 대한 링크를 거기에 복사하겠습니다. 그런 다음 다른 환경 변수를 추가하고 이것은 Faust 비밀 키에 대한 것입니다. 계속해서 Faust 설정 메뉴에서 복사하고 거기에 팝하고 해당 키를 Faust Secret Key로 설정합니다.

완료되면 앱 만들기를 클릭하면 Atlas가 내 앱 빌드 및 배포 프로세스를 시작합니다. Atlas 빌드 프로세스 중에 NPM 설치 및 사용 중인 프레임워크에 대한 NPM 빌드 명령을 실행합니다. 그런 다음 해당 코드가 모두 빌드되면 해당 노드 컨테이너를 네트워크에 배포합니다. 모든 작업이 1초 동안 진행되면 성공 메시지를 받은 다음 제공된 URL을 클릭하고 실제로 사이트를 실시간으로 볼 수 있습니다.

따라서 성공 메시지를 받은 다음 다른 탭에서 이 URL을 열 수 있습니다. 여기에서 우리 사이트가 로컬에서와 똑같이 생겼고 모든 올바른 데이터와 올바른 이미지를 가져오고 심지어 모든 ACF 콘텐츠를 빨아들이고 있음을 볼 수 있습니다. 많은 게시물이 정말 멋져 보이고 Atlas에서 매우 뛰어난 성능을 발휘합니다. 저는 실제로 여기에서 정말 큰 이미지를 사용하고 있습니다. 따라서 약간의 속도 저하가 보인다면 확실히 제 선택 때문입니다.

Atlas 플랫폼은 최신 JavaScript 개발자가 높이 평가할 기능으로 가득 차 있습니다. 슬프게도 이 프리젠테이션에서는 이들을 모두 자세히 살펴보기에는 시간이 충분하지 않습니다.

그러나 Atlas는 헤드리스 에코시스템의 프런트엔드 및 백엔드 부분 모두에서 중요한 세부 정보를 하나의 편리한 대시보드로 통합하여 개별 빌드 로그 및 빌드 출력을 보고, 배포를 검사하고, 특정 빌드에 대해 생성된 모든 PR에 대한 추가 환경을 만들 수 있는 미리 보기 환경과 같이 활성화할 수 있는 추가 설정 또는 기능에 액세스할 수 있습니다. WordPress를 변경할 때 앱 또는 CDN.

Atlas 플랫폼을 사용하면 이 모든 것이 가능해지며 헤드리스 WordPress로 빌드를 시작하기 위한 장벽이 실제로 낮아집니다.

우와. 25분 안에 다루어야 할 내용이 많다고 말씀드린 것처럼 축하합니다. 프레젠테이션이 끝난 후에도 계속 연습해 주시고 데모 리소스를 시작하는 데 질문이 있으면 저에게 연락하십시오. 헤드리스에 대해 자세히 알아보고 싶지만 이를 수행할 공간이 필요한 경우 무료 Atlas Sandbox 계정에 가입하세요. 오늘 수행한 것처럼 고유한 코드 리포지토리를 배포하는 것 외에도 헤드리스 프로젝트가 완료되면 어떤 모습인지 확인하는 데 도움이 되는 클릭 한 번으로 프로젝트 스택인 미리 만들어진 청사진을 시작할 수 있습니다.

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.