울면서개발하기JAVA SCRIPT
11편
- 넥사크로 화면을 Vue 로 옮기기 — 스크립트는 그대로 두고 변환기로넥사크로 17 로 만든 ERP 를 Vue 3 로 옮긴 방법. xfdl 을 변환기로 Vue 템플릿으로 바꾸고, 업무 스크립트는 손대지 않은 채 직접 만든 런타임 위에서 돌린다.
- 넥사크로 스크립트 오류를 화면에 토스트로 띄우기브라우저 콘솔에 스크립트 하나를 붙여 넣어, 넥사크로 트레이스 로그와 자바스크립트 오류를 화면 왼쪽 위에 토스트 메시지로 보여 주는 디버깅 방법.
- 넥사크로 24 에서 바뀐 속성 설정 방법 — set_value() 와 value 대입넥사크로 24 도움말은 속성을 set_ 메소드 대신 값 대입으로 설정하도록 안내한다. 두 방법이 모두 되는 이유를 개발자도구로 확인했다.
- 넥사크로 컴포넌트의 HTML 요소 찾기 — _unique_id 로 Static 글자 흘리기넥사크로 HTML5 화면의 컴포넌트는 규칙적인 id 를 가진 div 로 그려진다. _unique_id 로 그 div 를 찾아 Static 글자를 움직여 본 실험과 주의점.
- 넥사크로 객체의 종류 알아내기 — typeof 대신 instanceof넥사크로의 Dataset·Grid·Div 는 typeof 로 보면 모두 'object' 다. toString() 과 instanceof 로 종류를 구분하는 방법.
- 넥사크로를 쓰며 불편했던 점과 피해 가는 방법넥사크로 스튜디오의 편집기 한계, async 이벤트 함수 문제, this 범위, xfdl 파일의 형상관리 잡음까지 실무에서 부딪힌 불편과 우회 방법을 정리했다.
- 넥사크로에서 eval 없이 컴포넌트에 동적으로 접근하기넥사크로 화면 스크립트에 흔한 eval("this.div_row" + i) 패턴을 브라켓 표기법과 components 속성으로 바꾸는 방법. new Function 이 대안이 아닌 이유도 함께 정리했다.
- 크롬 개발자도구로 넥사크로 화면 디버깅하기넥사크로 화면을 웹 브라우저로 띄워 console.log, debugger, 요소 선택, 중단점, 예외에서 일시중지로 디버깅하는 방법. trace 와 console.log 의 차이와 eval("debugger") 가 멈추지 않을 때의 설정도 정리했다.
- 자바스크립트 Number() 가 객체를 숫자로 바꾸는 순서와 nexacro.DecimalNumber(obj) 와 obj * 1 은 Symbol.toPrimitive, valueOf, toString 순서로 원시값을 얻는다. 넥사크로 BIGDECIMAL 컬럼의 nexacro.Decimal 끼리 == 비교가 false 인 이유와 올바른 비교 방법을 정리했다.
- DB 컬럼명 ↔ camelCase 변환기 직접 만들기USER_ID 같은 대문자 스네이크 표기와 userId·UserId 를 서로 바꿔 주는 HTML 한 장짜리 변환기. 정규식 설명과 함께 숫자·약어 처리 버그를 고친 버전.
- 자바스크립트 배열에서 findRowExpr·getCaseCount 처럼 조건으로 행 찾기XPLATFORM·넥사크로 Dataset 의 findRowExpr, getCaseCount 를 일반 자바스크립트 배열에서 쓰는 방법. findIndex·filter 로 끝내는 방법과, "$:컬럼" 조건식 문자열을 그대로 쓰는 구현을 정리했다.