React로 만드는 차세대 XE 게시판

들어가며: 왜 XE에 React를 도입했는가

XE/Rhymix와 함께한 지 15년이 넘었습니다. 수많은 프로젝트를 진행하며 느낀 것은, XE의 안정성과 한국형 CMS로서의 강점은 여전히 유효하지만, 프론트엔드 경험에서는 현대적인 웹 애플리케이션에 비해 아쉬움이 있다는 점이었습니다.

특히 게시판은 XE의 핵심 모듈이지만:

• 매 페이지마다 전체 새로고침이 발생
• 모바일에서 앱 같은 부드러운 전환 경험 부재
• 대용량 게시물이 많을 경우 체감 속도 저하

이런 문제들을 해결하면서도 XE의 강점은 유지할 수 없을까? 그 고민의 결과가 바로 React SPA 게시판입니다.

기술 스택 선정

Backend: XE/Rhymix API Layer

```

// XE의 기존 구조를 활용한 RESTful API

class BoardAPIController extends Controller {

    public function getDocumentList() {

        $output = executeQueryArray('board.getDocumentList', $args);

        return new JSONResponse([

            'success' => true,

            'data' => $output->data,

            'pagination' => [

                'total' => $output->total_count,

                'page' => $args->page

            ]

        ]);

    }

}

```

선택 이유:

• XE의 강력한 권한 시스템 그대로 활용
• 기존 모듈/애드온과 호환성 유지
• 검증된 데이터베이스 쿼리 재사용

```

// 가상돔 기반 초고속 렌더링

import { useState, useEffect } from 'react';

function BoardList({ moduleId }) {

    const [documents, setDocuments] = useState([]);

    const [loading, setLoading] = useState(false);

    const fetchDocuments = async (page = 1) => {

        setLoading(true);

        const response = await fetch(

            `/api/board/${moduleId}/documents?page=${page}`

        );

        const data = await response.json();

        setDocuments(data.data);

        setLoading(false);

    };

    useEffect(() => {

        fetchDocuments();

    }, []);

    return (

        <div className="board-list">

            {loading ? (

                <Skeleton count={10} />

            ) : (

                documents.map(doc => (

                    <DocumentRow key={doc.document_srl} data={doc} />

                ))

            )}

        </div>

    );

}

```