본문으로 건너뛰기

syn.js 소개

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

최신 예제와 API 기준은 HandStack 웹 호스트의 /sample/syn 예제와 2.Modules/wwwroot/wwwroot/js/syn.js 구현입니다.

공개 네임스페이스​

네임스페이스문서역할
syn.$bbrowser브라우저/디바이스 정보, fingerprint, 공유, 성능 측정
syn.$ccryptographyBase64, hash, HMAC, AES/RSA, LZString, GUID
syn.$ddimension문서/창/요소의 크기와 위치 계산
syn.$kkeyboard키 코드와 키보드 이벤트 관리
syn.$llibraryDOM 조회, 이벤트, 변환, 로깅, 공통 유틸리티
syn.$mmanipulationDOM 탐색, 값/속성/스타일/클래스/구조 조작
syn.$nnetworkrooms 전역 편의 메서드, Server-Sent Events, WebSocket
syn.$pprintReportify와 Excel 템플릿 기반 출력
syn.$rrequestURL, cookie, HTTP 요청, blob URL
syn.$resresource다국어 리소스와 화면 텍스트 번역
syn.$vvalidationrequired, pattern, range, custom 검증
syn.$wwebform화면 초기화, 데이터 바인딩, 거래, 스크립트/스타일 로딩
$arrayarray배열 탐색, 정렬, 그룹화, tree 변환
$datedate날짜 포맷, 계산, 비교, 구간 처리
$numbernumber숫자 포맷, 반올림, 범위 처리
$objectobject객체 복제, 병합, 경로 접근, 직렬화 보조
$stringstring문자열 포맷, 치환, 인코딩, 비교, 마스킹

보조/특수 문서​

문서역할
iframe-mainsyn.$n.rooms 기반 부모 화면 메시지 채널 예제
iframe-childsyn.$n.rooms 기반 자식 iframe 메시지 채널 예제
parsehtmlHTML 문자열 파싱과 템플릿 처리 보조
reflectionreflection 예제와 $object 기반 대체 사용법
templatetemplate 예제와 문자열/DOM 템플릿 처리 패턴
syn.domainHandStack 도메인 모델 보조 문서

화면 모듈 기본 형태​

'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을 우선 사용하고, 화면 거래 설정 밖에서 호출해야 할 때만 직접 HTTP/거래 API를 사용합니다.
  • 최신 API 세부 목록과 주의 사항은 각 모듈 문서의 API 참조 섹션을 기준으로 확인합니다.