VanillaFront

https://vanillafront.com 참조VanillaFront 튜토리얼 — 4. 라우터뷰가 화면 단위라면, 라우터는 그 뷰들을 URL로 연결하는 시스템입니다. 브라우저 주소창의 URL 변화, 앞/뒤로가기 버튼, 새로고침 후에도 같은 화면 유지 — 모두 라우터가 해줍니다.VanillaFront는 SPA(Single Page Application) 라우팅의 복잡성을 최소화하는 데 집중했습니다. 이번 편에서 그 구조를 정리합니다.왜 라우터가 필요한가과거 MPA(Multi Page Application)에서는 HTML 파일 하나가 페이지 하나였습니다. URL이 곧 파일이었으므로 브라우저가 알아서 이전/다음 페이지를 관리해줬죠.SPA 시대에는 이야기가 달라졌습니다:HTML은 시작 페이지 하나뿐 — 모든 ..

https://vanillafront.com 참조VanillaFront 튜토리얼 — 3. 뷰(View)컴포넌트가 벽돌이라면, **뷰는 방(room)**입니다. 화면 하나를 담는 단위 — 그 안에 컴포넌트를 배치하고, 라이프사이클을 갖고, 다른 뷰와 연결됩니다. 이번 편에서는 Va.View가 어떻게 만들어지고 관리되는지 정리합니다.뷰란화면을 이루는 기본 단위입니다. 전체 페이지 하나가 뷰가 될 수도 있고, 페이지 안의 작은 영역이 뷰가 될 수도 있어요. 한 뷰가 다른 뷰를 자식으로 갖는 것도 가능합니다.하나의 뷰는 하나의 최상위 컴포넌트로 시작합니다.그 아래로 자식 컴포넌트를 배치해 화면을 구성합니다.화면 조작·데이터·이벤트 처리는 뷰 단위로 개발합니다.SPA(Single Page Application) ..

https://vanillafront.com 참조VanillaFront 튜토리얼 — 2. 컴포넌트첫 편에서 "화면은 JSON 트리로 선언한다"고 이야기했습니다. 이번엔 그 트리의 벽돌 하나 — 컴포넌트가 어떻게 정의되고 어떻게 조립되는지 파고듭니다.컴포넌트란VanillaFront에서 화면을 구성하는 모든 UI 단위입니다. 단순한 하나부터 그리드·다이어그램 같은 복잡한 위젯까지 모두 "컴포넌트"라는 같은 개념으로 다룹니다.특징을 나열하면:하나의 클래스로 정의된 객체입니다. React·Vue가 태그 중심이라면 VanillaFront는 객체 중심입니다.1개 또는 여러 개의 element로 구성됩니다. 그리드처럼 내부에 수십 개 DOM 요소를 가진 것도 하나의 컴포넌트로 취급합니다.누구나 새로 만들거나 상속받..

https://vanillafront.com 참조VanillaFront 튜토리얼 — 1. 시작하기블로그 첫 편입니다. VanillaFront가 무엇인지, 왜 만들었는지, 그리고 HTML 파일 하나로 시작하는 가장 짧은 경로까지 정리합니다.VanillaFront란한 줄로 말하면 — 빌드 도구 없이 순수 JavaScript(ES6 Modules)만으로 만드는 B2B 엔터프라이즈 UI Framework 입니다.웹팩·바벨·npm install 필요 없음브라우저가 표준 ES6 모듈을 그대로 읽어 실행파일 저장 → 새로고침이 곧 개발 사이클그 위에 약 120종의 UI 컴포넌트(버튼·필드·그리드·차트·다이어그램)를 미리 제공왜 만들었나1. Vanilla JS의 활용어떤 프레임워크를 쓰든 결국 우리는 다시 Vanil..

Va.DateTimePicker — 날짜 + 시간을 한 필드에 입력받는 캘린더 팝업Va.DatePicker에 시간(시:분:초)까지 추가된 컴포넌트. 2024-12-25 14:30:00 형태로 날짜와 시간을 하나의 필드에서 다룹니다. 캘린더 팝업 UI + 마스킹된 필드 입력, 화면-저장 포맷 분리까지 DatePicker의 특성을 전부 계승합니다.클래스: Va.DateTimePicker — va_component.js:7470short name: dateTimePicker상속: Va.PureField (DatePicker와 형제)isContainer: true베이스 CSS: va-input (팝업 va-menu-pop, 달력 calendar-inner)소스 크기: 약 828줄1. 기본 사용{ tagNa..

Va.DateField — 라벨 + 캘린더 팝업 날짜 필드Va.DatePicker가 순수 날짜 입력이라면, Va.DateField는 그 위에 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.DatePicker를 소유하는 Composition 구조.클래스: Va.DateField — va_component.js:7223short name: dateField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.DatePicker 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field (role="date-field" 자동 부여)1. 기본 사용{ tagName: 'dateField'..

Va.DatePicker — 캘린더 팝업이 있는 날짜 선택 필드날짜를 입력받는 컴포넌트. 좌측에 날짜 마스킹(YYYY-MM-DD) 입력창, 우측에 캘린더 아이콘이 있고, 아이콘 클릭 또는 Enter 시 월간 캘린더 팝업이 열립니다. ColorPicker와 같은 팝업 패턴을 따르되, 내부에 달력 렌더링 로직이 붙어 있습니다.클래스: Va.DatePicker — va_component.js:6654short name: datePicker상속: Va.PureField (Input/Combobox와 형제)isContainer: true베이스 CSS: va-input (팝업은 va-menu-pop, 달력은 calendar-inner)소스 크기: 약 566줄1. 기본 사용{ tagName: 'datePicke..

Va.FilterboxField — 라벨 + 실시간 필터링 드롭다운 + 검증Va.Filterbox가 순수 필터박스라면, Va.FilterboxField는 그 위에 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.Filterbox를 소유하는 Composition 구조. ComboboxField의 사촌.클래스: Va.FilterboxField — va_component.js:5797short name: filterboxField상속: Va.Field (ComboboxField·TagField 등과 형제)내부 컴포넌트: Va.Filterbox 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-combobox-fiel..

Va.Filterbox — 타이핑으로 실시간 필터링되는 드롭다운Va.Combobox가 "옵션에서 선택"이라면, Va.Filterbox는 "옵션이 많을 때 타이핑으로 좁혀 찾아 선택" 하는 컴포넌트입니다. 코드 구조는 Combobox와 판박이지만, 자유 입력 + 실시간 필터링 로직이 추가되어 있어 옵션이 수십·수백 개일 때 진가를 발휘합니다.클래스: Va.Filterbox — va_component.js:2841short name: filterbox상속: Va.PureField (Combobox와 형제)isContainer: true베이스 CSS: va-filterbox (팝업은 va-menu-pop)소스 크기: 약 1632줄 — Combobox와 함께 최대 크기 1. 기본 사용{ tagName: '..

Va.TagField — 라벨 + 태그(칩) 입력 + 검증까지 감싼 완성 폼 필드Va.Tag가 순수 태그 칩 입력이라면, Va.TagField는 그 위에 라벨·필수 표시·검증 메시지·설명 텍스트 + 부모-자식 필드 바인딩을 얹은 완성 폼 필드입니다. ComboboxField와 완전히 같은 아키텍처 패턴을 따르되, 내부에 Va.Combobox 대신 Va.Tag 를 소유합니다.클래스: Va.TagField — va_tag.js:1407short name: tagField상속: Va.Field (ComboboxField·InputField 등과 형제)파일: va_tag.js (import 필요)내부 컴포넌트: Va.Tag 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va..