[카테고리:] 워드프레스 개발

Redux는 어플리케이션의 상태 관리를 위한 라이브러리이다. 하도 이 리덕스를 리액트랑 같이 엮어 들었던 탓에 리액트 라이브러리인줄 알았으나, 그렇지는 않더라. 그냥 독립적으로도 사용 가능하다.

얼마 전에 상태 변화가 빡센 웹 앱을 작성한 프로젝트가 있었는데 이런저런 문제로 인해 jQuery 스타일로 매우 빡빡하게 만들었다. 어떻게는 완료하였으나 Redux를 조금 더 일찍 알았더라면 보다 깔끔하고 완성도 높은 결과물이 나왔을걸 하고 아쉬움이 들었다.

이번에도 리포지터리에 결과물을 업데이트한다. 물론 Redux는 React를 위한 여러 세련된 방법이 있기는 한데, 나는 그냥 hello, world! 같은 것을 하고 싶을 뿐. 핵심적인 기능만 이용해 단순한 장난감을 하나 만들어 보았다.

워드프레스에서 작성했으므로 결과물을 보려면 숏코드 wes07을 사용해야 한다. 프로그램은 PHP 스크립트로부터 시작값을 받아 출력한다.

이 출력값은 +/- 버튼을 눌러 증가, 감소시킬 수 있다. 단순하다. 이 정도면 React.Component 안에서 this.state 객체 안에서 상태 관리를 할 수 있을 정도로 단순하지만, 이번에는 Redux에게 양보해 보자.

초간단 reducer이다.

function reducer(state = {value: 0}, action) {
    switch (action.type) {
        case 'wes07/increase':
            return {value: state.value + 1};

        case 'wes07/decrease':
            return {value: state.value - 1};

        case 'wes07/set':
            return {value: action.value};

        default:
            return state;
    }
}

그리고 이 reducer로 store를 생성한다.

import {createStore} from 'redux'

//...

const store = createStore(reducer)

그리고 component가 mount 완료되었을 때 초기값을 설정하고, 또 store로부터 값을 받아 내부 state에 적용한다.

class ReduxHelloWorld extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: 0
        }
    }

    componentDidMount() {
        store.subscribe(() => this.setState({value: store.getState().value}))
        store.dispatch({
            type: 'wes07/set',
            value: this.props.initialValue
        })
    }

// ...

}

훅 기능은 워드프레스에서 구현한 기능이며 일반적인 자바스크립트가 아니지만, 카테고리를 간결하게 유지하고 싶어 이 곳에 작성한다.

PHP에서 작성된 add_action, add_filter 같은 훅 제어가 JavaScript에서도 아주 유사하게 작성되어 있다! 자바스크립트가 비동기 방식이고, 이벤트 핸들링을 위해 콜백 함수를 쓰는 것이 매우 일상적이긴 하지만, 자바스크립트 고유의 콜백 방식을 쓰기는 조금 난감할 때가 있는데, 이 패키지를 사용하면 문제 없이 훅을 다룰 수 있다.

리포지터리에 이 혹을 사용해 보는 코드를 작성해 봤다. 아주 간단하게 자바스크립트에서 액션과 필터가 동작하는 코드이다. 기대되는 동작은 기존에 사용하던 PHP 쪽 버전과 동일하게 동작하기 때문에 사용하는 법만 대충 테스트하면 충분할 듯하다.

예제를 위해 슬러그가 ‘hooks-test’인 포스트를 생성한다. 스크립트는 이 포스트에서만 동작하도록 처리했다. 결과는 아래 그림과 같다.

액션과 필터는 아래처럼 사용한다.

addAction('wes06-test-action', 'changwoo/wes06-hooks/index', actionCallback01, 30);
addFilter('wes06-test-filter', 'changwoo/wes06-hooks/index', filterCallback01);

다 같은데, 두번째 인자가 네임스페이스라는 점이 다르다. 이 네임스페이스는 hasFilter(), hasAction() 체크시에 사용되는 것 외에는 크게 의미는 없다. 저걸 다르게 준다고 해서 doAction, applyFilters 함수 호출시 특별한 동작을 하게 되는 것은 아니다. 즉 네임스페이스가 다르되, 훅 이름이 같다 하더라도 각 훅이 구분되는 일 따위가 없을 것이다.

아무튼 이 훅 관련 함수는 이미 코어 여러 부분에 적용되어 있다. 응용하면 자바스크립트에서 그동안 아쉬웠던 훅을 통한 기능 수정이 편안하게 될 수 있으리라 기대한다.

지난 포스트에서는 블록의 속성값에 대해 간단하게 알아 보았다. 블록이 어떻게 자신의 값을 저장하고 표현하는지 알 수 있었다.

블록은 HTML 주석 부분에 블록이 필요한 데이터를 JSON 형태로 저장하거나, 자신이 가지고 있는 HTML 마크업 구조에서 가져올 수 있고, 또 커스텀 필드로부터 가져올 수 있다. 단, 블록 자체는 HTML 코드 그대로 기록하기 때문에 이런 동적인 값들을 표현하려면 생짜 HTML 코드를 사용할 수 없을 것이다.

마크업 구조나 주석에 표현된 JSON을 사용하려면 리액트의 콤포넌트를 활용하거나, 메타 값을 표현하려면 동적인 렌더링을 활용해야 할 것이다.

이번에는 이런 것들을 표현할 수 있도록 해 보자. 이번에 만들 블록의 요구 조건은 다음과 같이 정리해 볼 수 있을 것이다.

• 블록은 커스텀 필드의 값을 받아 동적 렌더링을 한다.
• 블록은 마크업의 요소, 주석의 JSON 데이터를 받아 동적으로 값을 처리한다.
• 블록의 속성값은 사이드바를 활용할 수 있도록 한다.

완성된 코드는 Github 레포지터리에 올려두었다.

예제 설명

예제는 ‘Dynamic Render’라는 블록을 생성한다. 이 블록은 이전처럼 name과 anotherName 속성을 가지고 Hello, World! 처럼 문자를 출력하는 단순한 역할을 한다. 그러나 이 값은 보다 동적이다.

name은 따로 텍스트 입력 상자로부터 가져오며, anotherName은 사이드바로부터 온다. 또 name은 주석에 있는 블록 속성에 저장하며 anotherName은 커스텀 필드 _another_name에 저장한다.

사이드바나 커스텀 블록을 만드는 것은 기존 예제와 크게 다를 것이 없다. 그러나 사이드바에 넣은 값이 메타 필드와 연동되어야만 한다는 점이 이 예제의 키 포인트라고 할 수 있겠다. 그리고 이번에는 save() 메소드는 사실상 아무것도 하지 않는다. 프론트 렌더링을 PHP 측에서 담당하기 때문이다.

렌더 콜백

우선 프론트 쪽 렌더링을 살펴보자. PHP 코드에서 register_block_type() 호출시 ‘editor_script’ 뿐 아니라 ‘render_callback’ 또한 지정해 준다.

register_block_type(
	'wp-estnext-study/wes05-dynaic-render',
	[
		'editor_script'   => 'wes05-dynamic-render',  // 필수!
		'render_callback' => 'wes05_render_callback', // 동적 렌더링.
	]
);

render callback 함수를 실제 작성해 보니, 이 함수는 관리자 페이지에서 포스트 편집 화면에서도, REST API 호출 때에도, 프론트에서도 다 불리는 것을 확인했다. 단순히 프론트에서 호출할 때만을 상정하고 이 함수를 작성하면 프론트 이외 작업에서 에러가 날 수 있다.

또한 관리자에서 포스트 편집 화면에 들어갈 때 잠깐의 화면 공백이 발생하는데, 그 때에도 이 출력이 나온다. 그러므로 렌더 콜백은 다음과 같은 if … else … 구문을 사용하여 구분하는 것이 좋을 것이다.

if ( is_admin() ) {
	// 관리자 편집 화면 진입시
} elseif ( defined( 'REST_REQUEST' ) && REST_REQUEST ) {
	// REST API 호출시
} else {
	// 프론트 호출은 여기서.
}

사이드바 컨트롤과 커스텀 필드 연동

사이드바에서 TextControl 하나를 넣어 onClick 이벤트와 value 속성을 커스텀 필드의 값과 이어지도록 처리 한다. 그런데 커스텀 필드는 블록 속성이 아니고, 코어가 포스트 편집 화면을 위해 이미 불러와져 있는 상태이다. register_meta() 함수를 부를 때 우리는 ‘show_in_rest’ 항목에 true를 주었기 때문이다.

그런데 이 커스텀 필드를 불러오거나 업데이트해야 할 때는 조금 복잡하다. 아무튼 현재 수준에서 가능한 설명을 기록한다. 우선 TextControl을 하나 감싸 ‘DynamicRender’라고 하자.

let DynamicRender = ({anotherName, onChange}) => {
    return (
        <TextControl
            label="Another Name"
            value={anotherName}
            onChange={onChange}
        />
    );
}

이제 DynamicRender에 마법을 부려 보자. 메타 값을 불러와 컨트롤의 속성으로 넣어 주려면 아래 코드를 참고한다.

// withSelect 로 DynamicRender 함수를 래핑.
DynamicRender = withSelect(select => {
    const {getEditedPostAttribute} = select('core/editor');
    return {
        anotherName: getEditedPostAttribute('meta')['_another_name']
    };
})(DynamicRender);

한편 메타 값을 다시 업데이트하려면 아래 코드를 작성한다.

// withDispatch 로 DynamicRender 함수를 다시 래핑.
DynamicRender = withDispatch(dispatch => {
    const {editPost} = dispatch('core/editor');
    return {
        onChange(value) {
            editPost({meta: {_another_name: value}});
        }
    }
})(DynamicRender);

Redux와 워드프레스 자바스크립트 코어가 겹치는 부분이라 어렵고 이해가 잘 안가는 부분이 있다. 이해하려 해도 파야 할 부분이 많아 보여 현재는 코드 조각 수준밖에는 이해하지 못하는게 불만이다. 보다 이해를 높이려면 리액트나 리덕스를 보다 이해해야만 알 수 있을 것 같다. 보다 시간과 노력이 필요한 부분인듯.

블록 에디터는 post_content 필드에 직접 기록된다. 그리고 기본적으로 블록의 내용 또한 이 필드 안에 본문으로서 기록된다.

예를 들어, ESNext #2: 블록 제작에서 작성한 Hello, World! 블록은 다음처럼 텍스트로 기록된다.

<!-- wp:wp-esnext-study/wes02-hello-world -->
<p class="wp-block-wp-esnext-study-wes02-hello-world">WP ES Next #2 안녕, 세상!</p>
<!-- /wp:wp-esnext-study/wes02-hello-world -->

HTML 코드로 기록되는 것이 보인다. 그리고 주석으로 이것이 워드프레스 블록임을, 또 어떤 블록 타입인지를 기록하는 것이 보인다. wp:로 시작하고 /wp:로 닫는 것으로 보인다. ‘wp-esnext-study/wes02-hello-world‘는 내가 지정한 블록 타입 이름이다.

블록은 워낙 단순해서 어떤 상태나 속성을 가지지 않지만, 이제 간단한 속성을 지정해 보도록 하자. 이것을 활용하면 블록 에디터에 값을 저장하고, 불러와 쓸 수 있게 된다.

Github 리포지터리에 04-attributes 디렉토리로 예제 코드를 작성하였다. 아래부터는 이 예제 코드에 대한 설명을 덧붙인다.

속성값에 대한 설명은 블록 에디터 문서에서 찾을 수 있다. 이 개념은 마치 리액트의 콤포넌트의 state와 약간 비슷한 느낌이다. registerBlockType() 함수의 옵션 인자로 주어지며, 해당 블록 타입 내 속성값의 키-값 쌍들의 목록이다.

registerBlockType('foo/bar', {
  ...
  attributes: {
    name: {
      type: 'string',
      default: 'John',
    }
  }
  ...
});

키는 해당 속성의 이름, 값은 속성의 성격을 정의한다.

‘type’은 필수적으로 지정해야 하며 다음 문자열 중 하나여야 한다.

• null
• boolean
• object
• array
• number
• string
• integer

‘source’는 이 속성값이 블록 내 어떤 곳에서 오는지 지정한다.

• 생략: source를 생략할 수 있다. 이 때 블록의 주석에 인코딩된다. 명시적으로 주는 방법도 있을 텐데 정확히 알 수가 없다.
• attribute: 속성에서 가져온다.
• html: HTML 코드를 취한다.
• text: 텍스트를 취한다.
• children: 내부 자식 요소에서 취한다.
• meta: 메타 값에서 온다.
• query: 속성 값에 여러 군데에서 값을 가져와야 할 경우 유용하다.

‘source’와 더불어 ‘selector’, ‘attribute’ 속성을 더할 수 있다. ‘selector’는 CSS 선택자로 내부 요소를 선택할 때 쓰고, ‘attribute’는 검색된 노드에서 어트리뷰트 값을 취할 때 쓴다.

{
...
attributes: {
  ingredients: {
    type: 'array',
    source: 'children',
    selector: '.ingredients',
  },
  url: {
    type: 'string',
    source: 'attribute',
    selector: 'img',
    attribute: 'src',
  },
  comment: {
    type: 'string',
    source: 'meta',
    meta: '_my_comment'
  }
}
...
}
// attributes의 예제. 'ingredients' 클래스를 가진 자식 노드의 텍스트를 가져온다.
// img 노드의 src 속성에서 url 속성값을 채운다.
// comment 속성은 메타 필드 '_my_commnet' 로부터 온다.

예제에서 나는 두 개의 입력 필드를 삽입했다. 이 입력 필드를 통해 위젯의 내용을 동적으로 표현한다. 하나는 주석에 저장하고, 하나는 메타 필드로부터 가져온다.

{
...
attributes: {
    name: {
        type: 'string',
        default: 'John',
    },
    anotherName: {
        type: 'string',
        source: 'meta',
        meta: '_another_name',
        default: 'Jane',
    }
},
...
}

나머지 edit(), save() 메소드를 완성한다.

edit({setAttributes, attributes}) {
    return (
        <>
            <p>{__('Hello, World!', 'wp-esnext-study')}, {attributes.name}, {attributes.anotherName}!</p>
            {/* 첫번째 입력 요소. Hello, World!, {이름}을 출력하게 합니다.
             이 요소는 HTML 주석에 JSON 인코드 됩니다. */}
            <TextControl
                label={__('Your Name', 'wp-esnext-study')}
                value={attributes.name}
                onChange={value => {
                    setAttributes({name: value});
                }}
            />
            <TextControl
                label={__('Another Name', 'wp-esnext-study')}
                value={attributes.anotherName}
                onChange={value => {
                    setAttributes({anotherName: value});
                }}
            />
        </>
    );
},
save({attributes}) {
    return (
        <>
            <p>{__('Hello, World!', 'wp-esnext-study')}, {attributes.name}, {attributes.anotherName}!</p>
        </>
    );
}

이렇게 하면, name은 본문 블록의 주석에 저장되고, anotherName은 메타 값으로 저장된다. 단, 메타 값을 REST API에 노출하기 위해 index.php에 register_meta() 함수를 호출해 _another_name 필드를 지정한다.

<?php
...

register_meta(
	'post',
	'_another_name',
	[
		'type'              => 'string',
		'description'       => 'Another name.',
		'default'           => 'Jane',
		'single'            => true,
		'sanitize_callback' => function ( $value ) {
			return sanitize_text_field( $value );
		},
		/**
		 * apply_filters( "auth_{$object_type}_meta_{$meta_key}", $allowed, $meta_key, $object_id, $user_id, $cap, $caps );
		 *
		 * @see map_meta_cap()
		 */
		'auth_callback'     => function ( $allowed, $meta_key, $object_id, $user_id ) {
			return user_can( $user_id, 'edit_post', $object_id );
		},
		'show_in_rest'      => true,
	]
);

편집기에서 값을 저장하고 저장된 상태를 확인해 본다. 값이 잘 저장되는 것을 확인했다.

단, 값이 잘 저장된 것처럼 보이지만 헛점이 하나 있다. 이 글을 코드 에디터로 봐서 본문을 날것 그대로 보면 아래 그림처럼 나온다.

메타 값으로 지정한 Ashly는 그저 텍스트로 출력되어 있다. 만약 다른 곳에서 메타 값을 Ashly에서 Simpson으로 변경한다 하더라도, 이 텍스트는 변경되지 않는다. 이렇게 DB로 저장된 값을 가져와 표시하려면 지금처럼 정적인 렌더링은 알맞지 않다. 이것은 차후 동적 렌더링에서 따로 알아보도록 하자.