Guidebook
ComponentsStorybook

WebSquare · Advanced Guides

WebSquare 심화 가이드

다국어, 동적 이벤트, mobile, server 연동, 성능과 file 처리의 공통 기준을 제공합니다.

다국어와 동적 이벤트

표시 문자열을 화면 script에 고정하지 않고 project의 message resource로 관리합니다. 동적으로 만든 component event는 생성·해제 lifecycle을 한곳에서 관리해 중복 handler와 memory leak을 막습니다.

Mobile과 접근성

touch target, viewport, screen reader와 keyboard 대체 경로를 함께 설계합니다. GridView와 TabControl의 접근성 option은 사용하는 engine version의 제약을 확인하고 실제 보조 기술에서 검증합니다.

Server framework와 성능

Submission contract, 인증 만료, error response와 loading 상태를 공통 규칙으로 맞춥니다. 초기 화면 resource, WFrame load, Grid data와 반복 Submission을 측정한 뒤 병목을 줄입니다. 비공개 engine method를 호출하는 최적화는 피합니다.

File과 Workflow

upload는 file type·size와 server validation을 적용하고 download 권한은 URL 노출만으로 판단하지 않습니다. Workflow는 장시간 업무의 상태, 재시도와 중복 제출 방지 규칙을 포함해야 합니다.

비권장 사례

  • engine이 만든 내부 element와 class에 직접 의존
  • 전역 scope에 화면별 상태와 handler 누적
  • DataMap과 화면 field에 같은 값을 중복 보관
  • Submission 오류를 console에만 남김
  • 접근성 이름 없이 icon이나 색상만으로 상태 표시

공식 문서

가이드북소개기초디자인 토큰기초접근성컴포넌트기본 요소컴포넌트레이아웃컴포넌트폼컴포넌트네비게이션컴포넌트데이터 표시컴포넌트피드백컴포넌트기타활용 가이드UI 패턴활용 가이드작성 지침프레임워크프레임워크 구현프레임워크Gulp프레임워크GulpGulp 시작프레임워크GulpGulp 기본 설정프레임워크GulpGulp 기본 API프레임워크GulpHTML 편집 (Gulp NJK)프레임워크GulpWeb Server & Watching Files프레임워크GulpAssets 세팅프레임워크Gulp배포 (Deploying)프레임워크Vue프레임워크Vue빠른 시작프레임워크Vue핵심 기초프레임워크Vue상태와 반응성프레임워크Vue컴포넌트 심화프레임워크Vue페이지와 라우팅프레임워크Vue재사용성프레임워크Vue내장 컴포넌트프레임워크Vue확장하기프레임워크Vue베스트 프랙티스프레임워크VueTypeScript프레임워크Vue추가 주제프레임워크React프레임워크React빠르게 시작하기프레임워크ReactUI 표현프레임워크React조건과 목록프레임워크React상호작용프레임워크React페이지와 라우팅프레임워크ReactState 관리프레임워크React탈출구프레임워크ReactReact로 사고하기프레임워크WebSquare프레임워크WebSquare스튜디오프레임워크WebSquare화면과 이벤트프레임워크WebSquare컴포넌트프레임워크WebSquareDataCollection프레임워크WebSquareSubmission프레임워크WebSquare사용하기프레임워크WebSquareSP5 설정프레임워크WebSquare심화 가이드프레임워크Svelte프레임워크Svelte빠른 시작프레임워크Svelte핵심 기초프레임워크Svelte상태와 반응성프레임워크Svelte컴포넌트 심화프레임워크Svelte페이지와 라우팅프레임워크SvelteTypeScript프레임워크Svelte베스트 프랙티스프레임워크SolidJS프레임워크SolidJS빠른 시작프레임워크SolidJSUI 표현프레임워크SolidJSSignals와 Effects프레임워크SolidJS컴포넌트 심화프레임워크SolidJS페이지와 라우팅프레임워크SolidJS베스트 프랙티스프레임워크Qwik프레임워크Qwik빠른 시작프레임워크Qwik컴포넌트프레임워크Qwik상태와 반응성프레임워크Qwik페이지와 라우팅프레임워크Qwik베스트 프랙티스프레임워크Remix프레임워크Remix빠른 시작프레임워크RemixUI 표현프레임워크Remix페이지와 라우팅프레임워크RemixLoader와 Action프레임워크Remix베스트 프랙티스프레임워크Angular프레임워크Angular빠른 시작프레임워크Angular핵심 기초프레임워크Angular상태와 반응성프레임워크Angular컴포넌트 심화프레임워크Angular페이지와 라우팅프레임워크AngularTypeScript프레임워크Angular베스트 프랙티스프레임워크Astro프레임워크Astro빠른 시작프레임워크Astro페이지와 라우팅프레임워크AstroIslands프레임워크Astro컴포넌트 통합프레임워크Astro베스트 프랙티스