이게 정확한 방법인지 확실한 문서화된 자료는 찾지 못했지만, 소스 코드를 뜯어 보다가 발견한 방법이다. 적당히 기록해 둔다. 공식적인 방법을 찾으면 수정하기 바란다.
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 컴포넌트를 수정하는 경우, 수정된 상황을 잘 감지는 하는 것 같지만 적용되지가 않는다. 왜 그런지는 아직 잘 모르겠다. 리액트가 변경된 컴포넌트를 렌더링하지 않아서 그런건지, 아니면 설정이 잘못된 것인지. 이것은 차차 알아가도록 하자.
