지난 주에 워드프레스 5.2 “Jaco”가 출시 되었죠?
이번 판올림은 새로운 기능 추가 보다는 기존 워드프레스 사이트의 시스템 안정성을 위한 노력이 돋보이는 판올림입니다. 예를 들면 Site Health Check가 강화되거나 PHP 오류 방지(Error Protection) 기능이 추가된 점 등이 그렇죠.
워드프레스에서 자바스크립트(특히 ESNext)를 다룰 때 필요한 빌드 환경을 좀 더 쉽게 구성할 수 있도록 도와주는 @wordpress/scripts 패키지 가 업데이트되었다는 내용입니다.
webpack과 Babel 설정이 패키지 속에 포함되어 이제 워드프레스 개발자는 이 패키지만 설치하면 별다른 설정 없이 바로 자바스크립트 개발 환경을 갖출 수 있게 된다는 말입니다.
With the release of Gutenberg 5.3, the @wordpress/scripts package was updated to include webpack and Babel configurations. The update makes setting up an ESNext development environment much easier for building blocks and creates a standard method for developers to set up their plugin.
마치 React 개발자들이 Create React App 으로 손쉽게 개발 환경의 그루터기를 구성하듯 이제 워드프레스 개발자들은 이 @wordpress/scripts 패키지 로 쉽게 워드프레스 개발 환경을 만들 수 있게 된 것이죠.
사용법은 이렇습니다.
플러그인을 만들거나 테마를 만들 때 프로젝트 디렉터리에서 이 패키지를 추가합니다.
$ npm install --save-dev @wordpress/scripts
그런 다음, package.json 파일에 다음을 추가하고,
"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build"
},
이제 패키지에서 제공하는 이 wp-scripts 명령으로 개발 환경에서 빌드하거나 프로덕션 환경에 빌드할 수 있습니다. 별도로 webpack.config.js 를 설정하거나 .babelrc 를 따로 만들 필요 없이 말이죠.
$ npm start (개발환경) 또는 $ npm build (프로덕션환경)
이 패키지의 디폴트 webpack 설정값 은 이렇습니다.
이 밖에도 다양한 옵션을 제공하는데 자세한 내용은 패키지 문서 를 참고하면 됩니다.
이걸 어디에 어떻게 쓸가요?
주로 블록 개발에 많이 사용되겠지만, (블록 아닌) pure React나 jQuery 같은 여타 다른 자바스크립트 개발 시에도 똑같이 적용 가능합니다. 그 타겟이 워드프레스라면요.
예를 들어 테마 개발자가 내 테마 속에서 React를 사용해야 한다면, 다음과 같이 워드프레스의 wp_enqueue_script 함수로 빌드 디렉터리를 추가해 줄 수 있을 것입니다.
<?php
function my_theme_enqueue_scripts() {
wp_enqueue_script(
'my-script',
get_template_directory_uri() . '/build/index.js',
array('wp-blocks'),
'',
true
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
만약 어떤 테마에서 새 (구텐베르크) 블록을 하나 추가하고자 한다면 아래와 같이 쓸 수 있겠죠.
const { registerBlockType } = wp.blocks;
registerBlockType( 'myguten/test-block', {
title: 'Basic Example',
icon: 'smiley',
category: 'layout',
edit: () => <div>Hola, mundo!</div>,
save: () => <div>Hola, mundo!</div>,
} );
물론 React를 직접 액세스할 수도 있습니다. 알다시피 구텐베르크 블록 = 리액트 컴포넌트니까요!
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
앞서 wp_enqueue_script 함수에서 ‘wp-blocks’ 을 의존관계(dependency)로 적용했기 때문에 별도로 React 패키지를 import 하거나 할 필요도 없습니다. 그냥 바로 쓰면 되죠. (참고로, @wordpress/scripts 패키지 에서 React와 ReactDOM을 포함한 몇몇 자바스크립트 라이브러리들은 webpack externals 로 설정되어 있습니다)
요즘 워드프레스 개발은 PHP만 갖고 하기엔 버겁습니다. 플러그인이건 테마 개발이건 마찬가지죠. 반은 PHP고 반은 자바스크립트라 할 정도로 자바스크립트 비중이 커지고 있습니다. 웹개발에서 프론트엔드의 비중을 생각하면 당연한 말이고, 특히 워드프레스가 5.0 버전부터 블록 에디터(“구텐베르크”)를 기본으로 채택함에 따라 자바스크립트 의존성이 더욱 커진 탓도 있겠죠.
지금껏 통상적으로 워드프레스 개발자들은 저마다 자신만의 자바스크립트 빌드 환경을 만들어 사용해 왔었습니다. Grunt나 Gulp로 빌드 워크플로(workflow)를 만들거나 아니면 Webpack을 직접 설정해서 사용해 왔었는데, 이제 이 패키지 덕에 좀더 편하게 자바스크립트를 다룰 수 있게 되었네요.
워드프레스에서 자바스크립트 빌드 ‘표준’이 생긴 셈이죠. 👍
