본문으로 건너뛰기

syn.js 라이브러리 퀵 가이드

이 문서는 최신 /sample/syn 예제 기준으로 자주 쓰는 패턴만 빠르게 확인하기 위한 요약입니다. 상세 속성, 인자, 반환값은 각 모듈 문서의 API 참조 섹션을 확인하세요.

기본 로드​

syn.js가 로드되면 브라우저 전역에서 syn.$b, syn.$m, syn.$w 같은 모듈과 $array, $date, $string 같은 확장 유틸리티를 사용할 수 있습니다.

console.log(syn.$b.userAgent);
console.log($string.toValue('Hello'));

브라우저와 성능​

if (syn.$b.isMobile()) {
    console.log('모바일 환경입니다');
}

console.log(syn.$b.windowWidth(), syn.$b.windowHeight());

syn.$b.markPerformance('load-start');
// 처리 로직
syn.$b.markPerformance('load-end');
syn.$b.measurePerformance('load-time', 'load-start', 'load-end');

DOM 조회와 조작​

const el = syn.$l.get('txtName');

syn.$m.value(el, 'HandStack');
syn.$m.addClass(el, 'active');
syn.$m.setStyle(el, 'color', 'red');

const panel = syn.$m.create({
    tag: 'div',
    className: 'panel',
    text: '동적으로 생성한 영역'
});
syn.$m.appendChild('container', panel);

HTTP 요청과 화면 거래​

const response = await syn.$r.httpFetch('/sample/syn/sample.json', {
    method: 'GET'
});

syn.$w.transactionAction('LD01');

request 문서는 URL/cookie/HTTP 요청을, webform 문서는 화면 초기화와 거래 엔진 흐름을 다룹니다.

검증과 리소스​

const valid = syn.$v.value('txtEmail', {
    required: true,
    pattern: 'email'
});

const message = syn.$res.getText('MSG_SAVE_COMPLETE');

암호화와 식별자​

const encoded = syn.$c.base64Encode('Hello World');
const hash = syn.$c.sha256('Hello World');
const guid = syn.$l.guid();

네트워크와 iframe 메시지​

syn.$n.start({
    url: '/events',
    method: 'SSE'
});
  • SSE/WebSocket과 rooms 전역 편의 메서드는 network를 확인합니다.
  • iframe 부모/자식 화면 메시지 채널은 iframe-main, iframe-child를 확인합니다.

기본 타입 확장​

const names = $array.distinct(['A', 'B', 'A']);
const today = $date.toString(new Date(), 'yyyy-MM-dd');
const price = $number.toCurrency(12000);
const text = $string.format('Hello {0}', 'HandStack');
const copy = $object.clone({ id: 'A01' });

사용 중단 항목​

stringbuilder 예제의 syn.$sb는 사용 중단 상태입니다. 새 코드에서는 배열 join, 템플릿 리터럴, $string 유틸리티를 우선 사용하세요.