DE{CODE}: Atlas의 새로운 기능

WP Engine의 Atlas 헤드리스 개발 도구에 대한 업데이트는 고객의 가장 까다로운 요구 사항을 제공하는 데 도움이 될 것입니다. 무료 Sandbox 계정을 사용하여 이 데모는 헤드리스 사이트에 이러한 새로운 기능을 추가하는 방법을 보여줍니다. 지금까지 가장 성능이 뛰어나고 안전한 웹 사이트 구축을 시작하려면 아래 비디오를 확인하십시오!

세션 슬라이드

전체 텍스트 성적 증명서

KELLEN 메이스 : 안녕하세요. 저는 WP Engine 개발자 관계 팀의 Kellen입니다. 이 강연에서는 Atlas 생태계의 새롭고 흥미로운 기능 중 일부를 살펴보겠습니다. WP Engine 사용자 포털에서 새 Atlas 앱을 생성하고 이 포트폴리오 청사진을 선택할 수 있는 방법을 살펴보겠습니다. 그렇게 함으로써 우리는 완전한 헤드리스 WordPress 사이트를 몇 분 안에 인터넷에서 라이브로 얻을 수 있습니다.

그런 다음 해당 프로젝트를 로컬 컴퓨터에 복제하고 로컬 개발을 위해 설정하여 새 사이트를 사용자 지정할 수 있는 방법을 살펴보겠습니다. 그런 다음 Atlas Content Modeler로 관심을 돌리고 이를 사용하여 Photos라는 새로운 사용자 지정 콘텐츠 모델을 생성하는 방법을 살펴보겠습니다.

그리고 이 Photos 콘텐츠 모델에는 최근 Atlas Content Modeler에 추가된 새로운 기능인 반복 가능한 필드를 포함하여 몇 가지 고유한 사용자 지정 필드가 있습니다. 그런 다음 마지막으로 프런트 엔드 JavaScript 앱에서 일부 사용자 지정 개발을 수행하고 해당 사용자 지정 Photos 데이터를 쿼리한 다음 페이지에 렌더링하는 방법을 살펴보겠습니다.

WP Engine 계정을 만들고 사용자 포털의 Atlas 페이지에 로그인하면 새 앱 만들기 버튼을 클릭할 수 있습니다. 여기에서 사전 구축된 사이트인 청사진으로 시작하거나 기존 리포지토리에서 가져올 수 있습니다. 청사진부터 시작하겠습니다. 이제 사용하려는 청사진을 선택할 수 있습니다. 포트폴리오 청사진을 선택한 다음 계속을 클릭합니다.

다음 단계는 이 앱을 GitHub에 연결하는 것입니다. 버튼을 클릭하여 그렇게 한 다음 GitHub에 로그인합니다. 그런 다음 앱이 승인되었음을 나타내는 이 화면이 표시됩니다. 다음으로 이 저장소를 실제로 복제해야 합니다. Clone Blueprint를 클릭한 다음 새 리포지토리에 이름을 지정합니다. 그리고 버튼을 클릭하여 이 청사진 템플릿을 사용하여 새 리포지토리를 만듭니다.

여기에서 이 새로운 앱 저장소가 내 GitHub 계정에 생성된 것을 볼 수 있습니다. 이제 이 저장소를 Atlas 앱에 연결해야 합니다. 따라서 사용자 포털로 돌아가서 선택한 리포지토리 섹션까지 아래로 스크롤합니다. 모든 리포지토리에 대한 액세스를 허용한 경우 목록에 표시될 수 있습니다. 그렇지 않은 경우 리포지토리 관리를 클릭할 수 있습니다.

이 페이지에서 Atlas가 액세스할 수 있어야 하는 리포지토리를 선택할 수 있습니다. 따라서 목록에서 리포지토리를 선택합니다. 저장을 클릭하면 이제 사용자 패널로 돌아가면 목록에 추가한 저장소 팝업이 표시됩니다. 계속해서 그것을 선택하십시오. 앱 지역의 경우 미국 중부 지역을 사용하겠습니다. 마지막으로 버튼을 클릭하여 이 Atlas 앱을 만듭니다.

이제 앱이 빌드되고 있다는 알림이 표시됩니다. 잠시만 기다려 보겠습니다. 이제 Atlas 앱 구축이 완료되었으므로 이 Atlas URL 링크를 클릭하여 인터넷에서 실시간으로 실행되는 새로운 Atlas 앱을 볼 수 있습니다. 홈 페이지에서 최신 게시물 목록을 볼 수 있습니다. 우리는 우리의 평가를 볼 수 있습니다.

포트폴리오 페이지로 이동하여 여기에서 포트폴리오 프로젝트 목록을 확인할 수 있습니다. 개별 프로젝트를 클릭해 보겠습니다. 다음으로 블로그를 살펴보겠습니다. 블로그 페이지로 이동하여 여기에서 게시물 그리드를 확인하세요. 클릭하면 개별 블로그 게시물 페이지도 볼 수 있습니다. 그런 다음 준비, 설정, 클릭하여 홈페이지로 돌아갑니다.

따라서 이러한 페이지 전환이 정말 빠르다는 것을 알 수 있습니다. 한 페이지에서 다른 페이지로 즉시 전환됩니다. 그리고 이것은 헤드리스 WordPress 아키텍처를 사용하는 이점 중 하나입니다. 다음으로 이 경험을 뒷받침하는 WordPress 사이트를 살펴보겠습니다. 이제 WP Engine 사용자 포털로 돌아가서 여기에서 연결된 WordPress 환경에 대한 이 링크를 클릭할 수 있습니다.

여기에서 WP Admin을 클릭하여 사이트의 WordPress 관리자에게 보낼 수 있습니다. 여기 이 경험을 뒷받침하는 백엔드가 있습니다. 게시물로 이동하면 수많은 더미 블로그 게시물로 미리 채워진 것을 볼 수 있습니다. 따라서 여기에서 새 사이트에 대한 모든 데이터가 제공됩니다. 플러그인도 살펴보겠습니다. 여기에서 헤드리스 WordPress 개발을 가능하게 하기 위해 여러 플러그인이 설치되고 활성화된 것을 볼 수 있습니다.

Atlas Content Modeler에 특별한 주의를 기울이겠습니다. 사이드바에서 Content Modeler를 클릭합니다. 여기에서 우리를 위해 프로젝트와 사용 후기라는 두 가지 맞춤형 콘텐츠가 생성된 것을 볼 수 있습니다. 여기 사이드바에서 볼 수 있습니다. 그래서 우리는 프로젝트, 그 목록, 평가 및 그 목록을 가지고 있습니다. 그래서 여기가 프런트 엔드 사이트에서 본 프로젝트 및 평가 데이터의 출처입니다.

그래서 우리는 상당한 진전을 이루었습니다. 사용자 포털에서 새 Atlas 앱을 만드는 방법을 살펴보았습니다. 그렇게 하면 사이트의 페이지를 제공하는 프런트 엔드 JavaScript 애플리케이션을 생성할 뿐만 아니라 그 경험을 강화하고 두 가지를 연결하는 수고를 덜어주는 WordPress 백엔드도 생성됩니다. 프론트엔드 앱이 WordPress 백엔드에서 데이터를 소싱할 수 있도록 이 둘을 연결합니다.

거기에서 우리는 프런트 엔드 앱을 살펴보고 온라인에서 실시간으로 실행되는 것을 볼 수 있을 뿐만 아니라 WordPress 관리자를 둘러보고 일부 사용자 지정 데이터 유형 또는 데이터 모델과 일부 더미 데이터도 볼 수 있었습니다. 우리를 위해 만들어졌습니다. 따라서 아주 짧은 시간 안에 헤드리스 WordPress 애플리케이션이 완전히 작동하는 것을 볼 수 있습니다.

하지만 이 시점에서 변경하고 싶다면 어떻게 해야 할까요? 실제 포트폴리오 사이트를 구축하고 있고 스스로 생각한다면 이것은 정말 멋진 일입니다. 이것은 좋은 시작입니다. 하지만 이제 약간의 변화를 주고 싶습니다. 일부 색상을 교체하거나 내 사이트에 추가 페이지를 추가하기 위해 일부 코드를 변경하고 싶습니다. 어떻게 해야 하나요? 지역 개발을 시작하려면 어떻게 해야 합니까? 다음에 알아봅시다.

시작하려면 링크를 GitHub 리포지토리에 복사한 다음 명령줄에서 git clone을 실행하여 프로젝트를 복제합니다. 여기에서 해당 프로젝트 디렉토리에 CD를 넣은 다음 NPM 설치를 실행하여 프로젝트의 종속성을 설치할 수 있습니다. 완료되면 계속 진행하여 코드 편집기에서 프로젝트를 엽니다.

다음으로 몇 가지 환경 변수를 설정해야 합니다. 여기에서 샘플 파일이 생성된 것을 볼 수 있습니다. 이제 이 값이 올바른지 확인하기만 하면 됩니다. 사용자 포털로 돌아가 변수 관리를 클릭한 다음 프로덕션 앱에서 사용하는 환경 변수를 살펴보겠습니다. 계속해서 로컬 앱이 프로덕션과 동일한 환경 변수를 사용할 수 있도록 두 항목을 복사하여 앱에 붙여넣습니다.

여기서 마지막 단계는 이 파일의 이름을 바꾸는 것입니다. 파일 끝에서 .sample을 제거하여 적용합니다. 이제 여기에서 작업하는 프런트 엔드 앱은 Faust.js 위에 구축됩니다. 그리고 Faust는 데이터 가져오기 마법을 수행하기 위해 GraphQL 내부 검사 쿼리라는 것을 실행할 수 있어야 합니다.

이것은 기본적으로 WordPress 백엔드에 묻는 Faust입니다. 이봐, 내가 쿼리할 수 있도록 GraphQL 스키마에서 사용할 수 있는 데이터는 무엇입니까? 따라서 이것이 작동하려면 인트로스펙션을 활성화해야 합니다. 여기에서 WordPress 관리자로 돌아가서 GraphQL로 이동한 다음 사이드바의 설정으로 이동합니다.

설정 페이지에서 Enable Public Introspection이 보이는 곳까지 아래로 스크롤하고 해당 상자를 클릭합니다. 여기 있는 동안 그래픽 디버그 모드도 활성화하는 것이 좋습니다. 그러면 더 자세한 디버그 메시지가 표시됩니다. 완료하면 버튼을 클릭하여 변경 사항을 저장할 수 있습니다. 이제 마지막으로 터미널을 열고 NPM 실행 생성을 실행할 수 있습니다. 그런 다음 완료되면 마지막으로 NPM에서 dev를 실행하여 앱을 로컬에서 실행합니다.

이제 이 localhost 3,000 링크를 클릭하면 사이트가 실제로 여기에서 로컬로 실행되고 있음을 확인할 수 있습니다. 그래서 우리는 사이트를 사용자 지정하기 위해 여기에 일부 콘텐츠를 추가하고 싶다고 말했습니다. 그리고 이제 우리는 지역 개발을 위해 설정되었으므로 정확히 그렇게 할 수 있습니다. 따라서 이 프로젝트에 대해 블로그 게시물뿐만 아니라 우리가 본 포트폴리오 프로젝트 및 이러한 평가와 같이 우리가 가지고 있는 몇 가지 사용자 지정 콘텐츠를 원한다고 가정해 보겠습니다.

맞춤 콘텐츠 외에도 더 많은 콘텐츠를 추가하고 싶다고 가정해 보겠습니다. 블로그 게시물을 작성하고 포트폴리오 프로젝트를 작성하는 사람 외에도 사이트의 고객이 사진작가이고 자신이 찍은 사진을 추천하고 싶어한다고 가정해 보겠습니다. 이 사진의 데이터를 지원하고 이를 쿼리한 다음 프런트 엔드 애플리케이션에 사진을 표시하기 위해 사이트에 사용자 지정 콘텐츠 유형 또는 사용자 지정 콘텐츠 모델을 추가하려면 어떻게 해야 합니까? 다음에 해봅시다.

여기에서 WordPress 관리자로 돌아가서 Content Modeler로 이동하겠습니다. 그래서 우리는 전에 한 번 스크린에 가봤습니다. 우리는 프로젝트와 평가를 흘끗 보았습니다. 이 청사진의 일부로 우리를 위해 생성된 사용자 지정 콘텐츠 모델임을 알 수 있습니다. 각 모델을 클릭하면 각 모델에 고유한 개별 필드 집합이 있음을 알 수 있습니다.

예를 들어 프로젝트에는 이러한 개별 필드가 있습니다. 그리고 프로젝트와 평가는 모두 여기 사이드바에 반영됩니다. 그런 다음 각각에 대한 필드입니다. 프로젝트를 클릭한 다음 기존 프로젝트를 클릭하거나 새로 추가로 이동하면 여기에 반영된 모든 필드가 표시됩니다. 따라서 콘텐츠 제작자는 이 데이터를 입력하는 데 필요한 모든 필드를 볼 수 있습니다. 괜찮은.

하지만 맞춤형 콘텐츠에는 새로운 모델이 필요합니다. 계속해서 여기 이 버튼을 클릭하여 새 모델을 생성하겠습니다. 그래서 나는 이 사진을 부를 것이다. 그리고 복수형 이름의 경우 끝에 S를 붙이고 사진이라고 부를 것입니다. 이 자동 생성된 API 식별자 – 여기, 이 ID – 괜찮습니다. 사진이 좋아보이네요. API 가시성을 위해 GraphQL을 통해 이 데이터를 쿼리할 수 있기를 원하므로 공개를 클릭해야 합니다. 모델 아이콘의 경우 카메라와 같은 것이 사진에 적합할 수 있습니다. 이제 만들기를 클릭합니다.

이렇게 사진 콘텐츠 모델이 만들어졌습니다. 따라서 이 시점에서 콘텐츠 모델에 대한 첫 번째 필드를 선택하라는 메시지가 표시됩니다. 그리고 이 기록을 기준으로 Atlas Content Modeler에서 지원하는 필드 유형입니다. 이 사이트에 표시하려는 사진에 대해 이 두 가지를 사용하겠습니다.

각 사진에 제목을 지정한다고 가정해 보겠습니다. 따라서 제목이라고 말한 다음 사진 제목을 API 식별자로 지정합니다. 이것이 바로 GraphQL 스키마에서 사용할 수 있는 방법입니다. 그것이 바로 그것입니다. 그리고 이것을 항목 제목으로 사용하고 싶다고 말할 것입니다. 그리고 한 줄 텍스트는 괜찮습니다. 계속해서 만들기를 클릭합니다.

다음 필드에서는 해당 이미지 자체를 사진으로 캡처하고 싶다고 가정해 보겠습니다. 그래서 나는 더하기를 칠 것입니다. 그리고 여기에 새 필드를 만듭니다. 우리는 이것을 하나의 이미지라고 부를 것입니다. 유형으로는 사진이 될 것이기 때문에 미디어를 선택해야 합니다. 그래서 이름을 이미지로 하겠습니다. 그런 다음 여기 아래로 이동하여 각 게시물의 추천 이미지로 설정합니다. 이를 클릭하고 필수 항목으로 지정하겠습니다. 그래서 우리는 그것이 거기에 있을 것이라는 것을 항상 알고 있습니다. 그런 다음 만들기를 클릭합니다.

자. 두 번째 필드가 있습니다. 세 번째에 대해서는 설명을 드리겠습니다. 그래서 나는 더하기를 칠 것입니다. 그리고 이것은 리치 텍스트 필드가 될 것입니다. 그래서 우리는 설명을 말할 것이고 그것은 그 필드에 대해 그것을 할 것입니다. 그리고 우리가 원하는 마지막 것은 주제를 위한 것입니다. 따라서 이 필드를 사용하여 사진에 표시된 내용을 캡처합니다. 예를 들어 우리 사진 중 하나가 그렇듯이 해가 지는 산맥의 사진이라면 사진의 일부 대상은 산, 별, 하늘 등일 수 있습니다. 사진에 있는 것들의 목록일 뿐입니다.

이 데이터를 저장하는 방법에는 여러 가지가 있습니다. 예를 들어 사용자 지정 분류를 만든 다음 각 항목에 용어를 할당할 수 있습니다. 그래서 이 사진들 각각은 하나 이상의 용어를 가질 수 있습니다. 그렇게 하는 것이 한 가지 방법일 것입니다. 하지만 우리의 목적을 위해 그런 태그나 분류와 같은 것을 기반으로 사진을 그룹화하는 데 관심이 없다고 가정해 보겠습니다.

대신 이 목록은 실제로 사이트에 표시하기 위한 것입니다. 문제는 여기에서 더하기를 누르면 텍스트 필드로 만들면 그 중 하나만 얻게 된다는 것입니다. 그리고 더 있다면 어떨까요? 주어진 사진에 이러한 피사체가 몇 개나 포함될지 미리 알 수 없습니다. 그렇죠? ACM의 반복 가능한 필드 기능이 정말 유용한 곳입니다. 어떻게 생겼는지 봅시다.

여기서는 이 필드를 텍스트 필드로 만들고 제목을 지정하겠습니다. 그런 다음 이 필드를 반복 가능하게 만듭니다. 이것이 핵심입니다. 계속해서 클릭하겠습니다. 한 줄 텍스트 필드로 유지하고 만들기를 누릅니다. 이렇게 해서 여기의 사진 콘텐츠 모델이 생성되었습니다. 그리고 우리는 사이드바에서 그것을 볼 수 있습니다.

여기 사진을 클릭하면 여기에서 미리 만든 더미가 하나 있는 것을 볼 수 있습니다. 그러나 새로 추가를 만들면 이것이 반영되는 것을 볼 수 있습니다. 여기의 필드는 콘텐츠 모델에 추가한 내용을 반영합니다. 그래서 우리는 제목을 얻습니다. 이미지를 첨부할 수 있습니다. 사진 설명을 위한 서식 있는 텍스트 필드와 여기에 하나 이상의 주제를 추가할 수 있는 반복 가능한 필드가 있습니다.

그럼 여기서 무엇을 할 수 있는지 봅시다. 추천 이미지 추가를 클릭하겠습니다. 그리고 내 기계에서 하나를 선택합니다. 보자. 업로드가 완료되면 대체 텍스트를 제공합니다. 우리는 그렇게 말할 것입니다. 그래서 우리의 이미지가 있습니다. 이제 돌아가서 제목을 지정해 보겠습니다. 우리는 보케가 있는 흰 꽃이라고 말할 것입니다. 그렇게. 설명을 위해 여기 예쁜 흰색 꽃의 멋진 장면이 있다고 말할 것입니다. 그렇게.

이제 피사체에 대해 스스로에게 물어볼 수 있습니다. 여기 사진에 무엇이 있습니까? 그리고 아마도 우리는 꽃이 될 수 있습니다. 항목 추가를 클릭합니다. 배경이 흐려지는 보케 효과도 있습니다. 또 다른 예를 들어, 나무의 줄기나 가지가 사진에 나올 것 같습니다. 그래서 우리는 여기에 그 중 몇 가지를 추가할 것입니다. 모든 것을 캡처했다고 생각되면 계속 진행하여 게시를 누를 수 있습니다. 그래서 우리는 간다.

그런 다음 사진으로 돌아가서 이전에 이것을 만들었습니다. 산은 시원하다. 그렇게 설정해야 합니다. 그래서 당신은 산맥 사진을 얻습니다. 그리고 여기 산, 별, 그림자가 있는 산맥의 멋진 사진이 있습니다. 그것이 가지고있는 몇 가지 주제. 따라서 프런트 엔드 애플리케이션에서 작업할 수 있는 게시물이 최소한 몇 개 제공됩니다.

따라서 이 시점에서 우리는 이러한 사진에 필요한 데이터를 저장하기 위해 WordPress 백엔드에 콘텐츠 모델을 생성했으며, 프런트엔드 앱에서 소비하는 데 사용할 두 개의 새로운 사진 게시물을 생성했습니다. 다음으로 이 데이터를 워드프레스에서 가져와 프런트엔드 애플리케이션에서 사용할 수 있도록 하려면 어떻게 해야 할까요?

Atlas Content Modeler는 이를 매우 쉽게 만들어 주는 매우 멋진 기능을 제공합니다. 여기에서 Content Modeler로 돌아가 사진 모델을 찾은 다음 여기에서 작은 줄임표 점 아이콘을 클릭합니다. 그리고 그래픽에서 열기로 이동합니다. 그래서 이것을 클릭하자마자 우리가 만든 콘텐츠 모델인 사진을 포함하는 쿼리를 작성합니다.

그리고 그 중 처음 10개를 가져온 다음 사용자 정의 필드를 포함하여 우리가 생성한 모든 필드가 있는 아래의 GraphQL 조각을 포함합니다. 보시다시피 사진 제목, 이미지, 설명, 주제를 추가했습니다. 따라서 이것은 GraphQL 스키마에서 이 데이터가 어떻게 보이는지 확인하는 데 매우 편리합니다. 계속해서 이 버튼을 눌러 이 쿼리를 실행합니다.

그리고 동일한 GraphQL 쿼리를 실행하는 경우 프런트 엔드 JavaScript 앱이 무엇을 반환하는지 확인할 수 있습니다. 그것은 사진을 다시 얻을 것입니다. 그리고 그 안에는 노드라고 하는 배열이라고 하는 개체가 있습니다. 그리고 그 배열 안에는 다음과 같은 객체가 있을 것입니다. 이 사진들 각각에는 제목, 이미지가 있고 그 아래에는 설명과 주제도 있습니다.

이것이 바로 우리에게 필요한 것입니다. 이제 우리는 이러한 필드 중 몇 가지를 사용할 것입니다. 따라서 WordPress 백엔드와 이 사진 데이터를 저장하고 노출하는 기능 측면에서 좋습니다. 이제 프런트 엔드 JavaScript 앱에서 이것을 어떻게 사용할 수 있는지 살펴보겠습니다.

그래서 우리는 그곳으로 돌아갈 것입니다. 그리고 이것에 대한 좋은 출발점은 프로젝트 목록인 포트폴리오 페이지를 보는 것이라고 생각합니다. 그것은 사용자 지정 콘텐츠 모델 게시물의 목록이고 사진도 있을 것이기 때문에 이 두 페이지에는 많은 공통점이 있습니다. 그래서 우리는 그것을 일종의 출발점으로 사용할 수 있습니다.

여기서 Portfolio를 클릭하고 그것이 어떻게 생겼는지 기억해 보겠습니다. 그리고 그것은 우리가 이 포트폴리오 프로젝트 목록을 얻는 곳과 같습니다. 이제 코드를 열고 손을 더럽혀 보겠습니다. 우리는 슬래시 프로젝트인 이 페이지를 추적하고 이것이 어떻게 구축되는지 볼 것입니다.

소스 내부에서 페이지로 이동하겠습니다. 그런 다음 Project를 찾습니다. 거기는. 그리고 그 안에 있는 index.js 파일을 엽니다. 스크롤을 조금 내리면 use node pagination hook이 사용되고 있는 것을 볼 수 있습니다. 이것은 Hooks 폴더 내부의 이 위치에서 나오는 React 후크입니다. 그리고 그 안에서 query.projects를 호출합니다.

그리고 query.projects를 사용하면 우리가 만든 프로젝트의 콘텐츠 모델이라고도 하는 프로젝트 사용자 지정 게시물 유형에 대한 데이터에 액세스할 수 있습니다. 따라서 query.projects를 호출한 다음 미리 처리하려는 일부 필드를 전달하여 페이지가 로드되는 즉시 처리되도록 합니다. 이것이 바로 이 배열이 여기에 있는 것입니다. 따라서 해당 필드는 페이지의 첫 번째 로드에 있습니다.

그런 다음 실제로 이 페이지의 콘텐츠를 렌더링할 준비가 되면 이 작업을 수행합니다. SEO 구성 요소, 머리글, 바닥글이 있습니다. 그리고 여기 페이지의 메인 섹션은 이 메인 태그 안에 있습니다. 여기에 헤더가 있습니다. 파란색 섹션은 끌어오고 있습니다. 그리고 그 안에 프로젝트 목록이 있는 래퍼 div가 있습니다. 그리고 이 추가 로드 구성 요소를 클릭하면 하단에 추가 로드 버튼이 표시됩니다. 그런 다음 더 많은 프로젝트를 가져와서 UI에 표시합니다.

이것이 바로 해당 페이지가 구축된 방식입니다. 그리고 제가 말했듯이 저는 이것을 우리의 출발점으로 사용하고 싶습니다. 이제 이 전체 파일을 복사하고 여기에서 이 파일 구조를 모방하겠습니다. Pages 내에서 Photo를 생성합니다. 그런 다음 해당 폴더 안에 index.js 파일을 만듭니다. 괜찮은. 그리고 이 새 파일에 내용을 붙여넣습니다. 그러나 우리는 이것에 대한 프로젝트 데이터에 관심이 없기 때문에 몇 가지를 바꿀 것입니다. 우리는 사진 데이터를 원합니다. 어떻게 할 수 있는지 봅시다.

따라서 이 상수의 이름은 참조 프로젝트입니다. 이제 첫 번째 단계로 이름을 바꾸겠습니다. 포토 노드 사전 통과 필드라고 할 수 있습니다. 그러면 좋을 것입니다. 자체 필드 목록을 제공해야 합니다. 지금은 데이터베이스 ID만 남겨두고 잠시 후에 일부를 추가할 수 있습니다.

더 내려가 보자. 포토 프리패스. 아 이름이 까먹었네요. 우리는 거기에 갈. 이제 그들은 다시 일치합니다. 괜찮은. 그렇다면 query.projects 대신 사용자 정의 콘텐츠 유형에 대해 query.photos가 필요하다는 점을 기억하십시오. 그러니 바로 거기에서 사진으로 업데이트하세요. 조금 아래로 스크롤하십시오.

따라서 이 프로젝트 구성 요소는 사용하지 않기 때문에 더 이상 적용되지 않습니다. 그래서 나는 이 시점에서 그것을 제거할 것이고 이것은 어떻습니까? 우리는 단지 – 우리는 단지 H1일 것입니다. 여기 페이지에서 무언가를 렌더링하기 위해 Hello라고 표시됩니다. 그리고 아마도 우리는 로드를 더 많이 주석 처리할 것입니다.

그래서 내가 잊은 것이 있는지 확인하기 위해 프로젝트 검색을 실행할 것입니다. 예, 몇 가지 코드 주석과 더 이상 사용하지 않는 이 구성 요소를 가져옵니다. 따라서 해당 구성 요소를 삭제하겠습니다. 그리고 저는 우리가 잘해야 한다고 생각합니다. 그래서 우리는 이 시점에서 이러한 것 중 몇 가지를 사용하지 않지만 괜찮습니다. 잠시만요.

그래서 나는 이것을 저장하고 우리가 그 렌더링을 얻을 수 있는지 볼 것입니다. 이제 프런트 엔드 앱에서 이와 같이 사진으로 이동할 수 있어야 합니다. 그리고 우리는 간다. 여기 새로운 페이지가 있습니다. 안녕하세요라고 쓰여 있고 대부분은 상단의 머리글과 바닥글과 같이 포트폴리오 프로젝트 페이지와 동일하게 보입니다.

나는 그것이 여전히 포트폴리오라고 말하고 있고 우리는 아마도 그것을 교체하고 싶을 것입니다. 그래서 우리는 그것을 실제로 간단하게 할 수 있습니다. 그래서 여기 포트폴리오가 있습니다. 우리는 사진을 말할 것입니다. 그런 다음 이 지점에서도 사진으로 변경합니다. 저장해. 우리는 거기에 갈. 그래서 헤더를 업데이트했습니다.

이제 실제로 해당 데이터를 사용하고 사진 데이터를 가져오고 여기에 목록을 표시하는 방법에 대해 살펴보겠습니다. 그럼 어디서부터 시작해야 할까요? GraphQL 또는 여기의 WordPress 관리자에서 본 것처럼 쿼리는 대략 다음과 같습니다. 이러한 필드를 갖게 됩니다. 그렇게 합시다. 따라서 사진 제목은 사용자 정의 필드입니다. 그러나 실제로 이 필드를 게시물의 제목으로 설정했기 때문에 제목만 사용할 수 있습니다. 게시물의 제목은 이 이름을 가진 사용자 정의 필드와 동일할 것이기 때문입니다. 그래서 우리는 그것을 사용할 수 있습니다.

따라서 이 배열에서는 데이터베이스 ID뿐만 아니라 사진, 이미지, 설명 및 주제의 제목도 얻을 수 있습니다. 그것들도 추가해 봅시다. 이미지, 설명, 주제. 괜찮은. 끝에 쉼표가 필요합니다. 우리는 거기에 갈. 페이지가 끝날 때 바로 사용할 수 있기를 원하는 모든 필드라고 생각합니다. 그래서 그것은 나에게 좋아 보인다.

그리고 여기서 실제로 데이터 렌더링을 얻을 수 있는지 테스트해 봅시다. 우리가 가지고 있는 Hello H1 아래에서 이렇게 합시다. 우리는 JSON.stringify를 할 것이고, 그런 다음 그 무언가로 전달할 것입니다. 따라서 여기에서 데이터를 수행하고 페이지에 데이터 렌더링을 가져올 수 있는지 확인합니다.

그래서 저장하고 프런트 엔드로 돌아갑니다. 그리고 거기에 있습니다. 그래서 이것은 데이터가 어떻게 생겼는지입니다. WordPress 백엔드에서 성공적으로 가져오는 것을 볼 수 있습니다. 우리는 이 노드 배열을 가지고 있으며, 그 개체 내부에는 각각의 개별 사진과 반복 가능한 주제 필드에 대한 각 개별 값을 포함하여 우리가 다시 요청한 데이터를 나타냅니다.

그래서 이것은 훌륭합니다. 이것이 바로 우리에게 필요한 것입니다. 이와 같이 페이지에 데이터를 뱉어내는 것보다 좀 더 깔끔하게 만들어 보겠습니다. 여기에 있는 이 사전 태그 대신 각 데이터 조각을 매핑하고 이를 위해 페이지에 카드를 렌더링해 보겠습니다.

그래서 제가 좋아하는 한 가지는 렌더링할 게시물이 있다고 가정하기 전에 게시물이 없을 수도 있다는 점을 설명해야 한다는 것입니다. 그렇죠? 그래서 제가 좋아하는 한 가지는 제 구성 요소의 맨 위에 있는 것입니다. 저는 항상 사진을 가지고 있습니다. 그런 다음 data.nodes.length를 그렇게 합니다. 그리고 데이터가 아직 존재할지 모르기 때문에 optional chaining에 대해 물음표를 표시할 것입니다.

그런 다음 이것을 부울로 캐스트합니다. 즉, 이 시점에서 실패하고 데이터가 정의되지 않으면 false로 변환됩니다. 렌더링할 사진이 없다고 말할 것입니다. 그렇지 않고 이 배열의 길이까지 드릴다운할 수 있다면 게시물이 없거나 하나 이상이면 0이 됩니다. 따라서 이 정수를 부울로 변환하면 사진이 있는지 여부를 알려줍니다. 따라서 0이면 거짓이 됩니다. 하나 이상이면 havePhotos가 true가 됩니다.

따라서 그 지식을 바탕으로 여기 구성 요소 내부에서 의사 결정을 내릴 수 있습니다. 그럼 어떻게 할 수 있는지 알아봅시다. 그래서 저는 사진이 있다면 한 가지를 렌더링하고 싶다고 말할 것입니다. 우리는 말할 것입니다 – 보자. 우리는 data.photos를 하고 싶고 그것들을 매핑할 것입니다. 따라서 각 사진에 대해 무언가를 렌더링합니다.

그러니 처음에는 쉬운 것을 되돌려 봅시다. 우리는 반환할 것입니다 – 보자. 우리는 H2를 만들 것입니다. 이것은 우리 카드 중 하나와 같을 것이기 때문에 어떻습니까? 그런 다음 photo.title을 그렇게 말할 것입니다. 괜찮은. 그래서 우리는 각각의 사진을 매핑할 것입니다. 그리고 각각에 대해 해당 사진의 제목과 함께 H2를 반환합니다. 괜찮은.

이 모든 것은 실제로 렌더링할 사진이 있는 경우 원하는 것입니다. 하지만 그렇지 않다면 대안은 어떻습니까? 그래서 우리는 여기에 우리의 else 절을 ​​가질 것이고, 다른 것을 렌더링해 봅시다. 단락은 어떻습니까? 표시할 사진이 없습니다. 이제 저장하면 됩니다. 이제 여기에서 게시물 제목을 렌더링하고 있습니다.

이제 여기에서 이 기능을 좀 더 완성해 보겠습니다. 우리는 다른 것을 반환하고 싶다고 말할 것입니다. 괜찮은. 그리고 이들 각각에 대해 몇 가지 스타일만 복사할 것입니다. 일부 인라인 스타일은 여기서 미리 작성하여 입력하는 시간을 절약할 수 있습니다. 그래서 나는 그 래퍼 div를 가질 것입니다. 그리고 그 안에서 우리가 가지고 있던 H2를 복원할 수 있습니다. 그래서 나는 제목과 함께 H2에 붙여넣을 것입니다.

제목 뒤에 설명을 표시해 봅시다. 다음에 할 수 있습니다. 그래서 그것은 photo.description이 될 것입니다. 하지만 예를 들어 컨테이너 내부와 같이 자체적으로 렌더링할 수는 없습니다. 이렇게 하려고 하면 HTML이 이스케이프되지 않기 때문에 제대로 작동하지 않습니다. 따라서 저장하면 페이지에 이스케이프된 HTML이 표시되는 것을 볼 수 있습니다. 이는 우리가 원하는 것이 아닙니다.

따라서 React에는 안전하고 이와 같이 이스케이프할 필요가 없는 HTML 작업을 위한 유틸리티가 있습니다. 그리고 그것은 div를 사용하고 위험하게 SetInnerHTML을 사용하는 것입니다. 그리고 하나의 속성이 이중 밑줄 HTML인 객체를 전달할 수 있습니다.

그런 다음 전달하는 값은 이스케이프하지 않고 렌더링하려는 것입니다. 그래서 우리에게 그것은 photo.description이 될 것입니다. 그런 다음 이 div는 자체 의류가 될 수 있습니다. 괜찮은. 이제 저장하겠습니다. 우리는 우리가 얻는 것을 볼 것입니다. 시원한. 이제 HTML은 더 이상 이스케이프되지 않습니다. 그래서 그것은 나에게 좋아 보인다.

그래서 이것은 훌륭합니다. 추천 이미지는 어떻습니까? 우리가 할 수 있는 것은 이것을 처음부터 작성하는 것입니다. 추천 이미지 URL을 가져오고 이미지 태그를 가지고 URL로 전달할 수 있습니다. 그런 다음 브라우저는 이미지를 렌더링하고 해당 소스를 가리킵니다.

그러나 이 프로젝트는 이 청사진 코드 베이스를 파헤치면 실제로 이 목적을 위해 추천 이미지라고 하는 미리 빌드된 구성 요소를 가지고 있습니다. 그래서 우리가 사용하기에 완벽할 것입니다. 따라서 구성 요소 디렉터리에서 다양한 구성 요소를 가져오는 위치로 조금 위로 스크롤하겠습니다. 그리고 추천 이미지라고 하는 끝에 이렇게 하나를 태그하겠습니다. 이제 우리는 원하는 곳 어디에서나 추천 이미지를 렌더링할 수 있습니다.

이 div가 사진 설명과 함께 있는 바로 아래에 추천 이미지를 렌더링합니다. 그리고 이것은 이미지 소품이 필요합니다. 여기서 전달해야 하는 것은 이 이미지의 전체 노드입니다. 따라서 우리에게는 photo.feauredimage.node가 될 것입니다. 그리고 그것이 우리의 이미지에 도움이 될 것이라고 생각합니다. 그래서 저장하겠습니다. 물론입니다. 시작합니다. 따라서 여기에서 페이지가 다시 로드되면 이제 제목, 설명 및 사진 자체가 표시됩니다. 마찬가지로 다음 사진에서도 해당 이미지가 목록에 표시됩니다.

그래서 이것은 멋지다. 우리는 큰 진전을 이루고 있습니다. 마지막 작업은 사진에 있는 피사체에 대한 반복 가능한 필드를 관리하는 것이었습니다. 그래서 제가 할 일은 여기에 단락을 만들고 닫는 것입니다. 그런 다음 이 단락 태그 내부에서 약간의 curlies를 열고 동일한 photo.subjects를 수행할 수 있습니다. 그러나 이제 우리는 그것의 끝 부분에 조인할 것입니다. 그리고 우리는 [INAUDIBLE]에 쉼표, 공백으로 연결하고 싶다고 말할 것입니다. 그리고 나는 그것을 저장합니다.

핫 리로드가 발생하면 아래로 스크롤할 수 있어야 합니다. 그리고 충분히, 우리는 간다. 그래서 그들은 목록에 표시되고 있습니다. 사용자는 이것이 무엇인지 확신하지 못할 수 있습니다. 그래서 아마도 우리 앱에서, 우리는 뒤로 돌아가서 어떤 종류의 레이블을 추가할 수 있을 것입니다. 약간 앞에 Subjects might, like that이라고 쓰여 있는 것이 있습니다. 주제 꽃, 보케, 가지. 그리고 여기에 있는 다른 사진에는 예를 들어 산, 별, 그림자가 있습니다.

여기에서 잠시 멈추겠습니다. 하지만 제가 얼마나 빨리 이 페이지를 구성할 수 있었는지 보실 수 있을 것입니다. 나는 우리의 hello, world를 거기에서 제거해야 한다고 생각합니다. 우리는 그럴 필요가 없습니다. 또는 안녕하세요. 그래서 제거하겠습니다. 여기 있습니다. 그래서 제가 말했듯이 우리가 이것을 얼마나 빨리 합칠 수 있었는지 알 수 있습니다.

포트폴리오 목록 페이지에서 코드를 기반으로 여기에서 사진 목록 페이지를 만든 다음 각 개별 사진을 매핑하고 Atlas Content Modeler 사용자 정의 필드(제목, 설명, 이미지, 그런 다음 여기에서 주제에 대한 반복 가능한 필드입니다. 그래서 저는 여러분이 자신의 프로젝트에서 이것으로 힘을 얻었으면 좋겠습니다.

우리의 청사진 중 하나를 프로젝트의 많은 부분을 완료할 수 있는 이 거대한 선두 출발점으로 삼고 싶다면 많은 다리 작업이 완료됩니다. 그런 다음 여기에서 이 강연에서 했던 것과 비슷한 작업을 수행할 수 있습니다. 추가로 사용자 지정하고 자신의 사용자 지정 및 기타 콘텐츠 모델 등을 추가할 수 있습니다.

시청해 주셔서 감사합니다. 이 강연이 정말 유용했고 Atlas 생태계에서 지금까지 나왔고 앞으로도 계속 나올 모든 훌륭한 기능에 대한 좋은 감각을 제공했기를 바랍니다.

발표자: DE{CODE} 2022의 마무리입니다. 여기에서 영감을 얻었기를 바라며 더 많은 WordPress 전문 지식과 새로운 커뮤니티 연결을 가지고 떠날 수 있기를 바랍니다. 금요일부터 사이트에서 녹화된 콘텐츠를 찾아보고 놓친 내용을 확인하거나 동영상을 다시 시청하세요.

후원 파트너인 Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios 및 10Up에게 마지막으로 감사의 말씀을 전하고 싶습니다. DE{CODE} 모금 행사에 기부해 주셔서 대단히 감사합니다. 여러분의 관대함에 진심으로 감사드립니다.

이제 참석자 허브 및 세션에서 우리와 상호 작용한 모든 사람을 위해 상위 3명의 우승자를 선택하고 DE{CODE} 마지막에 상품을 청구하는 방법을 알려드립니다. 향후 행사에서 직접 또는 가상으로 다시 만나기를 기대합니다. 최신 WordPress 개발 동향과 이를 구현하여 WordPress 사이트를 더 빠르게 구축할 수 있는 방법에 대해 더 많이 알려드리고 싶습니다.

그게 전부입니다. 우리와 함께 해주셔서 감사합니다.