블록 에디터가 워드프레스 생태계에 주는 여파는 꽤 크다. 단순히 쓰기 편한 새로운 에디터가 등장한 것 뿐만이 닐 것이다. 이제 새로운 프론트엔드 개발 기법들을 적극적으로 반영해야 한다.
리액트는 새로운 워드프레스 코어 코드의 중요한 의존성이 되었다. 물론 필수는 아니겠지만 개발자는 보다 리액트를 잘 이해해야 할 필요가 있다. 아마 꽤 오랫동안은 그 영향력이 유지되겠지만 점차 jQuery는 폐기될 것이다. 정말 많은 요소들이 변화하고 있으며, 나 같은 개발자는 따라가기 벅차다.
이번 기회에 기존의 기술과 대두되는 새로운 기술들을 어떻게 사용해야 할지 좀 정리해야 할 필요가 있다고 생각했다. 새로운 기술들은 아직 사용하기 익숙치 않아 계속 실무에 투입하기 어려웠다. 하지만 이제 점점 사용해야 하지 않으면 안 될 시기가 온 것 같다. 고객들도 점점 구텐베르크를 위시한 새로운 프론트엔드 개발에 대한 사용 경험을 쌓아 왔고, 나도 그에 맞추지 않으면 안 된다고 생각한다.
우선 블럭 에디터나 리액트를 플러그인 개발에서 사용하기 위한 절차? 방법들에 대해 정리해보자. 대략 알고 있지만, 숙련도가 높지 않은 탓에 자연스럽게 되지 않는다.
플러그인 기본 셋업
기존과 동일하게 플러그인 메인 파일에 헤더를 생성한다. 이러면 코어는 플러그인을 인식한다. 그러나 이제는 자바스크립트 기반의 개발 환경을 위해 package.json 파일의 추가를 반드시 해 줘야 한다.
package.json은 NPM으로 가능하지만, 나는 yarn을 더 선호한다. 혹시 개발하는 시스템에 yarn이 설치되지 않았다면 yarn 설치하기 페이지를 보고 우선 진행하기 바란다.
Yarn이나 NPM이 설치되었으며 ‘npm init’ 혹은 ‘yarn init’으로 package.json을 시작하자. package.json은 단순한 JSON 파일이므로 스키마를 잘 안다면 수동으로 만들어도 무방하다.
아래 JSON 일부분은 라이센스와 기본 빌드 스크립트를 지정하는 예제이다. 아마 이 셋업은 자주 반복될 것이다.
{
...
"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build"
},
...
"license": "GPL-2.0-or-later"
}
@wordpress/scripts 설치
솔직히 내가 프론트엔드 프레임워크에서 매우 짜증내는 부분 중 하나이다. 바로 과도한 설정 홍수. 프론트를 위한 온갖 잡다한 부분이 package.json을 위시한 별별 js 파일 설정에 뒤범벅이 되어 있는 것. 나도 한 사람의 개발하는 사람으로서 그런 이유와 결과에 대해 이해하지만, 내 개인적으로는 덕지덕지 붙어있는 이런 잡다한 설정 덩어리들은 괴물같아 싫다.
물론 더욱 정밀한 설정, 고급 설정을 하려면 그런 세세한 설정이 없으면 안되는 것은 알지만… 적어도 나한테는 프론트엔드 개발에 큰 장벽이 된다.
그래도 좀 다행이다. 이러한 개발 설정들은 한 번 잘 설정해 두면 잘 복사해서 재사용할 수 있다는 점이고, 워드프레스 코어 개발자들은 아예 그 재사용성을 활용해 그러한 설정마저 하나의 패키지로 묶어 놨다는 사실. 보다 세세한 설정에 눈뜨게 될 때 까지는 훌륭한 조력자가 될 것이다.
이 조력자는 yarn add --dev @wordpress/scripts라는 한 줄의 명령어로 쉽게 설치된다. 그리고 위 package.json 의 scripts 부분에 미리 설정을 해 두었으니 npm start, npm build 명령과 연계하여 사용하면 된다. 보다 복잡한 설정은 문서를 참고하면 된다.
리액트로 Hello, World! 시작하기
블록 에디터를 위한 커스텀 블록 생성 전에 먼저 그냥 먼저 리액트를 사용해 보자. 최초의 예제는 언제나 ‘Hello, World!’니까 그것부터 시작해 보자.
예제는 github에 작성했고, 앞으로도 거기에 내용을 업데이트할 예정이다. 코드가 워낙 간단하니 디테일한 설명은 생략한다. 자세한 설명은 소스 코드에 주석으로 대신한다. 여기서는 중요한 포인트 몇가지만 기술하고자 한다.
- 리액트가 프론트엔드 부분의 마크업까지 작성하게 되므로, PHP 코드 자체에서는 그다지 많은 할 일이 없다. PHP 코드는 껍데기라고 느껴질 정도로.
- 중요. 보통 ‘depencencies’에 ‘react’, ‘react-dom’를 넣게 된다. 그러나 워드프레스에서는 ‘devDependencies’에 둘을 넣는다. 워드프레스 코어 자체에 리액트가 내장되어 있고 wp-script가 서로 다른 버전의 리액트가 중구난방하지 않도록 제어하기 때문이다. 물론 스크립트가 알아서 잘 처리하니 그냥 dependencies에 넣어도 문제가 되지는 않는다.
- 리액트 뿐 아니라 블록 에디터를 위해 만들어진 여러 패키지, 예를 들어 UI 요소들 같은 노드 패키지들도 코어에 이미 지정되어 있다면 코어의 것을 쓰지, node_modules로 임의 설치된 것을 사용치 않는다. 즉, 패키지 설치는 단지 코드를 참조하기 위함으로 알아두자.