본문으로 건너뛰기

syn.js 소개

syn.js는 HandStack 화면 개발에서 공통으로 사용하는 클라이언트 런타임입니다. DOM 조작, 브라우저 정보, 검증, HTTP 요청, 화면 생명주기, 거래 호출, 다국어 리소스, 출력 보조 기능을 하나의 전역 syn 네임스페이스로 제공합니다.

현재 HandStack의 웹 호스트는 다음 파일을 기준으로 syn.js를 제공합니다.

wwwroot/assets/js/syn.js

개발자가 먼저 알아야 할 것​

  • syn.module은 화면 모듈과 내부 유틸리티 객체가 공통으로 사용하는 확장 가능한 객체 기반입니다.
  • syn.Config는 호스트, 애플리케이션, 거래, proxy, locale, cache 같은 화면 런타임 설정을 보관합니다.
  • 브라우저에서는 synConfig 또는 synConfigName을 통해 설정을 병합한 뒤 syn.$w.contentLoaded()가 화면 초기화를 수행합니다.
  • 화면 스크립트는 일반적으로 config, prop, transaction, hook, event, method 구조의 객체로 작성합니다.
  • 거래 호출은 syn.$w.transactionAction()에서 화면 거래 설정을 읽고, 내부적으로 transactionDirect()와 executeTransaction() 흐름을 거쳐 transact API로 전달됩니다.

공개 네임스페이스​

네임스페이스문서역할
syn.$bbrowser브라우저/디바이스 정보, 공유, 성능 측정
syn.$mmanipulationDOM 요소 값, 텍스트, 클래스, 스타일 조작
syn.$ddimension문서/창/요소의 크기와 위치 계산
syn.$ccryptographyBase64, hash, Web Crypto, AES/RSA, LZString
syn.$kkeyboard키 코드와 키보드 이벤트 관리
syn.$vvalidationrequired, pattern, range, custom 검증
syn.$llibrary요소 조회, 이벤트, 로그, 변환, 공통 유틸리티
syn.$rrequestURL, cookie, HTTP 요청, blob URL
syn.$nnetworkiframe/window 간 메시지 채널
syn.$wwebform화면 초기화, 데이터 바인딩, 거래, 리소스 로드
syn.$pprintReportify/Excel 템플릿 기반 출력
syn.$resresource다국어 리소스와 화면 텍스트 번역
$date, $array, $string, $number, $objectdate, array, string, number, object기본 데이터 타입 보조 함수

화면 모듈 기본 형태​

'use strict';

let $sample = {
    config: {
        programID: 'HDS',
        moduleID: 'wwwroot',
        businessID: 'SMP',
        transactionID: 'SMP010'
    },

    prop: {
        selectedID: null
    },

    transaction: {
        LD01: {
            inputs: [{ type: 'Row', dataFieldID: 'SearchForm' }],
            outputs: [{ type: 'Grid', dataFieldID: 'DataList' }]
        }
    },

    hook: {
        pageLoad() {
            syn.$w.transactionAction('LD01');
        },

        beforeTransaction(transactConfig) {
            return true;
        },

        afterTransaction(error, functionID, responseData) {
            if (error) {
                syn.$l.eventLog('$sample.afterTransaction', error, 'Error');
            }
        }
    },

    event: {
        btnSearch_click() {
            syn.$w.transactionAction('LD01');
        }
    },

    method: {
        getSearchValue() {
            return syn.$w.getterValue('SearchForm');
        }
    }
};

실무 사용 기준​

  • 화면 상태는 prop, 화면 이벤트는 event, 재사용 로직은 method, 생명주기 처리는 hook에 둡니다.
  • DOM 직접 접근은 가능하면 syn.$l.get, syn.$m, syn.$w.getterValue/setterValue를 사용해 일관성을 유지합니다.
  • 업무 데이터 조회/저장은 syn.$w.transactionAction을 우선 사용하고, 화면 거래 설정 밖에서 호출해야 할 때만 transactionDirect를 사용합니다.
  • 외부 HTTP 호출은 단순 요청이면 syn.$r.httpFetch 또는 syn.$r.httpRequest, HandStack 화면 API 스타일이면 syn.$w.apiHttp를 사용합니다.