WordPress용 Frontity React Framework 설정 이해

Frontity는 빠른 WordPress 웹사이트를 만들기 위한 최신 최신 프론트엔드 프레임워크입니다.

WordPress는 오랫동안 가장 인기 있는 콘텐츠 관리 시스템이었습니다. 그것은 인터넷 웹사이트의 30% 이상을 차지할 뿐만 아니라 WordPress 생태계를 살아있고 강력하게 유지하는 기고자들의 거대한 커뮤니티를 자랑합니다.

WordPress는 주로 PHP 기반 서버 소프트웨어입니다. 주로 PHP 기반 플러그인의 형태로 제공되는 수천 개의 사용자 정의 개선 사항 및 WordPress 확장 기능이 있습니다. 따라서 PHP가 아닌 프레임워크를 WordPress, 특히 웹 개발에서 Frontend 영역을 빠르게 점유하고 있는 Javascript 프레임워크와 통합하려는 많은 시도가 있었던 것은 놀라운 일이 아닙니다.

실제로 차트를 오르고 있는 프레임워크 중 하나는 Frontity라는 WordPress용 React.js 프레임워크입니다. 스페인에 기반을 둔 스타트업에 의해 개발되었습니다. Frontity를 위한 개발은 몇 년 동안 진행되었습니다. 하지만 최근 워드프레스(WordPress) 뒤의 회사 주도로 100만 유로(약 10억 원)를 모금해 화제를 모았다. 자동 그리고 벤처캐피털 회사 케이펀드. 그 이유를 이해하려면 먼저 Frontity 프레임워크가 무엇인지, 어떤 이점이 있는지 이해하는 것이 중요합니다.

프론티티 란 무엇입니까?

Frontity에 대해 배우기 전에 WordPress의 기본 아키텍처를 아는 것이 필수적입니다. 아시다시피 WordPress는 PHP 기반 서버 소프트웨어입니다. 요청을 처리하려면 Apache 또는 Nginx와 같은 서버 소프트웨어가 필요하고 데이터(게시물, 페이지, 사용자 등) 저장을 위해서는 MySQL과 같은 데이터베이스 소프트웨어가 필요합니다.

워드프레스 아키텍처

열리면 WordPress 웹 사이트의 기본 페이지를 호출합니다. index.php 백엔드에 파일을 추가하면 홈 페이지에 대한 HTML, CSS 및 JS가 반환되며, 이는 브라우저에 표시됩니다. 따라서 PHP는 웹사이트의 CGI(Common Gateway Interface) 역할을 하므로 프런트엔드에 대한 모든 종류의 개선 사항은 PHP 기반이어야 합니다.

프론티티 아키텍처

Frontity는 반응 기반ed 프레임워크, 먼저 React JS에 대해 조금 이야기하겠습니다. React는 Facebook에서 개발 및 게시한 프론트 엔드 자바스크립트 프레임워크입니다. 빠르고 안정적이며 반응이 빠른 UI를 쉽게 생성할 수 있어 인기가 높습니다. React는 Node JS 모듈로 작동하므로 React를 사용하는 웹사이트는 Node JS 서버를 기반으로 해야 합니다.

이제 React와 같은 순수 Javascript 프레임워크를 사용하여 프런트엔드를 향상시키려는 경우, 즉 사용자 정의 테마를 생성하는 것은 번거로운 일입니다. 그 이유는 React와 같은 프레임워크가 자체 서버를 시작하는 Node와 함께 작동하기 때문입니다. 그리고 앞서 언급했듯이 WordPress는 백엔드에서 PHP CGI 서버와 함께 작동합니다. 따라서 React for WordPress를 사용하여 사용자 정의 테마와 UI를 구축하는 직접적인 방법은 없습니다.

그러나 WordPress 데이터베이스에서 원격으로 데이터를 검색하는 방법이 있습니다. WP 버전 4.7 이상부터 핵심 WordPress에 완전히 통합된 WordPress REST API를 사용하여 수행할 수 있습니다. WordPress 데이터를 원격으로 가져올 수 있다는 것은 가져온 데이터를 원하는 대로 표시할 수 있음을 의미합니다. 사용자는 오랫동안 REST API를 사용하여 데이터베이스에서 직접 WordPress 데이터에 액세스할 수 있는 맞춤형 앱, 웹페이지를 개발해 왔습니다. 이러한 유형의 콘텐츠 관리 시스템(CMS)은 목이 없는 CMS.

Frontity는 바로 이 개념을 기반으로 합니다. REST API를 통해 WordPress 데이터베이스에 연결하고 검색된 데이터의 구문 분석 및 구성을 처리합니다. 웹 사이트를 표시하는 데 사용할 테마는 사용자에게 달려 있습니다. React를 기반으로 하기 때문에 모든 React 테마를 웹사이트에 사용할 수 있습니다. 원하는 경우 사용자 정의 테마를 개발할 수도 있습니다. 워드프레스의 PHP 기반 프론트 엔드는 여전히 제작자/관리자가 콘텐츠를 생성하거나 설정을 변경하는 데 사용됩니다. 그러나 Frontity 기반의 프런트 엔드는 웹 사이트의 메인 페이지로 사용됩니다.

따라서 Frontity 설정에는 두 개의 서버가 필요합니다. 하나는 REST API를 실행하고 WordPress 데이터를 반환하는 WordPress 서버이고, 두 번째는 Frontity를 실행하여 REST API를 호출하고 React를 사용하여 데이터를 표시하는 Node JS 서버입니다. .

앞으로의 길?

WordPress 뒤에 있는 회사가 100만 유로를 모금하고 React가 WordPress에 풍부한 사용자 경험을 제공함에 따라 Frontity가 현대 WordPress 기반 웹 사이트를 위한 길이라고 해도 과언이 아닙니다. 워드프레스 UI는 계속해서 콘텐츠 생성을 위한 대시보드로 사용되며 디스플레이 부분은 Frontity 서버로 이동됩니다.

Frontity에 대한 자세한 내용은 여기에서 확인할 수 있습니다. WordPress 웹사이트가 있고 Frontity를 사용해보고 싶다면 여기에 언급된 단계에 따라 수행할 수 있습니다.