넥사크로 화면을 Vue 로 그대로 — Nx 컴포넌트와 xfdl 변환기

이날 TO-BE 를 만드는 방식을 바꿨다. 지금까지는 넥사크로 화면(xfdl)을 하나씩 읽고 Vue 로 새로 짰다. 그런데 이렇게 옮긴 화면은 레거시와 미묘하게 동작이 달라서, 한 화면씩 다시 확인해야 했다.

그래서 방향을 뒤집었다. 넥사크로의 Grid·Dataset·Combo 같은 컴포넌트를 같은 속성 이름, 같은 동작으로 Vue 에 다시 만들고(이하 Nx), xfdl 은 변환기로 기계적으로 옮긴다. 화면 스크립트는 거의 손대지 않고 그대로 돌린다. 업무 로직을 다시 짜지 않으니 다시 짜다 생기는 실수도 없다.

아침에는 그 전에 필요한 안전장치로 AS-IS 와 TO-BE 의 조회 결과를 맞대 보는 도구를 만들었고, 오후부터 밤까지 Nx 를 1차부터 21차까지 쌓았다.

한 일

AS-IS · TO-BE 조회 결과 비교 도구

같은 조회를 AS-IS(넥사크로 SSV)와 TO-BE(JSON API)에 화면과 똑같은 모양으로 보내고, 돌아온 데이터셋을 행·열·값 단위로 비교한다.

• xfdl 의 서버 호출 부분에서 조회 시나리오 뼈대를 뽑았다(163개 파일). 조건 값은 아직 비어 있다
• 저장·프로시저 호출은 실제 DB 를 바꾸므로 실행 단계에서 막았다

이 도구로 바로 하나를 잡았다. 증빙 관련 컬럼이 결의 상세 표에서 지급 명세 표로 옮겨진 뒤 고치지 않은 조회 세 개가 “없는 컬럼” 오류(ORA-00904)를 내고 있었다. 지급 명세를 결의 상세 단위로 묶어(LISTAGG DISTINCT) 붙이고 증빙 조건은 EXISTS 로 바꿨다. 행 수는 바뀌기 전과 같고, 2025년 결의조회 1만 1천여 행이 AS-IS·TO-BE 모두 같게 나왔다. 같은 원인으로 깨져 있던 원천세 뷰와 전표 생성·결의 연계 프로시저도 함께 고쳤다.

Nx 컴포넌트 — 모양과 배치

• 넥사크로 테마 파일(.xcss)을 CSS 로 바꾸는 변환기를 만들었다. xcss 선택자는 원래 CSS 문법이라, 컴포넌트가 넥사크로와 같은 클래스 구조로 그려지면 테마가 그대로 맞는다
• 배치는 넥사크로 좌표 그대로 받는다. left/top/right/bottom/width/height 의 숫자, %, 다른 컴포넌트 기준 상대 위치("comp:10")까지
• Form, Div, Static, Button, Edit 부터 시작해 Combo, MaskEdit, Spin, CheckBox, Radio, TextArea, Calendar(일반·월·기간 달력), Tab 까지 만들었다
• 개발 서버에서만 열리는 확인 페이지를 두고, AS-IS xfdl 을 그대로 읽어 그려 본다

Dataset 과 식 해석기

화면 스크립트가 가장 많이 기대는 것이 Dataset 이다. 행 상태(신규·수정·삭제), 수정한 값을 원래대로 되돌리면 다시 “정상”이 되는 규칙, 필터, 찾기, 합계(getSum, getCaseSum), 그룹 소계, 이벤트 순서를 넥사크로 공개 컴포넌트 소스를 읽고 같은 규칙으로 다시 썼다.

그리드 셀과 바인딩에 쓰는 넥사크로 식(expr:)은 해석기를 따로 만들었다. xfdl 에 있는 식 850개 중 849개가 해석되고, 남은 하나는 원본 오타다.

그리드

가장 큰 덩어리다. xfdl 의 <Formats> XML 을 그대로 받아 그린다. 레거시 xfdl 의 그리드 서식 366개(셀 8,054개)가 모두 해석되고, 200개 화면의 그리드 351개가 실행 오류 없이 그려진다.

• 표시: 머리·본문·합계 밴드, 셀 병합, 틀 고정, 열 자동 맞춤, 표시 형식별 값(숫자·날짜·콤보 글자·마스크·체크박스)
• 가상 스크롤: 2만 행에서도 DOM 에는 25행 정도만 둔다
• 편집: 칸 종류별로 Nx 입력 컴포넌트를 칸 안에 띄우고, Enter·Esc·Tab·화살표·F2 키를 넥사크로처럼
• 확장: 레거시 프로젝트가 넥사크로 위에 얹은 그리드 공통 기능(행 번호, 상태 칸, 머리 클릭 정렬, 체크 열, 연쇄 콤보, 엑셀 내려받기)
• 그룹 소계와 트리 그리드

화면이 부르는 공통 함수들

화면 스크립트를 그대로 돌리려면 컴포넌트 말고도 레거시 공통 스크립트가 주던 함수가 다 있어야 한다.

• 컴포넌트 공통 API(set_enable, set_visible, addEventHandler …)와 (obj, e) 꼴 이벤트
• 재사용 부품: 건수 표시, 다중 선택 콤보, 코드·이름 찾기 칸
• 팝업(모달·모드리스·레이어)과 메시지, 토스트
• 입력 검사(필수·길이·주민번호·사업자번호·이메일 꼴 등)를 레거시와 같은 순서·같은 메시지로
• 서버 거래(transaction, 공통 submit 과 콜백 처리)
• 파일 올리기·내려받기와 이미지 보기
• 화면이 열릴 때 도는 공통 초기화(공통코드 콤보 채우기, 달력 설정, 그리드 설정 …)를 원본 순서대로

서버: 레거시와 같은 규칙의 /api/nx

TO-BE 서버에 넥사크로 화면 전용 경로를 새로 만들었다. 통신 형식만 SSV(XML)에서 JSON 으로 바뀌고, 처리 규칙은 레거시와 같게 둔다. 빈 문자열을 NULL 로 넣는 것, 행 상태별 저장 순서, 오류 코드 체계 같은 것들이다. 업무 결과가 같아야 하기 때문이다. 결의서처럼 여러 표를 한 번에 저장하는 거래와 파일 서버도 같은 방식으로 옮겼다. 실제 DB 를 쓰는 통합 시험은 저장한 내용을 되돌린다.

xfdl → vue 변환기

하루의 마지막 단계다. xfdl 229개를 Nx 화면(.vue + 화면 스크립트)으로 기계 변환한다. 컴파일 점검과 함께, 화면 스크립트가 부르는데 Nx 에 아직 없는 넥사크로 API 를 찾아 주는 점검 도구도 붙였다.

라이선스 고지

넥사크로 라이브러리 중 컴포넌트 영역은 BSD 3-Clause 로 공개돼 있고, 프레임워크 영역은 정식 사용 허가 범위에서만 쓸 수 있다. 그래서 프레임워크 코드는 가져오지 않고, 컴포넌트는 소스를 읽고 같은 규칙으로 다시 썼다. 다시 쓴 파일에는 출처를 적고, 고지 파일을 빌드 결과에 함께 넣는다.

기술 메모

원본의 버릇도 그대로 둔다. 같은 동작의 기준은 넥사크로 문서나 짐작이 아니라 원본 컴포넌트 소스다. 버그처럼 보이는 동작도 화면이 거기에 기대고 있으면 그대로 옮겼다. 예를 들어 날짜 칸이 비어 있으면 그리드가 0000-01-01 을 보여 주는 것까지 원본과 같다.

식 해석기는 eval 없이. 넥사크로 식은 사실상 JavaScript 식이라 eval 이나 new Function 으로 돌리면 간단하다. 하지만 화면 데이터가 식 안에 들어가는 구조라 직접 파서를 만들고, 프로토타입을 타고 constructor 로 올라가는 경로는 막았다.

시험. 하루 동안 프런트 단위 시험이 117개가 됐다. 컴포넌트 동작을 원본과 맞추는 일은 눈으로 보는 것보다 “원본 함수가 이 입력에 무엇을 돌려주는가”를 시험으로 적어 두는 쪽이 훨씬 빨랐다.

다음에

• 변환한 화면을 실제 메뉴에서 열 수 있게 셸(메뉴·창)과 연결하기
• 비교 도구에 TO-BE 의 새 /api/nx 경로를 붙이고 시나리오 조건 값 채우기