VanillaFront

Va.AvatarGroup — 아바타 그룹 컨테이너여러 아바타를 나란히 또는 겹쳐 표시하고, 지정 개수 초과 시 자동으로 +N 팝업으로 접어주는 컨테이너입니다. 협업 UI에서 프로젝트 참여자, 채팅 참가자, 팀 멤버 목록 등을 콤팩트하게 표시할 때 사용됩니다. 클래스 정보Va.AvatarGroup extends Va.ComponenttagName: 'avatarGroup' (실제 렌더링은 )isContainer: true파일: va_avatar.js (Va.Avatar와 같은 모듈)기본 사용법{ tagName: 'avatarGroup', stackSize: 4, layout: 'stack', tags: [ { tagName: 'avatar', image: user1.ph..

Va.Avatar — 사용자 표현 아바타 컴포넌트사용자를 아이콘, 이니셜, 또는 이미지로 표현하는 아바타 컴포넌트입니다. 원형/사각형 모양, 활성 상태 표시, 뱃지 오버레이 기능을 내장하며 SNS/협업 UI에 최적화되어 있습니다. 클래스 정보Va.Avatar extends Va.ComponenttagName: 'avatar' (실제 렌더링은 )isContainer: false파일: va_avatar.js (별도 모듈)기본 사용법이미지 아바타 (프로필 사진):{ tagName: 'avatar', image: './assets/img/user.jpg', size: 'medium'}이니셜 아바타 (사진 없을 때):{ tagName: 'avatar', initial: 'HG', ..

Va.I — 아이콘 표시 컴포넌트VanillaFront 아이콘을 표시하는 전용 컴포넌트입니다. HTML 태그로 렌더링되며, ico_xxx 클래스로 정의된 mask-image 방식 아이콘을 편리하게 배치합니다. Va.Component를 직접 상속합니다.클래스 정보Va.I extends Va.ComponenttagName: 'i'isContainer: true기본 사용법{ tagName: 'i', icon: 'ico_add'}또는 코드로:let icon = new Va.I({ icon: 'ico_edit_fill' });parent.append(icon);VanillaFront 아이콘 시스템VanillaFront는 CSS mask-image 방식의 SVG 아이콘 시스템을 사용합니다:각 아이콘은 ..

Va.Image — 이미지 표시 컴포넌트 태그를 감싸 shape, bordered, shadow, 로드 실패 대체 이미지 등의 실전 옵션을 제공하는 이미지 컴포넌트입니다. Va.Component를 직접 상속하며 va-image 클래스가 부여됩니다. 클래스 정보Va.Image extends Va.ComponenttagName: 'image' (실제 렌더링은 )isContainer: false기본 사용법{ tagName: 'image', src: './assets/img/logo.png', style: { width: '200px', height: 'auto' }}또는 코드로:let image = new Va.Image({ src: './assets/img/photo.jpg', b..

Va.StickyDiv — 스크롤 시 고정되는 Sticky 컨테이너스크롤해도 화면 특정 위치에 고정되는(sticky) 컨테이너입니다. CSS position: sticky를 자동 적용하며, position 속성으로 top/bottom/left/right 중 고정 위치를 지정할 수 있습니다.클래스 정보Va.StickyDiv extends Va.ComponenttagName: 'stickyDiv' (실제 렌더링은 )isContainer: trueVa.Div가 아니라 Va.Component를 직접 상속하지만, CSS 클래스는 va-div sticky가 부여되어 Div 계열 스타일을 재사용합니다.기본 사용법{ tagName: 'stickyDiv', position: 'top', style: { ..

왜 이 글은 상용 3사(Nexacro / WebSquare / eXBuilder)와만 비교하는가먼저 오해가 없도록 짚고 갑니다. 이 글은 React·Vue·Svelte 같은 범용 오픈소스 프론트엔드 라이브러리를 비교 대상에서 의도적으로 제외합니다. 이유는 세 가지입니다.시장 성격이 다릅니다. React/Vue는 범용 UI 라이브러리이고, 국내 B2B/공공 SI에서 "UI Framework"라는 이름으로 도입 검토되는 대상은 대부분 엔터프라이즈 그리드·트리·차트·리포트·폼 검증까지 하나의 스택으로 묶어 납품·유지보수 계약이 가능한 상용 UI Framework입니다. 도입 결재 라인, 요구되는 인증(GS인증 등), 하자보수 책임 구조 자체가 다릅니다.패키지 완결성 관점의 비교가 무의미해집니다. React/V..

시작하며한국 엔터프라이즈 웹 개발 시장에서 자리 잡은 세 개의 상용 UI Framework와 VanillaFront를 항목별로 비교합니다.Nexacro (넥사크로) — 투비소프트(TOBESOFT)WebSquare (웹스퀘어) — 인스웨이브 시스템즈(Inswave Systems)eXBuilder (엑스빌더) — 토마토시스템(Tomatosystem)세 제품은 국내 SI 시장에서 오랜 실적을 축적한 표준급 도구들이고, VanillaFront는 다른 축에서 같은 시장을 겨냥합니다. 각 제품이 서로 다른 특성을 가지므로 개별 제품으로 나눠서 특성을 정리한 뒤 항목별로 비교합니다.1. 각 제품 개요1.1 Nexacro (넥사크로) — 투비소프트계보XPlatform·MiPlatform의 후속 제품국내 SI 시장에서 ..

시작하며2015년 무렵부터 프론트엔드 개발의 표준은 Webpack 이었습니다. React·Vue·Angular 어느 쪽을 쓰든 결국 Webpack config를 만지고, dist/main.[hash].js 를 배포하는 흐름이었죠. Webpack이 없으면 모던 프론트엔드 개발이 안 된다는 인식이 굳어질 만큼 표준이었습니다.VanillaFront는 그 표준을 의도적으로 벗어난 프레임워크입니다. Webpack 없이, 번들러 없이, 브라우저가 ES6 모듈을 직접 로드하는 구조로 설계했습니다. 이 선택의 배경에는 단순히 "번들러 세팅이 귀찮아서" 라는 이유가 아닌, 번들 스플리팅이 야기하는 복잡도, 모던 브라우저의 성숙, HTTP/2 이후 성능 모델의 변화 라는 세 축이 있습니다.이 글에서는 Webpack의 장점..

React vs ExtJS vs VanillaFront프론트엔드 개발 도구를 검토할 때 자주 저울에 오르는 이름 React와 글로벌 엔터프라이즈 UI Framework인 ExtJs입니다. 여기에 VanillaFront를 같이 비교해봅니다. 세 도구는 성격이 다르고 각자 잘 맞는 자리가 있습니다. 이 글에서는 항목별 특성과 실제 코드를 함께 비교합니다.한눈에 요약 구분ReactExtJsVanillaFront성격UI 렌더링 라이브러리통합 프레임워크통합 프레임워크클래스 시스템함수·클래스 컴포넌트자체 클래스 시스템표준 ES6 class모듈 시스템ES6 import + 번들러자체 모듈 시스템ES6 import (No-Build)그리드·차트·다이어그램별도 라이브러리 조합내장내장상태 관리라이브러리 조합자체 Store..

한 줄 요약: 둘은 서로 다른 시장과 문제를 푸는 다른 방향의 접근입니다. 그런데 놀랍게도 ES6 클래스·모듈·async/await 같은 밑바닥이 완전히 같고, React 개발자가 VanillaFront에 자연스럽게 진입할 수 있는 유사점이 많습니다. 이 글은 React 개발자 관점에서 **이미 아는 것 90%, 새로 배울 것 10%**를 정직하게 짚습니다.시작하며 — 대체가 아니라 서로 다른 방향먼저 이 글의 톤을 명확히 합니다. VanillaFront는 React를 대체하려는 프레임워크가 아닙니다. React는 세계 최대 프론트엔드 라이브러리이자 압도적 생태계·커뮤니티·자료를 가진 훌륭한 도구입니다. 컨슈머 앱·랜딩 페이지·이커머스·글로벌 서비스 등 자유로운 UI 표현이 우선인 시장에서 React의 ..