Guidebook
ComponentsStorybook

WebSquare · Configuration

WebSquare SP5 설정

client.config.xml과 server.config.xml의 역할, escape와 배포 환경별 설정 원칙을 정리합니다.

설정 경계

client 설정은 browser에서 동작하는 engine과 화면 기본값을, server 설정은 resource 처리와 server 연동을 제어합니다. 설정을 바꾸기 전 적용 범위가 전체 project인지 특정 화면인지 확인합니다.

client.config.xml

page script scope 이름, SPA, component 기본 동작과 client resource 정책을 관리합니다. guide 예제의 scwin은 기본 이름이므로 project의 SPA variable 설정이 다르면 실제 이름으로 바꿉니다.

server.config.xml

server resource 경로, response와 운영 환경 연동 설정을 관리합니다. repository에 저장할 수 없는 endpoint와 secret은 환경별 배포 설정으로 분리합니다.

Escape 정책

화면에 표시되는 외부 data는 기본적으로 escape합니다. HTML 표시가 꼭 필요한 업무 요구는 허용 source, sanitization과 Content Security Policy를 함께 검토합니다. 공통 markup 사용을 이유로 user input의 escape를 해제하지 않습니다.

변경 확인

  1. 대상 engine version의 공식 option 이름을 확인합니다.
  2. 변경 전후 설정 diff와 영향 화면을 기록합니다.
  3. local·test·production 환경 차이를 확인합니다.
  4. cache를 비운 실제 engine에서 regression을 검증합니다.

공식 문서

가이드북소개기초디자인 토큰기초접근성컴포넌트기본 요소컴포넌트레이아웃컴포넌트폼컴포넌트네비게이션컴포넌트데이터 표시컴포넌트피드백컴포넌트기타활용 가이드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베스트 프랙티스