WebSquare 화면을 React로.
통과한 코드만 남깁니다.

어떻게 동작하나

"규칙으로 100%"를 좇던 옛 컨버터가 멈춘 지점 — 화면마다 제각각인 스크립트 로직 — 을 LLM에 맡기고, LLM의 불확실성은 검증 루프가 걸러냅니다. 규칙과 LLM의 역할이 분리돼 있어 결과가 재현 가능합니다.

Before / After 배포물에 포함된 샘플 sample_side

WebSquare 트리 메뉴 화면과 변환된 React 코드의 앞부분입니다. 컬렉션은 WsDataList, 컴포넌트는 호환 래퍼(WsTreeView)로 옮겨져 원본 스크립트의 호출 형태가 그대로 살아 있습니다.

<w2:dataList id="dlTrvMenu" baseNode="list" repeatNode="map">
  <w2:columnInfo>
    <w2:column id="name" name="이름" dataType="text"/>
    <w2:column id="value" name="값" dataType="text"/>
    <w2:column id="dept" name="단계" dataType="text"/>
    <w2:column id="url" name="화면Url" dataType="text"/>
  </w2:columnInfo>
  <w2:data use="true">
    <w2:row><name>test 1</name><value>t1</value>
      <dept>1</dept><url>/WS/WebSquare.xml</url></w2:row>
    ...
  </w2:data>
</w2:dataList>

<script><![CDATA[
scwin.tv_menu_onclick = function() {
  var label = tv_menu.getSelectedLabel();
  var value = tv_menu.getSelectedValue();
  var url = WebSquare.xml.getValue(
    tv_menu.getSelectedElement(), "url");
  scwin.setMenuRelation(label, value, url);
};

scwin.setMenuRelation = function(label, value, url) {
  var menuList = dlTrvMenu.getMatchedJSON("value", value, true);
  if (menuList.length > 0) {
    scwin.openMenu(menuList[0].name,
      menuList[0].url, menuList[0].value);
  }
};
]]></script>

import { createRef, useEffect } from 'react';
import { WsDataList, WsTreeView,
  type WsTreeViewHandle } from 'ws-react-runtime';

const dlTrvMenu = new WsDataList('dlTrvMenu',
  ['name', 'value', 'dept', 'url']);
dlTrvMenu.setJSON([
  { name: 'test 1', value: 't1', dept: '1', url: '/WS/WebSquare.xml' },
  { name: 'test 2', value: 't2', dept: '1', url: '/WS/WebSquare1.xml' },
]);

const tv_menu = createRef<WsTreeViewHandle>();

function tv_menu_onclick(): void {
  const label = String(tv_menu.current?.getSelectedLabel() ?? '');
  const value = String(tv_menu.current?.getSelectedValue() ?? '');
  const url = String(
    tv_menu.current?.getSelectedRowJSON()?.['url'] ?? '');
  setMenuRelation(label, value, url);
}

function setMenuRelation(_label: string, value: string,
                         _url: string): void {
  const menuList = dlTrvMenu.getMatchedJSON('value', value, true);
  const first = menuList[0];
  if (menuList.length > 0 && first !== undefined) {
    openMenu(String(first['name'] ?? ''),
      String(first['url'] ?? ''), String(first['value'] ?? ''));
  }
}
// ... TODO(manual): 원본 데드코드는 주석으로 보존

보안 규정이 까다로운 곳을 위해 만들었습니다

가격

연간 라이선스. 프로젝트·화면 수 무제한. LLM 비용은 별도(본인 구독이면 0, API 키면 화면당 수백~수천 원)이며 우리는 토큰 마진을 얹지 않습니다. 만료 후에도 도구는 체험 모드로 계속 동작하고, 변환된 코드는 당연히 여러분 것입니다. 결제 후 14일 환불.

5분 체험

zip 하나 — 설치 스크립트가 Node.js·Claude Code 확인/설치, 압축 해제, 의존성 설치, 환경 점검까지 처리합니다.

powershell -ExecutionPolicy Bypass -File .\install-ws2react.ps1    # Windows (macOS/Linux: bash ./install-ws2react.sh)
cd %USERPROFILE%\ws2react
npx ws2react convert samples/vos-ocean/screens/sample/sample_side.xml
npx ws2react report --html --open        # Before/After · 검증 루프 타임라인 · 비용

ws2react-0.1.0.zip 다운로드 내 프로젝트 투입 절차(어댑터 부트스트랩 → 이식 → 변환 → 회귀)는 배포물의 docs/getting-started.md