VanillaFront

Va.ResponsiveNav — 자동 반응형 내비게이션 바 컴포넌트뷰포트 크기에 따라 자동으로 레이아웃을 전환하는 반응형 내비게이션 컴포넌트입니다. 데스크톱/태블릿에서는 헤더에 메뉴가 가로로 나열되고, 모바일에서는 자동으로 햄버거 버튼 방식으로 접힙니다. 화면 크기에 맞춰 자식 컴포넌트가 menuDiv ↔ menuPop 사이를 자동 이동하므로, 반응형 처리를 별도 코드로 짤 필요가 없습니다. overlay 모드, 상단/하단 위치, 외부 클릭 자동 닫힘까지 지원합니다.클래스 정보Va.ResponsiveNav extends Va.ComponenttagName: 'responsiveNav'isContainer: true기본 HTML: 요소 (aria-labelledby 자동 부여)파일: va_compone..

Va.NavigationMenuBar — 확장형 메뉴 내비게이션 바햄버거 메뉴 버튼과 확장 가능한 메뉴 영역을 결합한 상단 내비게이션 컴포넌트입니다. 헤더 우측에 자동으로 메뉴 버튼(햄버거 아이콘)이 배치되고, 클릭하면 아래로 펼쳐지는 메뉴 팝 영역에 메뉴 항목들이 표시됩니다. 모바일 친화적인 접기/펼치기 UX가 필요한 애플리케이션이나, 메뉴 항목이 많아 상단 바에 다 배치하기 어려운 경우에 적합합니다.클래스 정보Va.NavigationMenuBar extends Va.ComponenttagName: 'navigationMenuBar'isContainer: true기본 HTML: 요소파일: va_component.js기본 사용법{ tagName: 'navigationMenuBar', titl..

Va.NavigationBar — 상단 내비게이션 바 컴포넌트애플리케이션의 상단 헤더 영역을 담당하는 내비게이션 바 컴포넌트입니다. 좌측에 타이틀(또는 로고), 가운데에 메뉴 영역, 우측에 유틸 영역을 가진 3분할 구조로, 웹 애플리케이션에서 가장 표준적인 상단 바 레이아웃을 제공합니다. 내부에 menuButton, button 등을 자유롭게 배치할 수 있으며, menuAlign 속성으로 메뉴의 정렬 위치를 좌·중·우로 지정할 수 있습니다. 클래스 정보Va.NavigationBar extends Va.ComponenttagName: 'navigationBar'isContainer: true기본 HTML: 요소 (접근성 role 자동 부여)파일: va_component.js기본 사용법{ tagNam..

Va.PivotGrid — 크로스탭 집계 그리드 컴포넌트평평한 원본 데이터를 축(row/column/value)으로 교차 집계하여 표 형태로 표시하는 피벗 그리드 컴포넌트입니다. Excel 피벗 테이블과 유사한 구조로, 행 축·열 축·값 축을 컬럼에 지정하기만 하면 프레임워크가 자동으로 컬럼을 확장하고 집계값을 계산합니다. Va.Grid를 상속받아 가상 스크롤, 정렬, 고정 컬럼, 다단 헤더, 다중 선택 등 그리드의 모든 기능을 그대로 계승합니다.클래스 정보Va.PivotGrid extends Va.GridtagName: 'pivotGrid'isContainer: false파일: va_pivotgrid.js기본 사용법{ ref: 'refPivotGrid', tagName: 'pivotGrid'..

Va.TreeGrid — 계층 데이터 그리드 컴포넌트부모-자식 관계를 가진 계층 데이터를 표 형태로 표시·편집·조회하는 트리 그리드 컴포넌트입니다. Va.Grid를 상속받아 가상 스크롤, 정렬, 필터링, 고정 컬럼, 셀 인라인 편집(FlashTag), 셀 내 상시 컴포넌트(Tag), 다단 헤더, 요약 행, 다중 선택 등 그리드의 모든 기능을 계승하면서, 노드 확장/축소, 트리 렌더링, 트리를 지키는 정렬·필터, 폴더 모드까지 트리 전용 기능을 제공합니다.클래스 정보Va.TreeGrid extends Va.GridtagName: 'treeGrid'isContainer: false파일: va_treegrid.js기본 사용법{ ref: 'refTreeGrid', tagName: 'treeGrid',..

웹 컴포넌트 시대의 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..