Vue (4) 썸네일형 리스트형 Vite: 차세대 프론트엔드 개발 도구 Vite란 무엇인가?Vite(프랑스어로 "빠르다"는 뜻)는 Evan You(Vue.js 창시자)가 만든 차세대 프론트엔드 빌드 도구입니다. 기존의 Webpack이나 Parcel 같은 번들러들이 가진 느린 개발 서버 시작 속도와 느린 HMR(Hot Module Replacement) 문제를 해결하기 위해 탄생했습니다.왜 Vite가 필요할까?기존 번들러 기반 개발 환경의 문제점을 이해하면 Vite의 필요성이 명확해집니다.전통적인 번들러의 한계느린 서버 구동: 프로젝트가 커질수록 개발 서버를 시작하는 데 수 분이 걸리기도 함느린 업데이트: 파일 하나를 수정해도 전체 번들을 다시 빌드해야 하는 경우가 많음비효율적인 리소스 사용: 필요하지 않은 모듈까지 번들링하여 메모리 낭비Vite의 핵심 원리1. ESM(ES .. 📱 Framework7로 만든 앱을 Android APK로 패키징하는 방법 Framework7은 Vue, React, Svelte 등과 통합해서 사용할 수 있는 강력한 모바일 UI 프레임워크입니다. 이번 글에서는 Framework7 + Vue + Vite 조합으로 만든 프로젝트를 Android에서 실행 가능한 APK 파일로 패키징하는 전 과정을 소개합니다.✅ 1. 프로젝트 빌드 준비먼저 프로젝트 내 웹 자산을 빌드합니다. Vite 기반이라면 아래 명령어로 빌드하면 됩니다:npm run build이 작업을 통해 www 또는 dist 폴더에 index.html과 번들된 자바스크립트 파일들이 생성됩니다.✅ 2. Capacitor 설정 및 Android 플랫폼 추가웹 앱을 네이티브 앱으로 감싸기 위해 Capacitor를 사용합니다.npx cap init질문에 답하며 앱 이름과 ID (.. Vue 3에서 컴포넌트 간 데이터 변동을 감지하고 관리하는 주요 방법들 Vue 3는 컴포넌트 간 통신을 위한 다양한 방법을 제공합니다. 오늘은 부모 컴포넌트와 자식 컴포넌트 사이에서 데이터 변동을 감지하는 주요 방법들에 대해 알아보겠습니다.1. Props와 Emits부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식에서 부모로 이벤트를 전달합니다. 부모 컴포넌트: 자식 컴포넌트: {{ message }} Send Update 2. v-model컴포넌트에서 간단한 양방향 바인딩을 구현할 때 사용합니다. 부모 컴포넌트: 입력값: {{ inputValue }} 자식 컴포넌트 (CustomInput): 3. provide/inject깊은 컴포넌트 트리에서 데이터를 전달할 때 유용합니다. 최상위 컴포넌트: 깊이 중첩된 자식 컴포넌트: {{ sh.. countdown timer 설정 {{ elapsedTime }} 이전 1 다음
