Vue 3 주요 기능 및 사용법
Vue 3 소개
Vue 3는 Vue 2와의 하위 호환성을 유지하면서 새로운 기능과 개선된 성능을 제공합니다. 주요 변경 사항 중 하나는 Composition API입니다. 이 새로운 접근 방식은 코드를 더 직관적이고 재사용 가능하게 만듭니다.
옵션형 API vs 조합형 API
Vue 3에서는 기존의 옵션형 API 외에도 조합형 API를 지원합니다. 조합형 API는 비슷한 로직을 그룹화하여 관리하 ...
7월 11일 05:16에 게시됨
Vue 3 Composition API로 ECharts 차트 컴포넌트 재사용성 높이기
데이터 시각화 프로젝트나 대시보드를 구축할 때, 유사한 형태의 차트를 반복해서 구현하는 것은 비효율적입니다. Vue 3의 Composition API와 ECharts를 결합하여 재사용 가능한 차트 컴포넌트를 캡슐화하는 방법을 살펴보겠습니다.
부모 컴포넌트에서의 활용
캡슐화된 차트 컴포넌트를 부모 컴포넌트에서 호출할 때는 필요한 데이터와 스타일 속성을 Props로 전달합니다. ...
7월 9일 17:55에 게시됨
Vue3 반응형 상태 관리를 위한 toRef, toRefs, unref, isRef 심층 분석
Vue3의 Composition API에서 ref와 reactive는 반응형 데이터를 생성하는 가장 기본적인 도구입니다. 하지만 실제 프로젝트에서는 reactive 객체를 구조 분해할 때 반응형이 손실되거나, ref와 일반 값을 일관되게 처리해야 하는 등 다양한 엣지 케이스에 직면하게 됩니다. 이러한 문제를 해결하고 반응형 시스템의 안정성을 높이기 위해 toRef, toRefs, unref, isRef API ...
7월 2일 17:09에 게시됨
Vue 3 script setup 환경에서 부모 컴포넌트가 자식 데이터에 접근하고 수정하는 패턴
Vue 3의 <script setup> 구문에서는 컴포넌트 인스턴스가 기본적으로 닫혀 있어 부모가 자식의 내부 상태에 직접 접근할 수 없습니다. 하지만 아키텍처 요구사항에 따라 부모 컴포넌트가 자식 컴포넌트의 데이터를 제어해야 하는 상황이 발생할 수 있습니다. 이를 구현하는 두 가지 주요 기술적 패턴을 살펴봅니다.
패턴 1: defineExpose와 ref를 활용한 직접 접근
...
6월 6일 19:50에 게시됨