로직을 재사용할 수 있는 Composable🌱Composable 이란- 컴포지션 api를 가장 잘 활용할 수 있는 vue의 꽃- 컴포지션 api를 활용하여 상태 저장 비즈니스 로직을 캡슐화하고 재사용하는 기능을 말한다.※ 상태 저장 로직은 사용하면서 변경되는 상태 관리가 포함되는 로직을 말한다. 🌱Composable 작성 및 사용 방법Vue 공식 사이트에 있는 예제로 이해해보자적용 전 : 마우스 위치 추적기마우스 위치: {{ x }}, {{ y }}- 컴포넌트 내에서 컴포지션 api를 사용하여 마우스 추적 기능을 구현!- 다른 컴포넌트에서 해당 로직을 재사용하려면 이러한 로직을 외부 파일의 컴포저블 함수로 재구성하여 추출해서 사용할 수 있다! 1. 컴포저블 함수로 재구성// composables/mo..
Vue에서 플러그인 사용 방법 간단 정리📌 플러그인- Vue에서 플러그인은 일반적으로 Vue의 전역 수준(앱 레벨)의 기능을 추가할 때 사용하며, 정의된 범위는 없다. 플러그인 사용 시나리오(1) app.component()로 여러개의 전역 컴포넌트를 등록하려고 할 때(2) app.directive()로 여러개의 커스텀 디렉티브를 등록하려고 할 때(3) app.provide()로 앱 전체에 메서드 또는 데이터를 주입하려고 할 때(4) app.config.globalProperties로 전역 애플리케이션 인스턴스에 속성 또는 메서드를 추가하려고 할 때(5) 위의 몇가지 조합을 수행하는 라이브러리를 설치하려고 할 때 (ex: vue-router) 플러그인 작성 방법1 - install 메서드를 가진..
Vue의 Custom Directives✂️ 커스텀 디렉티브- 직접 커스텀한 디렉티브- 커스텀 디렉티브는 주로 HTML 요소에 대한 low-level(저수준) DOM 접근과 관련된 로직을 재사용하기 위한 것이다.※ Vue에서는 UI 재사용할 땐 Component, 상태를 저장하는 비즈니스 로직을 재사용할 때는 Composables을 사용한다. Custom Directives 등록 방법(1) script setup에서 커스텀 디렉티브 등록- v 접두사로 시작하는 모든 카멜케이스 변수를 커스텀 디렉티브로 사용할 수 있다. (2) 일반 script에서 커스텀 디렉티브를 등록- directives 옵션을 사용하여 커스텀 디렉티브를 등록 (3) 전역적으로 커스텀 디렉티브 등록// main.jsapp.direct..
Vue의 내장 컴포넌트, Built-in Component🧱 Built-in Component란- Vue에서 기본적으로 제공하는 내장 컴포넌트- 동적 컴포넌트를 렌더링하기 위한 '메타 컴포넌트'로 KeepAlive, Transition, Teleport 등이 있다. 🧱 KeepAlive - 기본적으로 컴포넌트의 인스턴스는 전환하게되면 마운트가 해제되어 모든 변경상태가 사라진다.- 컴포넌트를 다시 표시하게 되면 초기 상태의 새 컴포넌트가 생성된다.- KeepAlive는 컴포넌트 인스턴스가 비활성 상태일 경우에도 상태를 보존할 수 있도록 해준다. 🧱 Transition토글 안녕 - Vue에서 트렌지션과 애니메이션을 쉽게 줄 수 있는 내장 컴포넌트- 컴포넌트가 DOM에 나타나고 사라질 때 애니메..
Vue Composition api의 반응형 유틸리티 함수 (toRef, toRefs)😚toRef()- 반응형 객체의 속성을 하나의 ref 객체로 만들 때 사용한다.즉, 반응형을 잃지 않은채로 뽑을 때 사용하는 api- 생성된 ref 객체는 원본 반응형 객체의 속성과 동기화된다! toRef 사용 방법(1) 반응형 객체 생성const state = reactive({ foo: 1, bar: 2}) (2) ref로 추출const fooRef = toRef(state, 'foo') (3) 참조를 변경하면 원본이 업데이트된다fooRef.value++console.log(state.foo) // 2 (4) 원본을 변경하면 ref도 업데이트된다state.foo++console.log(fooRef.va..
