Vue3 + Vant UI로 구축하는 모바일 전자상거래 페이지: AI 도구를 활용한 무코드 개발 전략
AI 기반 개발 환경에서의 실시간 프로토타이핑
최근 모바일 상거래 앱의 상품 노출 페이지를 신속하게 제작할 수 있는 워크플로우를 정립했다. Vue 3와 TypeScript 기반의 프로젝트에 Vant UI 컴포넌트 라이브러리를 통합하고, AI 기반 개발 플랫폼을 활용해 초기 구조를 자동 생성함으로써 수작업 코드 작성 시간을 크게 줄였다.
기본 레이아웃 구성
Vant에서 제공하는 v ...
7월 4일 21:48에 게시됨
Vue3 반응형 상태 관리를 위한 toRef, toRefs, unref, isRef 심층 분석
Vue3의 Composition API에서 ref와 reactive는 반응형 데이터를 생성하는 가장 기본적인 도구입니다. 하지만 실제 프로젝트에서는 reactive 객체를 구조 분해할 때 반응형이 손실되거나, ref와 일반 값을 일관되게 처리해야 하는 등 다양한 엣지 케이스에 직면하게 됩니다. 이러한 문제를 해결하고 반응형 시스템의 안정성을 높이기 위해 toRef, toRefs, unref, isRef API ...
7월 2일 17:09에 게시됨
Vue 3 가상 스크롤을 활용한 대용량 리스트 최적화 구현
1. 고정 높이 가상 리스트 컴포넌트
대용량 데이터를 효율적으로 렌더링하기 위한 Vue 3 가상 스크롤 컴포넌트를 구현합니다. 화면에 보이는 항목만 렌더링하여 성능을 최적화합니다.
<template>
<div
ref="wrapperRef"
class="virtual-scroll-container"
@scroll="onScrollHandler"
>
<div
class="virtual-scroll-spacer"
...
6월 29일 16:29에 게시됨
NutUI 기반 모바일 웹 및 다중 플랫폼 앱 개발 가이드
NutUI 소개
NutUI는 Vue.js 기반의 경량 모바일 UI 컴포넌트 라이브러리로, JD 스타일의 디자인을 반영하여 직관적이고 일관된 사용자 인터페이스를 제공합니다. Vue 2와 Vue 3 모두를 지원하며, Taro 프레임워크와의 통합을 통해 H5, 위챗 소형프로그램(小程序), 그리고 기타 다수의 마이크로앱 플랫폼에서 동일한 코드베이스로 개발할 수 있습니다.
이 라이브러리는 레 ...
6월 28일 23:07에 게시됨
Vue3 기반 JeecgBoot-Vue3 프로젝트 분석: 구조, 사용 경험 및 개선 제안
오픈소스 프로젝트에 기여하는 모든 선구자들에게 경의를 표합니다. 여러분의 노력이 개방적이고 포용적이며 혁신적인 기술 세상을 구축하는 데 크게 기여하고 있습니다.
JeecgBoot-Vue3는 Vue 3와 Ant Design Vue를 기반으로 한 프론트엔드 오픈소스 프로젝트로, JEECG 백엔드와 함께 구축된 전체 스택 개발 프레임워크입니다.
프로젝트 이해 및 사용 경험
현재 JeecgBo ...
6월 27일 21:23에 게시됨
DOM 기반 XSS 방어: 프레임워크 사례와 필터 컴포넌트 개발
프론트엔드에서의 DOM 기반 XSS 방어: 2가지 프레임워크 사례 + 1개 필터 컴포넌트
"3년간 프론트엔드 개발을 했지만, Vue/React에만 익숙해서 보안 전환 시 'DOM 기반 XSS'에 대해 구체적인 방어 전략을 설명하지 못하는 경우가 많습니다." 이는 프론트엔드 개발자가 보안 분야로 전환할 때 겪는 대표적 어려움입니다.
DOM 기반 XSS는 프론트엔드 개발자에게 자연스러운 ...
6월 21일 19:28에 게시됨
프론트엔드 시스템 설계 핵심: 데이터 수집 SDK, RBAC 기반 권한 제어, 대용량 파일 처리 및 대시보드 화면 적응
1. 프론트엔드 데이터 수집(Analytics) SDK 아키텍처 설계
안정적이고 확장 가능한 프론트엔드 분석 SDK를 구축하기 위해서는 수집해야 할 핵심 지표와 데이터 전송 방식에 대한 깊은 고민이 필요합니다.
수집 대상 및 전략
페이지 뷰(PV) 및 세션: 라우터 변경 또는 페이지 로드시 자동으로 히스토리를 기록하여 트래픽 흐름을 파악합니다.
커스텀 인터랙션: 버 ...
6월 21일 17:33에 게시됨
Vue2와 Vue3의 핵심 차이점 분석
아키텍처 및 성능 개선
특징Vue2Vue3장점
반응형 시스템
Object.defineProperty
Proxy
• 전체 객체 프록싱으로 초기화 속도 향상• 동적 속성 추가/삭제 지원• Map/Set 자료형 지원
가상 DOM 최적화
전체 비교
패치 플래그 + 동적 노드 추적
• 정적 노드 호이스팅으로 렌더링 재사용• 동적 속성만 선택적 비교
트리 ...
6월 15일 21:30에 게시됨
Vue 3에서 성능과 코드 품질을 높이는 핵심 기술들
1️⃣ **v-memo —— 효율적인 컴포넌트 최적화**
리스트 항목의 내용이 변하지 않지만 자주 diff가 발생하는 경우 유용합니다.
<template>
<ul>
<li v-for="element in elements" :key="element.id" v-memo="[element.value]">
{{ element.value }}
</li>
</ul>
</template>
`computed`보다 가볍고, 의존성이 변 ...
6월 13일 17:19에 게시됨
Vue3 기반 실시간 문서 OCR 뷰어: LightOnOCR-2-1B 통합 가이드
1. 시스템 개요 및 목표
문서 업무에서 즉각적인 텍스트 추출은 생산성 향상의 핵심이다. 기존 OCR 서비스는 파일 업로드 후 결과를 기다리는 방식이었으나, 본 시스템은 문서를 업로드하는 순간부터 인식 결과를 스트리밍하는 실시간 파이프라인을 구축한다.
LightOnOCR-2-1B는 10억 파라미터 규모의 경량 엔드투엔드 OCR 모델로, 대용량 모델 대비 낮은 추론 비용으로 ...
6월 11일 16:19에 게시됨