Vue 3 Composition API로 ECharts 차트 컴포넌트 재사용성 높이기
데이터 시각화 프로젝트나 대시보드를 구축할 때, 유사한 형태의 차트를 반복해서 구현하는 것은 비효율적입니다. Vue 3의 Composition API와 ECharts를 결합하여 재사용 가능한 차트 컴포넌트를 캡슐화하는 방법을 살펴보겠습니다.
부모 컴포넌트에서의 활용
캡슐화된 차트 컴포넌트를 부모 컴포넌트에서 호출할 때는 필요한 데이터와 스타일 속성을 Props로 전달합니다. ...
7월 9일 17:55에 게시됨
Vue3와 Spring Boot 기반 실시간 알림 시스템 구축
HTTP 프로토콜의 요청-응답 방식은 클라이언트가 서버에 주기적으로 데이터를 요청해야 하는 폴링(Polling) 방식에 의존합니다. 예를 들어 실시간 주식 시세를 확인하려면 브라우저가 1~2초마다 서버에 HTTP 요청을 보내야 하며, 이는 불필요한 네트워크 부하와 지연 시간을 초래합니다.
WebSocket은 이러한 한계를 극복하는 전이중(Full-Duplex) 통신 프로토콜입니다. 한 ...
7월 8일 02:51에 게시됨
Leaflet와 Vue3로 구현하는 지도 상호작용 그리기 도구
Leaflet와 Vue3로 구현하는 지도 상호작용 그리기 도구
GIS 프로젝트에서 사용자가 지도 위에 도형을 그려 특정 영역을 표시하고 싶은 경우가 많다. 기존的大型 지도 라이브러리는 무겁고 복잡한 반면, Leaflet은 가볍고 사용하기 쉬운 대안이다. Vue3의 조합식 API와 결합하면 모던한 방식으로 지도 그리기 기능을 구현할 수 있다. 이 글에서는 Vue3 프로젝트에 Leaflet을 ...
7월 7일 01:54에 게시됨
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에 게시됨