본문 바로가기

vue3

(35)
[Vue3] 일반적인(intrinsic한) 컴포넌트 만들기 with typescript 리액트를 사용하는 경우 해당 링크의 예제처럼 일반적인 컴포넌트를 만듭니다. 아토믹 디자인을 활용한 디자인 시스템 도입기 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 그런데 Vue3는 아무리 찾아봐도 해당 패턴이 없더라구요? 아마 암시적인 Fallthrough Attribute 기능 때문인 것 같습니다. $attrs 객체는 컴포넌트의 props 또는 emit 옵션(예: 클래스, 스타일, v-on 리스너 등)에 의해 선언되지 않은 모든 속성을 포함합니다. (주 : props 필터링을 통해 서브 컴포넌트의 계층화, 관심사의 분리에도 활용 가능) 해당 $attrs 객체의 typing을 지원한다면, 좀 더 쉽게 구현을 가이드할 수 있지 않을까요? Vue3은 runtime-d..
vue3의 반응성(reactivity) 원리 간단 정리 출처 : https://vuejs.org/guide/extras/reactivity-in-depth.html Reactivity in Depth | Vue.js vuejs.org 아래와 같은 코드가 실행된다 가정하자 import { ref, watchEffect } from 'vue' const A0 = ref(0) const A1 = ref(1) const A2 = ref() watchEffect(() => { // tracks A0 and A1 A2.value = A0.value + A1.value }) // triggers the effect A0.value = 2 1. 이펙트(ex: watchEffect,computed 내부 함수) 함수가 전역 변수에 할당되며 파라미터로 받은 업데이트 함수를 실행..
Vue.js 커스텀 Directive 만들어보기 뭔가를 배우는 최고의 방법은 직접 만들어 보는 것입니다. Vue.js의 Directive를 직접 만들며 배워봅니다. 원문 : https://learnvue.co/tutorials/vue-custom-directives Creating Your First Vue Custom Directive - with Vue 3 Updates - LearnVue Last Updated on Jan 10, 2020 learnvue.co Vue에서 Directive는 DOM을 직접 편집하는 가장 좋은 방법 중 하나입니다. 몇 가지 예로는 v-if, v-show, v-bind 등이 있습니다. Vue를 사용한 적이 있다면 directive에 익숙할 것입니다. Vue 사용자 지정 지시문은 Vue에서 프로젝트에 추가 지시문을 만들..