WordPress용 Gutenberg 이면의 기술을 마스터하기 위한 리소스

개발자가 WordPress에서 직면해야 하는 가장 큰 문제 중 하나는 새로운 블록 편집기 이면의 새로운 프로그래밍 패러다임에 적응하기 위해 지식을 재활용하는 것입니다. 구텐베르크의 주요 변경 사항은 사용된 기술의 새로운 스택입니다. 일반적으로 WordPress 개발자는 JavaScript로 작성된 사소한 부분과 함께 주로 PHP를 사용하여 플러그인을 만들었습니다. 이제 핵심 도구는 JavaScript이며, PHP는 플러그인과 테마의 구조를 만들기 위한 기초로 남겨둡니다.

이것이 사실이 아니며 PHP가 WordPress에서 여전히 긴 여정을 가지고 있다고 생각할 수 있습니다. 변화는 항상 받아들이기 어렵기 때문에 나는 당신을 비난하지 않습니다. 그러나 나는 당신이 틀렸다고 생각합니다. JavaScript는 더 이상 WordPress의 미래가 아니라 현재입니다. 그리고 자신의 위치를 ​​유지하려면 지금 바로 대처해야 합니다.

다행스럽게도 그들은 우리가 자바스크립트를 깊이 배워야 한다고 주장하지만, 제 생각에는 그렇지 않습니다. 모든 튜토리얼에서 가르칠 수 있는 몇 가지 최소 사항을 아는 것만으로도 충분합니다. 이 기사 전체에서 설명할 리소스 덕분에 구텐베르크 개발을 시작하는 데 필요한 다른 모든 것을 빠르게 배울 수 있습니다.

자바스크립트 배우기

새로운 프로그래밍 언어를 배울 때 가장 먼저 알아야 할 것은 문법을 이해하는 것입니다. 이런 식으로만 프로그래밍을 시작할 수 있습니다. 이 작업을 수행하면 생성을 시작할 모든 준비가 된 것입니다.

이전에 JavaScript로 아무것도 해본 적이 없다면 다음은 시작하는 데 도움이 되는 다양한 형식의 자습서입니다.

• JavaScript 언어 기초: Zac Gordon의 비디오 형식 무료 과정.
• JavaScript 30: 이 무료 코스에서 Wes Bos와 함께 30일 동안 매일 챌린지를 하며 배우세요.
• JavaScript에 대한 재소개: Mozilla 직원이 JavaScript에 대해 간략히 소개합니다.
• JavaScript For Cats: 고양이 유머 감각이 가미된 JavaScript에 대한 또 다른 소개입니다.
• Exercism.io: JavaScript로 연습하고 멘토가 평가할 수 있도록 솔루션을 업로드할 수 있는 무료 웹입니다.
• JSBooks: 책으로 배우는 것을 선호하는 사람이라면 여기에서 많은 책을 무료로 이용할 수 있습니다.

반대로 JavaScript를 사용해본 경험이 있다면 함수에 대한 고급 개념, promise 및 async/await를 사용한 비동기 실행, 간단히 말해 ESNext와 관련된 모든 것을 학습하여 지식을 확장하십시오.

JavaScript 교육의 하루는 WordPress 블록 편집기 위에서 개발해야 하는 것과 관련된 모든 것을 쉽게 이동할 수 있는 기본 지식을 습득하기에 충분해야 합니다.

React와 Redux 배우기

JavaScript 외에도 WordPress 블록 편집기에서 개발하려면 React 및 Redux에 대한 특정 개념이 필요합니다.

다들 이렇게 말하겠지만 사실은 그렇지 않습니다. React나 Redux에 대한 개념이 없어도 Gutenberg용으로 개발할 수 있습니다. 물론 작동 방식과 용도를 안다면 더 좋을 것입니다.

React와 무엇보다 JSX

피할 수 없는 것은 JSX 구문이 React 내에서 요소를 생성하기 위해 어떻게 작동하는지 아는 것입니다. 이 요소는 구성 요소의 인터페이스를 정의하는 데 사용할 것입니다(구텐베르크 블록이든 편집기 내 보기이든).

Product 및 ShoppingList 구성 요소에 대한 인터페이스를 정의한 다음 Gutenberg 블록에서 사용한다고 상상해 보십시오. 표준 표기법을 사용하면 Gutenberg에서 제공하는 wp.element.createElement() 함수를 사용하여 다음과 같이 수행합니다.

반면에 HTML과 유사한 표기법에 불과한 render() 메서드 내에서 JSX를 사용하면 다음과 같은 내용을 갖게 됩니다.

JSX를 사용하면 코드가 훨씬 간단하고 읽기 쉽기 때문에 구성 요소 작성 및 재사용이 간소화됩니다. 보시다시피, 이전 예제에서 우리는 React에 대한 개념 없이 JSX를 처리하는 방법만 알고 마치 초능력을 가진 HTML인 것처럼 사용하여 React 구성 요소를 만들고 있습니다. 또한 Gutenberg의 기존 구성 요소를 사용할 수도 있습니다. 공식 문서에도 링크된 이 뷰어에서 볼 수 있습니다.

단 하나의 문제가 있습니다. JSX 표기법이 모든 브라우저가 해석할 수 있는 일반 코드로 변환되도록 코드를 Babel로 변환해야 합니다. 그러나 이것은 WebPack을 사용하여 자동으로 할 수 있으므로 드라마가 아닙니다.

애플리케이션 상태를 유지하기 위한 Redux

반면에 Redux에 대해 들어본 적이 있을 것입니다. JavaScript 애플리케이션에서 상태를 저장하고 관리하는 도구입니다. 다시 한 번, 사용법을 배우고 싶다면 이 Wes Bos 동영상을 추천하지만 꼭 필요한 것은 아닙니다.

자신만의 데이터 저장소를 생성해야 하는 경우 Redux를 사용하지 않고 Gutenberg에 포함된 @wordpress/data 패키지를 사용합니다. 이 패키지는 내부적으로 Redux를 사용하지만 그것은 중요하지 않습니다. 또한 최소한 초기 단계에서는 필요하지 않은 복잡한 사용 사례에 대해 이야기하고 있습니다. 그러니 지금은 잊어버리세요.

NPM, WebPack, Babel, PostCSS 및 ESLint

JavaScript와 React 및 JSX의 기본 개념 외에도 WordPress에 이미 존재하는 새로운 시대를 위해 다음 기술을 알아야 개발자 작업이 훨씬 간단하고 고도로 자동화됩니다.

• NPM: JavaScript용 종속성 관리자. 필요한 종속성을 정의하고 npm install 하십시오.
• WebPack: JavaScript 번들러. 처음에는 구성하기 쉽지 않지만 일단 구성하면 JavaScript 파일 관리 작업(트랜스파일, 축소 등)이 용이해집니다.
• Babel: 현재 이 언어의 다음 버전 구문을 사용할 수 있는 JavaScript 컴파일러.
• PostCSS: Babel과 동일하지만 CSS 스타일시트용입니다.
• ESLint: JavaScript 사용 및 스타일 오류를 감지하여 코드를 작성하는 동안 방지할 수 있습니다.

나는 이미 여기에서 이러한 기술의 대부분에 대해 이야기했습니다. 그러나 곧 다른 기사를 작성하여 실제 사례에서 사용할 수 있도록 WordPress 개발 프로젝트에 통합하는 방법을 설명하겠습니다.

구텐베르크를 위한 새 블록을 만드는 방법

이제 가장 중요한 부분인 WordPress 편집기용 새 블록 생성을 시작하는 데 필요한 것입니다.

자신의 블록 생성을 시작하기 위해 가장 먼저 해야 할 일은 wp.blocks.registerBlockType() 함수를 마스터하는 것입니다. 공식 Gutenberg 가이드에서 이 기능에 대한 가장 완전한 문서를 찾을 수 있습니다.

이 함수의 인수는 고유해야 하는 블록 이름이 포함된 문자열과 블록 구성이 포함된 객체로, 가장 중요한 부분은 블록의 save 및 edit 기능입니다. 이 기사에서 이미 간략하게 설명했습니다.

이것이 너무 복잡해 보인다면 create-guten-block 이라는 Ahmad Awais 툴킷을 사용할 수 있습니다. 이렇게 하면 첫 번째 블록을 만드는 데 필요한 모든 종속성이 있는 폴더 구조가 생성됩니다. 다음 비디오에서 사용법에 대한 자습서를 볼 수 있습니다.

마지막으로 이것이 여전히 너무 복잡해 보인다면 마지막 옵션을 사용할 수 있습니다. 플러그인 Advanced Custom Fields(줄여서 ACF라고도 함)를 확실히 알고 있습니다. 글쎄, 이 플러그인을 사용하면 JavaScript에 대한 아이디어가 없어도 Gutenberg용 블록을 만들 수 있습니다.

하지만 나는 당신에게 그것을 설명하지 않을 것입니다, 나는 Mauricio Gelves가 그것을 하게 할 것입니다. WordPress.tv(스페인어)에 이미 있는 WordCamp Zaragoza 2019에서 이 주제에 대한 그의 프레젠테이션을 확인하세요.

WordPress에서 블록 편집기를 확장하는 방법

새 블록을 만드는 것 외에도 Gutenberg로 할 수 있는 다른 많은 작업이 있습니다. 예를 들어, Gutenberg 내에서 플러그인을 만들어 편집기 오른쪽에 원하는 모든 옵션 패널을 추가할 수 있습니다. 이것에 대한 가장 좋은 점은 공식 WordPress 문서에 여기에서 수행할 수 있는 작업에 대한 구체적인 예와 함께 이 완전한 자습서가 포함되어 있다는 것입니다.

이 외에도 기존 블록에 새 스타일을 추가하여 WordPress 편집기를 확장하고, 블록에 더 많은 사용자 정의 설정을 추가하거나, 블록을 제거하거나 숨기거나, 편집기에서 가질 수 있는 블록 범주를 필터링할 수 있습니다.

여기에서 찾을 수 있는 개발자 및 디자이너를 위한 Gutenberg 핸드북에 있는 공식 문서를 살펴보는 것이 좋습니다. 많은 정보가 있으며 이것이 귀하가 사용할 수 있는 최고의 리소스 중 하나이기 때문에 안심하십시오.

Unsplash의 Christian Fregnan 의 추천 이미지 .