VanillaFront

https://vanillafront.com 참조VanillaFront 튜토리얼 — 추가편 · 차트지난 여덟 편으로 프레임워크의 기본 개념은 모두 다뤘습니다. 이번은 추가편 — 실무에서 가장 자주 요구받는 컴포넌트 중 하나인 차트를 정리합니다.VanillaFront는 20종 이상의 차트를 기본 제공합니다. 별도 라이브러리 없이 Va.Chart 계열 컴포넌트 하나로 처리되며, 모든 차트가 동일한 데이터 규약을 따라서 한 번 익히면 나머지 차트로 확장이 수월합니다.1. 시작 — 별도 라이브러리 import차트는 크기가 커서 코어(va.js)와 분리되어 있습니다. 사용 전 반드시 로드하세요.import Va from '../../lib/va.js';import '../../lib/va_chart.js'; ..

https://vanillafront.com 참조VanillaFront 튜토리얼 — 8. 테마시리즈 마지막 편입니다. 화면 룩앤필을 결정하는 테마 시스템을 정리합니다.VanillaFront는 11종의 기본 테마 + tight 변형을 제공하고, 그 아래엔 CSS 변수 기반 설계가 있어 프로젝트에 맞게 커스터마이즈하기도 쉽습니다. Shadow DOM 덕분에 화면별로 다른 테마를 적용하는 것도 가능해요.테마 시스템 개요두 종류의 CSS 파일이 짝을 이룹니다.va.css — 프레임워크 공통 구조·레이아웃 (변수를 참조만 함)va-{테마명}.css — 각 테마가 정의하는 CSS 변수 값 세트앱 초기화 시 두 파일을 함께 로드해 Va.addStyleSheet()로 등록하면 이후 만들어지는 모든 View에 자동 적용..

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에 직접 붙지 않습..