VanillaFront

Va.MonthField — 라벨 + 년-월 선택 필드Va.MonthPicker가 순수 년-월 입력이라면, Va.MonthField는 그 위에 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.MonthPicker를 소유하는 Composition 구조. DateField·YearField와 같은 형제로, 월간 리포트·월별 필터 폼에 정확히 맞습니다.클래스: Va.MonthField — va_component.js:8743short name: monthField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.MonthPicker 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-fiel..

Va.YearField — 라벨 + 년도 선택 필드Va.YearPicker가 순수 년도 입력이라면, Va.YearField는 그 위에 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.YearPicker를 소유하는 Composition 구조. Date 계열 Field 중에서 가장 가볍고 단순합니다.클래스: Va.YearField — va_component.js:8645short name: yearField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.YearPicker 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field (role="date-field" 자동 부여)1. 기본..

Va.YearPicker — 년도만 선택하는 캘린더 팝업Va.DatePicker의 축소판. 년도 하나만 선택하는 데 특화된 컴포넌트입니다. 팝업엔 10년 단위 그리드가 표시되고, 화살표로 10년씩 이동합니다. 회계연도·연간 통계·설립연도 같은 필드에 적합해요.클래스: Va.YearPicker — va_component.js:6383short name: yearPicker상속: Va.PureField (DatePicker와 형제)isContainer: true베이스 CSS: va-yearpicker (팝업 va-menu-pop, calendar-inner) 1. 기본 사용{ tagName: 'yearPicker', value: '2024', onSelect: 'onYearChange'}화면..

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

https://vanillafront.com 참조VanillaFront 튜토리얼 — 7. 다국어라벨과 메시지를 프로젝트 언어별로 표시하는 다국어 처리. VanillaFront는 크게 두 개의 도구를 제공합니다.Va.Lang — 사전 기반 번역Va.Locale — 현재 UI 언어 설정 (ko/en/es)작지만 명확한 시스템입니다. 이번 편에서 흐름을 정리합니다.개념 정리두 개념이 짝을 이룹니다.도구역할Va.Locale지금 UI가 어떤 언어인지 관리Va.Lang그 언어에 맞는 텍스트를 사전에서 꺼냄언어 설정: Va.Locale.setLanguage('en')사전 세팅: Va.Lang.setData({...})번역 조회: Va.Lang.get('번호') → no (영어 모드일 때)여기에 편의 별칭 두 개가 더..

https://vanillafront.com 참조VanillaFront 튜토리얼 — 6. 서비스MVP의 M(Model) 자리를 담당하는 서비스입니다. 서버 통신·데이터 로직을 뷰에서 분리해서 담는 층이죠. VanillaFront는 서비스 구현을 위한 세 가지 HTTP 도구(Va.Http, Va.HttpRest, Va.HttpSync)와 표준 데이터 프로토콜을 제공하지만, 외부 라이브러리(axios 등)도 자유롭게 섞어 쓸 수 있게 열어놨습니다.서비스란이전 MVP 편에서 짚었듯이 서비스는 뷰와 별개로 서버 통신·비즈니스 로직을 담는 독립 모듈입니다.View와 서비스는 N:N 관계 — 한 뷰가 여러 서비스를 쓰고, 한 서비스가 여러 뷰에서 재사용됨Va.Service를 상속받아 만드는 것이 관행 (필수는 아님..

https://vaillafront.com 참조VanillaFront 튜토리얼 — 5. MVP 패턴지금까지 화면(View)과 이동(Router)을 다뤘습니다. 그런데 실제 업무 화면은 데이터를 조회하고, 서버에 전송하고, 결과에 따라 UI를 갱신하는 로직으로 반은 차 있습니다. 이 로직을 View 안에 다 몰아넣으면 파일이 금세 무거워지죠.이번 편은 VanillaFront가 채택한 MVP 패턴 — 화면과 로직을 어떻게 나누는지에 관한 이야기입니다.MVP 패턴이란Model — View — Presenter의 약자입니다.계층역할Model데이터·비즈니스 로직 (서버 통신 포함)View화면에 보이는 UIPresenterView와 Model 사이를 중재하는 컨트롤 로직핵심: View가 Model에 직접 붙지 않습..

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

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..