워드프레스 플러그인에서 HMR 사용하기

이게 정확한 방법인지 확실한 문서화된 자료는 찾지 못했지만, 소스 코드를 뜯어 보다가 발견한 방법이다. 적당히 기록해 둔다. 공식적인 방법을 찾으면 수정하기 바란다.

H.M.R (Hot Module Replacement)은 정말 쓸만하다. 그래서 워드프레스에서 wp-script를 활용한 리액트 컴포넌트 개발할 때 사용하고자 한다.

스크립트 설치

우선, 워드프레스의 공식 스크립트를 활용한다.

pnpm add -D @wordpress/scriptsCode language: Bash (bash)

포스트 작성시 @wordpress/scripts 의 버전은 23.0.0 이다.

명령어 등록

package.json 에서 ‘scripts’ 에 ‘start’ 명령어를 등록한다.

{
  ...
  "scripts": {
    "start": "NODE_ENV=development wp-scripts start --hot",
    "build": "wp-scripts build"
  },
  ...
}Code language: JSON / JSON with Comments (json)

이 때 ‘–hot’ 파라미터를 붙이는 것이 필수. start에는 위 예시처럼 NODE_ENV 환경 변수를 ‘development’로 맞춘다.

WP-CONFIG 상수 등록

define( 'WP_ENVIRONMENT_TYPE', 'development' );
define( 'SCRIPT_DEBUG', true );Code language: JavaScript (javascript)

NPM 페이지에 따르면 ‘SCRIPT_DEBUG’를 설정하라고 되어 있다.

WEBPACK 설정 수정

const defaultConfig = require('@wordpress/scripts/config/webpack.config')
const isProduction = process.env.NODE_ENV === 'production';

if (!isProduction) {
    module.exports = {
        ...defaultConfig,
        devServer: {
            ...defaultConfig.devServer,
            allowedHosts: [
                '127.0.0.1',
                'localhost',
                '.dev.site', // NOTE: match your domain.
            ],
            hot: true
        }
    }
} else {
    module.exports = defaultConfig;
}Code language: JavaScript (javascript)

보통 localhost나 127.0.01 같은 IP 그대로는 개발하지 않으므로 주석으로 ‘NOTE’ 친 부분을 개발 도메인으로 설정한다. 앞에 ‘.’ 이 붙어 와일드카드가 적용된다. 그러므로 이 부분을 변경하기 위해 플러그인의 루트에 webpack.config.js 를 넣어 설정을 오버라이드한다.

코드 작성

리액트 코드를 작성한다. 예를 들어, 나의 index.js의 최상위 콤포넌트는 아래처럼 작성했다.

import React from 'react';
import ReactDOM from 'react-dom';
import Dummy from "./dummy";

function App(props) {
    const {title, you} = props;

    return (
        <div>
            <p>Oh! Hello, new world!</p>
            <p>You are {title}. {you}.</p>
            <Dummy />
        </div>
    )
}

const wpHmrSample = Object.assign({
    you: 'Unknown',
    title: '',
}, window.hasOwnProperty('wpHmrSample') ? window.wpHmrSample : {})

ReactDOM.render(<App {...wpHmrSample} />, document.getElementById('wp-hmr-sample'))

if (module.hot) {
    module.hot.accept();
}Code language: JavaScript (javascript)

스크립트 의존성

wp-scripts에 의해 생성된 build/index.js 파일은 ‘wp-react-refresh-runtime’ 스크립트에 의존성을 가진다. 이를 확인하려면 build/index.asset.php 파일을 열어 보면 된다.

구텐베르크 플러그인을 활성화하거나, 혹은 활성화 하지 않아도 해당 스크립트의 위치를 찾아 내 플러그인에서 강제로 넣어버린다. 나는 후자를 취했다. 어쨌든 두 방식 다 구텐베르크 플러그인은 설치된 상태여야만 한다.

결과 비디오와 남은 문제

작성한 플러그인 샘플 코드는 github에 올려 두었다. 그리고 실행 결과도 캡처하여 비디오로 남겨 둔다.

아직 잘 모르는 부분까지 같이 비디오로도 남겼다. 영상 후반에 보면 App 컴포넌트 안에 있는 Dummy 컴포넌트를 수정하는 경우, 수정된 상황을 잘 감지는 하는 것 같지만 적용되지가 않는다. 왜 그런지는 아직 잘 모르겠다. 리액트가 변경된 컴포넌트를 렌더링하지 않아서 그런건지, 아니면 설정이 잘못된 것인지. 이것은 차차 알아가도록 하자.