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에 게시됨
Vue 3 script setup 환경에서 부모 컴포넌트가 자식 데이터에 접근하고 수정하는 패턴
Vue 3의 <script setup> 구문에서는 컴포넌트 인스턴스가 기본적으로 닫혀 있어 부모가 자식의 내부 상태에 직접 접근할 수 없습니다. 하지만 아키텍처 요구사항에 따라 부모 컴포넌트가 자식 컴포넌트의 데이터를 제어해야 하는 상황이 발생할 수 있습니다. 이를 구현하는 두 가지 주요 기술적 패턴을 살펴봅니다.
패턴 1: defineExpose와 ref를 활용한 직접 접근
...
6월 6일 19:50에 게시됨
Vue-plugin-hiprint에서 사용자 정의 옵션 활용 시 주의사항
vue-plugin-hiprint는 Vue2/Vue3 기반의 고성능 프린팅 솔루션으로, 시각적 디자인과 동적 출력을 지원하는 인기 오픈소스 라이브러리입니다. 특히 0.0.56 버전부터 사용자 정의 파라미터 처리 방식에 일부 변경이 있어, 기존 코드와의 호환성 이슈가 발생할 수 있습니다.
버전 업데이트로 인한 문제 상황
0.0.50 이하 버전에서는 사용자 정의 필드를 요소 객체 최상위에 ...
6월 5일 18:07에 게시됨
Vue 3에서 사용하는 이미지 크롭 도구
Vue 3에서 사용하는 이미지 크롭 도구
Vue 3 프로젝트에서 이미지 크롭 기능을 구현하려면 vue-cropper 라이브러리가 매우 유용합니다. 이 라이브러리는 직관적인 인터페이스와 다양한 기능을 제공합니다.
설치 방법
npm install vue-cropper@next
기본 사용법
컴포넌트 임포트
import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper'
템플 ...
6월 3일 19:52에 게시됨