분류 Reactjs

React (Frontity)로 WordPress 웹 사이트 구축

컨텐츠 정보

  • 조회 19 (작성일 )

본문

Building a Worpress Front-End using React 

React를 사용하여 Worpress 프런트 엔드 구축


W3tech에 따르면 인터넷상의 웹 사이트의 거의 35 %가 WordPress에 의해 구동됩니다. WordPress의 개발은 항상 PHP를 중심으로 이루어졌지만 헤드리스 CMS 사용이 증가함에 따라 이제 Frontity와 같은 프레임 워크를 사용하여 React 및 WordPress로 빠른 웹 사이트를 원활하게 구축 할 수 있습니다.


Frontity는 WordPress에 중점을 둔 무료 오픈 소스 프레임 워크로 헤드리스 (또는 분리 된) WordPress 사이트를 위한 React 기반 프런트 엔드를 구축하는 데 도움이 됩니다. Gatsby.js 및 Next.js와 같은 React 프레임 워크는 WordPress와 함께 작동하지만 WordPress에만 초점을 맞춘 프레임 워크는 없습니다. 일반적으로 복잡한 구성과 추가 도구를 수행해야 합니다. 다행히 Frontity는 개발자가 수행해야 하는 이러한 모든 수고와 추가 도구를 제거하고 개발 단계에 더 빨리 도달 할 수 있도록 합니다.


이 튜토리얼에서는 Frontity를 사용하여 WordPress 웹 사이트를 구축하는 과정을 안내하지만 그 전에 Frontity가 작동하는 방식과 WordPress 프로젝트에 더 나은 옵션 인 이유를 살펴 보겠습니다.


Frontity는 무엇입니까 


Frontity에서 설명한 것처럼 헤드리스 (또는 분리 된) WordPress 사이트를 위한 React 기반 프런트 엔드를 구축 할 수 있는 무료 오픈 소스 프레임 워크입니다. Frontity를 설정 한 후 WordPress 사이트는 REST API를 통해 데이터를 제공하고 Frontity는 이 데이터를 사용하고 원하는 대로 구성하고 스타일을 지정할 수 있는 SPA (단일 페이지 애플리케이션)로 브라우저에서 렌더링 합니다.


그러나 Frontity는 React에 익숙하지 않은 개발자를 위해 모든 것을 더 간단하게 만들기 위해 WordPress의 초점을 염두에 두고 만들어졌습니다. 프레임 워크의 모든 측면이 단순화되고 WordPress에 최적화되었습니다. Frontity에는 상태 관리, CSS 또는 추가 도구와 같은 작업에 사용할 도구를 파악하지 않고도 WordPress를 구축하는 데 필요한 모든 것이 포함됩니다. 추가 도구를 설정할 필요가 없기 때문에 즉시 웹 사이트를 구축 할 수 있습니다.


Frontity의 작동 원리 


In Frontity WordPress 대시 보드는 기존과 동일한 방식으로 콘텐츠를 만들고 관리하기 위한 헤드리스 CMS로 활용됩니다. 변경하면 기존 WordPress 테마로 작업 할 때처럼 Frontity 사이트에서 콘텐츠가 자동으로 업데이트 됩니다.


React는 JavaScript 라이브러리이므로 Frontity 앱을 실행하려면 Node.js 서버가 필요합니다. WordPress REST-API에서 콘텐츠를 요청하고 이를 사용하여 브라우저에 표시되는 최종 HTML을 생성합니다. 또한 동일한 React 코드 및 CSS를 사용하여 AMP 페이지를 생성 할 수 있습니다.


아래 다이어그램은 Frontity가 작동하는 방식을 시각적으로 보여줍니다.



How Frontity works 

Frontity의 작동 방식 다음은 Frontity를 사용할 때의 몇 가지 장점입니다.


SSR 및 SEO 친화적 : Frontity는 즉시 서버 측 렌더링을 수행합니다. 이 접근 방식은 동적 콘텐츠와 잘 작동하며 SEO에 유용합니다.

확장성 : Frontity는 WordPress와 같은 유연한 확장성 패턴을 지원합니다. 테마 및 확장은 코드 변경 없이 활성화됩니다.

Lightning Fast Loading : 제가 Frontity에서 가장 좋아하는 점은 로드 유형의 속도입니다. Frontity는 즉시 사용할 수 있는 탐색 준비 HTML 페이지를 보냅니다. 따라서 초기 로드는 거의 즉각적으로 느껴집니다.

필수 Zero Setup : 연결하는 데 필요한 모든 것이 이미 포함되어 있습니다 (React, Webpack, Babel, Routing). 바로 들어가서 사이트 생성을 시작할 수 있습니다.

사용하기 쉬움 : Frontity는 WordPress를 React에 연결하는 것과 관련된 복잡성을 처리하여 큰 유리한 시작을 제공합니다.


Frontity로 웹 사이트를 구축하는 방법 


이 자습서에 필요한 필수 구성 요소 목록은 다음과 같습니다.


컴퓨터에 설치된 Node JS – 아직 설치하지 않았다면 공식 사이트에서 Node.js를 얻을 수 있습니다. 그러면 Node.js와 함께 npm 및 npx도 설치됩니다. 이를 사용하여 프로젝트를 설정하고 개발하는 동안 Frontity 명령을 실행합니다. 원격 WordPress 사이트 – (제 경우에는 친구 블로그 웹 사이트 africanhairinfo.com을 사용하고 있습니다). 그러나 데모 용 Frontity와 함께 제공되는 기본 테스트 사이트를 사용할 수 있습니다. 그래서 당신은 콘텐츠없이 되지 않을 것입니다.


Frontity 설정 


Frontity에는 단일 명령으로 새로운 Frontity 애플리케이션을 만들 수 있는 내장 CLI가 있습니다.


Frontity CLI를 설치하려면 :


npx frontity create my-project


my-project 이름을 프로젝트 이름으로 바꿔야 합니다. Frontity로 시작하는 경우 화성 테마는 작동 방식에 대한 아이디어를 얻는 데 도움이 되는 좋은 선택입니다.


성공적으로 설치 한 후 이메일을 입력하여 Frontity 뉴스 레터를 구독하기로 결정한 다음 아래 명령을 사용하여 새 프로젝트 디렉토리로 이동할 수도 있습니다.


cd my-project

프로젝트 디렉토리에는 다음 구조가 포함됩니다.


1
2
3
4
5
6
7
my-app/
|__ node_modules/
|__ package.json
|__ frontity.settings.js
|__ favicon.ico
|__ packages/
    |__ mars-them



React를 처음 사용하는 경우 이 디렉토리에는 다음과 같은 중요한 Frontity 파일 및 폴더가 포함되어 있습니다.


  • Node_modules : 여기에 모든 개발 종속성이 저장됩니다. 이러한 폴더에 있는 파일을 수정하거나 열 필요가 없습니다.
  • Frontity.setting.js : 여기에서 프로젝트 설정과 필요한 모든 패키지를 정의 할 수 있습니다.
  • Package.json : 이것은 모든 Node.js 프로젝트를 구성하는 데 사용되는 JSON 파일이며 애플리케이션에 필요한 종속성을 저장하는 곳이기도 합니다.
  • Packages :이 폴더에는 테마를 포함한 모든 로컬 패키지가 포함되어 있습니다.

개발 서버를 시작하려면 아래 명령을 실행하십시오.



npx frontity dev


명령을 실행하면 서버가 https://locahost:300을 수신하고 브라우저에서 페이지가 자동으로 열립니다. 처음에 Frontity는 데모 콘텐츠를 표시하는 테스트 블로그에 연결합니다.


Frontity Test Blog 

Frontity Test 블로그


이전에 보여 드린 프로젝트의 루트 디렉토리에 있는 frontity.setting.js 파일을 편집하여 WordPress 웹 사이트에 연결할 수 있습니다.


그렇게 하려면 프로그래밍 텍스트 편집기로 파일을 엽니다. 파일 하단에 있는 @frontity/wp-source 설정 개체를 찾아 API 속성을 웹 사이트 주소로 변경합니다.



frontity.settings.js
const settings = {
  ...,
  packages: [
    ...,
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          // Change this url to point to your WordPress API.
          api: "https://test.frontity.io/wp-json/"
        }
      }
    }
  ]
}


기본적으로 API 속성은 기본 Frontity WordPress 테스트 API를 가리키는 URL 인 "https://test.frontity.io/wp-json/"으로 설정됩니다. wp-json 확장을 사용하여 WordPress 웹 사이트를 가리키도록 주소를 변경해야 합니다. 여기서는 https://africanhairinfo.com/을 가리키도록 API를 변경합니다.


name: "@frontity/wp-source",
      state: {
        source: {
          // Change this url to point to your WordPress API.
          api: "https://africanhairinfo.com/wp-json/"
        }
      }
    }


위의 코드에서 웹 사이트 URL 뒤에 wp-json 확장자를 추가하는 것을 잊지 마세요. 그런 다음 변경 사항을 저장하고 브라우저에서 페이지를 수동으로 새로 고침 하세요. 페이지가 업데이트 되고 웹 사이트에서 가져온 콘텐츠가 표시되어야 합니다.


메뉴 구성 


Frontity가 WordPress 사이트에서 데이터를 가져온 후 내 페이지가 어떻게 보이는지 보여주기 전에 먼저 메뉴에 Frontity의 데모 콘텐츠에 대한 링크가 포함되어 있기 때문에 Frontity 테마에 표시 할 페이지를 만들어야 합니다. 그렇게 하려면 frontity.setting.js에서 @ frontity / mars-theme 설정 개체를 찾고 메뉴 배열을 사이트 구조로 업데이트하십시오.



frontity.settings.js
const settings = {
  ...,
  packages: [
    {
      "name": "@frontity/mars-theme",
      "state": {
        "theme": {
          "menu": [
            [
              // The link to your home page
              "Home",
              "/"
            ],
            [
              // A link to a Contact Us page
              "Contact Us",
              "/contact-us/"
            ],
            [
              // A link to the About Us category
              "About Us",
              "/about-us/"
            ],
            ...
          ],
          "featured": {
            "showOnList": false,
            "showOnPost": false
          }
        }
      }
    },
    ...
  ]
}


위의 코드에서 3 개의 메뉴 항목 (Home, Contact Us, About Us)을 추가했습니다. 예를 들어, https://africanhairinfo.com/about-us/에있는 웹 사이트 about-us 페이지에 링크하려면 메뉴 배열 목록에서 about-us로 연결되는 링크를 만들어야 합니다.


그런 다음 이러한 변경 사항을 저장하고 웹 사이트를 수동으로 새로 고칠 수 있으며 메뉴가 세 페이지 모두에 대한 링크를 업데이트합니다. 이 웹 사이트 (https://africanhairinfo.com/)에서 모든 페이지가 아닌 3 페이지의 콘텐츠에만 액세스하고 있습니다. 그러나 모든 콘텐츠에 액세스하려는 경우에도 동일한 절차입니다.


Updated-Menu 

업데이트 된 메뉴


테마 사용자 지정 


Frontity는 테마를 사용자 지정할 때 WordPress에 다른 접근 방식을 사용합니다. 대신 JS에서 CSS를 사용하며 스타일링을 위해 라이브러리 사이에 Emotion도 함께 제공됩니다. 이를 통해 JavaScript로 CSS 스타일을 작성할 수 있습니다.


Frontity를 처음 설정할 때 Mars 테마를 선택했습니다. 이 테마는 사이트의 모양을 제어하지만 package / mars-theme 폴더에 있는 테마를 편집하여 웹 사이트의 기본 모양을 수정할 수 있습니다.


이 스타일을 지정하려면 package/mars-theme 폴더를 열고 테마를 구성 할 수 있는 index.js 파일과 테마의 일부인 모든 구성 요소가 있는 /components 폴더가 포함 된 /src로 이동합니다.


여기에서 Frontity 테마 스타일을 지정하는 방법에 대해 자세히 알아볼 수도 있습니다.


일반적인 프로세스를 보여주기 위해 웹 사이트 헤더의 배경색을 변경합니다. 이렇게 하려면 index.js에서 <HeadContainer> 구성 요소를 찾고 배경색을 빨간색으로 변경합니다.


const HeadContainer = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: red;
`;

변경 사항을 저장하면 새 색상이 즉시 적용됩니다.


Changes-Applied 

변경 사항 적용


테마 파일 및 폴더를 탐색하여 웹 사이트가 돋보이도록 변경 사항을 수정할 수 있습니다.


웹 사이트 게시 


웹 사이트에 기능과 스타일을 추가 한 후 이제 프로덕션에 배포 할 수 있습니다. 새 사이트가 얼마나 쉽게 발판이 되고 개발 중에 실행 되는지와 비슷합니다. 프로젝트의 루트에서 다음 명령어를 실행하여 프로덕션 용 번들을 만듭니다.


npx frontity build


그러면 React 애플리케이션과 Frontity (Node.js) 서버가 포함 된 빌드 폴더가 생성됩니다. 이 폴더는 Node.js 애플리케이션을 제공하도록 준비된 모든 호스팅에 배포 할 수 있습니다. 예를 들어 npx frontity serve는 표준 Node.js 애플리케이션과 같은 프로젝트를 실행하거나 CDN (Content Delivery Network) 및 서버리스 서비스에 업로드하는 데 사용할 수 있습니다.


그러나 AWS lambda, Netlify 또는 Google Functions를 사용할 수도 있지만 Frontity는 서버리스 솔루션으로 Vercel을 권장했습니다.


이렇게 하려면 Vercel을 사용하고 다음 단계를 따르세요. https://docs.frontity.org/deployment/deploy-using-vercel


또한 앱 루트 디렉터리에 다음 파일이 포함 된 vercel.json 파일을 만드는 것을 잊지 마십시오.



{
  "version": 2,
  "builds": [
     {
       "src": "package.json",
       "use": "@frontity/now"
     }
  ]
}


Vercel은 온라인에서 사이트를 확인할 수 있도록 your-project-name.vercel.app과 같은 기본 도메인을 제공합니다. 사용자 정의 도메인에서 사이트를 구성 할 수도 있습니다.


이제 웹 사이트가 게시 되어 누구나 볼 수 있습니다.


결론 


이 튜토리얼에서 우리는 Frontity를 사용하여 WordPress와 React로 웹 사이트를 구축하는 방법을 보았습니다. Frontity는 헤드리스 WordPress 웹 사이트를 만드는 데 일반적으로 필요한 워크로드를 줄여 WordPress-React 개발을 더 쉽게 만듭니다.


도움이 필요한 경우 Frontity 주변에 훌륭한 커뮤니티가 있습니다.


https://soshace.com/building-a-wordpress-website-with-react-frontity/