Direflow - WordPress와 React의 통합

다이어플로우란?

Direflow는 구성 요소를 작성하는 React 방식을 지원하는 프레임워크입니다. direflow를 사용하여 애플리케이션을 개발할 때 얻는 최종 패키지는 웹 구성 요소입니다.

왜 Direflow인가?

웹 구성 요소 개발에 사용할 수 있는 다른 오픈 소스 프레임워크가 있지만 특정 학습 비용이 있는 고유한 DSL(도메인 특정 언어) 세트와 함께 제공됩니다. 또한 스택이 React인 경우 이 특정 스택에 필요한 모범 사례가 부족합니다.

또한 WordPress에서 사용할 수 있는 기성품 플러그인을 사용할 수도 있지만 때로는 자신만의 스타일, 논리 및 흐름으로 사용자 지정 위젯을 만들 수 있는 유연성이 필요할 때 Direflow가 도움이 될 것입니다.

웹 구성요소란 무엇입니까?

기본적으로 HTML, CSS 및 JavaScript 기반 논리의 캡슐화입니다. 특정 JS 프레임워크에 의존하지 않고 최신 브라우저에서 제공하는 기본 기술을 활용합니다. 읽기this article는 웹 구성 요소에 대한 자세한 정보를 제공합니다.

Direflow - 설정

direflow 설정의 기본 구조는 아래와 같습니다. 자바스크립트 구조입니다. TypeScript를 선택하면 추가 파일이 있고 확장자는 .ts입니다.

응용 프로그램을 만드는 중요한 명령

npm i -g direflow-cli

direflow 생성

cd

npm 설치

npm 시작

애플리케이션 생성에 대한 자세한 내용은 direflow.io을 참조하십시오.

애플리케이션을 만들고 빌드했으면 WordPress의 루트 디렉터리로 이동하여 "apps"라는 새 폴더를 만들고 구성 요소의 하위 폴더를 만들고 빌드 파일(.js)을 붙여넣습니다.

WordPress 서버에 대한 액세스 권한이 없는 경우 WordPress - WP File Manager에서 플러그인을 사용할 수 있습니다. 이 플러그인을 사용하면 폴더 구조에 액세스하고 새 폴더를 만들 수 있습니다. 새로 생성된 폴더에 빌드 파일을 업로드합니다.

이제 아래와 같이 WordPress 페이지를 만듭니다.



아래와 같이 페이지에 블록(Custom HTML)을 추가합니다.



코드에서 구성해야 하는 실제 값을 입력하여 아래 두 줄의 코드를 추가합니다.

<script src="/apps/componentName/componentBuild.js"></script>
<custom-tagname>
</custom-tagname>

변경 사항이 저장되도록 페이지를 업데이트합니다. 이제 페이지를 탐색하면 WordPress 웹 사이트에서 렌더링된 웹 구성 요소를 볼 수 있습니다.

자세한 내용 및 샘플 웹 구성 요소 생성은 this article을 참조하십시오.

읽어 주셔서 감사합니다! 이 짧은 정보가 흥미로웠기를 바랍니다.