프론트엔드 도구의 전략적 선택: Vue.js 탐구와 Vue3 적용

이 게시물은 React 중심의 프론트엔드 환경에서 프로젝트 목적에 맞게 Vue.js를 선택하고, Vue2 기반 서비스의 Vue3 전환 경험을 정리합니다.

Vue.js 채택 배경과 장점

• 백오피스 특성상 적은 리소스로 빠른 구축이 필요해 경량·점진적 도입이 가능한 Vue를 선택
• Tree Shaking 친화적 번들 크기(최소 16KB, 기능 전체 사용 시 27KB)와 비교적 우수한 성능을 강조
• SFC 기반 구조로 HTML/CSS/JS에 익숙한 인력이 참여·유지보수하기 쉬움을 설명

Vue 핵심 개념과 문법

• 선언적 렌더링과 반응성(ref 등)으로 상태 변화에 따른 DOM 업데이트를 자동화
• SFC(*.vue)에서 템플릿/로직/스타일을 한 파일에 캡슐화하고, HMR 등 개발 경험 이점을 소개
• Options API와 Composition API를 비교하고, Vue3에서는