VanillaFront

웹 컴포넌트 시대의 View 격리 — 그 결정 배경과 실전 효과도입브라우저 UI 프레임워크를 만들 때 가장 먼저 마주하는 문제는 화면과 화면 사이의 간섭입니다. 스타일이 뒤섞이고, id 값이 충돌하고, 이벤트가 엉키고, 다른 라이브러리와 부딪히죠. 이 문제는 웹이 30년 넘게 안고 온 근본 문제입니다.VanillaFront는 이 문제를 Shadow DOM으로 정면 돌파한 프레임워크입니다. 지금은 이 결정이 자연스럽고 표준적으로 보이지만, 프레임워크 설계 관점에서는 신중한 트레이드오프 계산이 있었습니다. 이 글은 그 배경과 실전 효과를 정리한 글입니다.Shadow DOM이 무엇인가Shadow DOM은 W3C 웹 표준(Web Components 표준의 일부)으로, 특정 DOM 요소에 캡슐화된 별도의 DOM ..

Va.Grid — 데이터 그리드 컴포넌트대량 데이터를 테이블 형태로 표시·편집·조회하는 핵심 그리드 컴포넌트입니다. 가상 스크롤, 정렬, 필터링, 그룹핑, 고정 컬럼, 셀 인라인 편집(FlashTag), 셀 내 상시 컴포넌트(Tag), 엑셀/CSV 다운로드/업로드, 다단 헤더, 요약 행, 다중 선택 등 실무에서 필요한 그리드 기능을 총망라합니다.클래스 정보Va.Grid extends Va.ComponenttagName: 'grid'isContainer: false파일: va_grid.js기본 사용법{ ref: 'refGrid', tagName: 'grid', style: { flex: 1, minHeight: '400px', width: '100%' }, columns: [ ..

Va.Toolbar — 오버플로우 스크롤 지원 툴바 컨테이너여러 버튼/컴포넌트를 나란히 배치하되, 폭/높이가 부족하면 자동으로 좌우(또는 상하) 스크롤 버튼이 나타나는 툴바입니다. Va.Div를 상속하며 반응형 툴바 UX를 내장합니다. 클래스 정보Va.Toolbar extends Va.Div extends Va.ComponenttagName: 'toolbar' (실제 렌더링은 )isContainer: true기본 사용법{ tagName: 'toolbar', direction: 'horizontal', tags: [ { tagName: 'button', text: '조회', icon: 'ico_search' }, { tagName: 'button', text: '추..

Va.Badge — 알림·상태 표시 뱃지 컴포넌트숫자, 짧은 텍스트, 아이콘, 또는 상태 점을 표시하는 뱃지 컴포넌트입니다. 알림 카운트, 상태 표시, 카테고리 라벨 등에 사용되며, Va.Avatar·Va.Button 등 다른 컴포넌트에 오버레이로 붙기도 합니다. 클래스 정보Va.Badge extends Va.ComponenttagName: 'badge' (실제 렌더링은 )isContainer: false기본 사용법숫자 뱃지 (알림 카운트):{ tagName: 'badge', text: '3', color: 'danger'}상태 점 (텍스트 없음):{ tagName: 'badge', color: 'success'}아이콘 뱃지:{ tagName: 'badge', ico..

Va.Persona — 아바타 + 이름·역할 조합 컴포넌트Va.Avatar를 감싸 이름(title)과 부가 설명(detail)을 함께 표시하는 조합 컴포넌트입니다. "사용자 사진 + 이름 + 직책" 처럼 사람 정보를 한 단위로 표현하는 데 최적화되어 있으며, 텍스트 위치를 자유롭게 배치할 수 있습니다. 클래스 정보Va.Persona extends Va.ComponenttagName: 'persona' (실제 렌더링은 )isContainer: true파일: va_avatar.js기본 사용법{ tagName: 'persona', title: '홍길동', detail: '개발팀장', textPosition: 'right', avatar: { image: user.phot..