변환 화면을 메뉴에 연결하고 AS-IS 와 결과 대조 269건

전날 만든 Nx 컴포넌트와 변환기를 실제로 쓰기 시작한 날이다. 오전에는 비교 도구로 “변환 화면이 레거시와 같은 결과를 내는가”를 대량으로 확인했고, 오후에는 메뉴를 변환 화면에 연결했다. 연결하고 나니 실제 화면에서 빠진 기능과 버그가 줄줄이 나와서 저녁까지 그것을 메웠다.

한 일

메뉴는 변환 화면으로, 창은 원본처럼

메뉴를 열면 변환한 넥사크로 화면만 뜬다. 예전에 손으로 옮긴 Vue 화면은 더 쓰지 않는다
메뉴 창을 원본처럼 작업 영역 안에 떠 있는 창으로 만들었다. 끌어 옮기기, 가장자리로 크기 바꾸기, 최대화, 앞으로 가져오기, 제목줄의 즐겨찾기·개선요청·도움말 단추
셸이 시작할 때 원본처럼 사용자 정보·공통코드·사전 점검을 받아 전역 데이터셋에 채운다. 열 수 있는 창 수도 시스템 설정을 따른다
상단바에 세션 남은 시간을 보여 주고 누르면 연장한다. 세션이 끊기면 열어 둔 창은 그대로 두고 재로그인 팝업만 띄운다

레거시 화면이 기대던 것들 채우기

메뉴를 열어 보니 화면이 기대는 것이 컴포넌트만이 아니었다.

스크립트로 컴포넌트를 만드는 코드(new Button(...) → addChild → show)
우편번호 찾기, 공지·매뉴얼 편집기, 지도처럼 레거시가 정적 페이지로 띄우던 것들. 화면이 실제로 쓰는 페이지만 골라 TO-BE 에서도 내준다
엑셀 업로드 팝업이 쓰는 ListBox, 데이터셋 행 옮기기
은행 계좌 예금주 조회 연동. 중계 서버와 소켓으로 주고받는 레거시 방식을 그대로 옮기고, 접속에도 시간 제한을 걸었다
그리드 컬럼 메뉴, 머리 클릭 정렬 기본값. 기본값이 빠져 있어서 정렬 속성을 적지 않은 그리드는 머리를 눌러도 정렬되지 않았다
콤보 안에 직접 적은 목록. 변환기가 이것을 만들지 않아 63개 화면 85곳의 콤보가 비어 있었다

회계·예산 화면 74개를 확인 페이지에서 차례로 열어 보며 찾은 것도 있다. 회계 공통 부품이 넥사크로 내부 함수를 덮어쓰는 방식이라, 그 내부 함수 이름까지 Nx 에 있어야 회계연도 기본값이 들어가고 자동 조회가 됐다.

AS-IS 와 결과 대조

비교 도구가 TO-BE 의 /api/nx 경로로도 보낼 수 있게 했다
조건 값이 빈 시나리오 258건을 규칙으로 채웠다(조회 연도, 기간, 화면 식의 상수, 나머지는 “전체”)
양쪽 모두 0건인 경우는 “같음”으로 세지 않고 따로 셌다. 아무것도 확인한 것이 없기 때문이다. 그런 79건은 매퍼 SQL 을 풀어 DB 에서 실제로 데이터가 나오는 값을 찾아 62건을 채웠다

269건 결과는 같음 202, 데모 데이터 없음 17, 양쪽이 같은 원인으로 오류 48, 의도한 차이 1이었다. 일반 조회 경로에서는 AS-IS 와 다른 곳이 없었다.

저장도 대조했다. 백업을 시험용 DB 두 벌로 복원하고 각각에 AS-IS 와 TO-BE 를 붙인 뒤, 같은 저장을 보내 응답과 표 전체를 비교한다(일시·IP 같은 열은 빼고, 행 순서는 무시). 대표 저장 13건이 모두 같았다. 공개 데모 DB 는 건드리지 않는다.

이 과정에서 TO-BE 오류 메시지에 매퍼 파일 경로가 한 줄 섞여 나가던 것을 찾아 지웠다.

디버그 기능은 서버가 막는다

레거시에는 개발할 때 쓰던 디버그 화면이 있다. TO-BE 는 이것을 기본으로 끄고, 켜더라도 관리자와 허용한 범위에서만 쓰게 서버에서 검사한다. 주소 단위와 실행 문장 단위 두 곳에서 막고, 쓴 기록과 거절한 기록을 로그로 남긴다. AS-IS 운영 빌드에도 같은 차단을 넣었다.

화면 디자이너 1단계

개발 서버 전용으로 화면 디자이너를 만들었다. 변환 화면을 띄워 컴포넌트를 고르고, 끌어 옮기고, 손잡이로 크기를 바꾸고, 속성 창에서 값을 고친다. 바뀐 값은 컴포넌트 API 로 바로 보이고, 저장하면 xfdl 사본에 바뀐 속성만 써 넣은 뒤 그 화면만 다시 변환한다. 원본 xfdl 은 그대로 두고 TO-BE 전용 사본을 고친다. 공백·줄끝·BOM 도 원문 그대로 지킨다.

버그 고친 것

그리드 스크롤바가 특정 크기에서 생겼다 없어졌다를 되풀이하며 떨리던 것
화면 콜백에서 난 오류가 “통신 형식 오류”로 잘못 잡혀 로그아웃되던 것. 화면을 열고 잠시 뒤 로그인 화면으로 튕겼다
배포 중에 오는 502 같은 HTTP 오류도 원본처럼 통신 실패 알림으로 처리

기술 메모

스크롤바 떨림. 그리드가 overflow: auto 에 맡기고, 스크롤바를 뺀 안쪽 폭에 열 너비를 맞추고 있었다. 열을 맞추면 내용이 줄어 스크롤바가 사라지고, 사라지면 폭이 늘어 다시 넘치는 순환이 특정 크기에서 끝없이 돌았다. 원본처럼 바깥 크기와 내용 크기로 가로·세로 스크롤바를 먼저 정하고(overflow: scroll | hidden), 보이는 크기는 그만큼 빼서 계산하게 바꿨다.

try 범위. 응답을 받아 해석하는 코드와 화면 콜백 호출이 같은 try 안에 있었다. 그래서 화면 쪽 오류가 통신 형식 오류로 둔갑했다. try 는 응답 해석에만 씌웠다. 흔한 실수인데 결과가 “로그아웃”이라 원인을 찾기까지 돌아갔다.

어느 시스템에서 들어온 데이터인가. AS-IS 와 TO-BE 가 같은 DB 를 쓰며 한동안 함께 돌아간다. TO-BE 는 입력·수정 프로그램 열에 실제 API 경로(/api/...)를 남기게 해서, 나중에 어느 쪽에서 들어온 행인지 가려낼 수 있게 했다. 비교 도구는 이 접두사만 떼고 비교한다.

다음에

운영에서 디자이너를 볼 수 있게 하는 것(저장은 서버 쪽 관리자 확인이 먼저)
AS-IS 에 있는데 TO-BE 에 아직 없는 기능 목록을 문서로 정리해 두었다