Vue의 Dynamic components 간단 정리

Dynamic components (동적 컴포넌트)🚗 Dynamic component란렌더링되는 컴포넌트를 동적으로 변경되는 것특정 조건에 따라 다른 컴포넌트를 mount하는 것   🚗 Dynamic component 사용법컴포넌트를 동적으로 변경하고 싶을 때 v-bind: is 속성을 활용한다. (1) 동적 컴포넌트 생성 (2) 동적으로 컴포넌트 변경하기 (shallowRef가 ref 보다 퍼포먼스가 더 좋다)// const currentComp = ref(자식컴포넌트);const currentComp = shallowRef(자식컴포넌트); ※ shallowRef와 ref의 차이둘다 반응형이다.shallowRef는 ref의 얕은 버전이다.shallowRef는 속성에 대해서는 반응하지 않고 값(.va..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 6. 10.
• textsms

Vue3 script setup 간단 정리

vue3 defineProps는 props 옵션과 동일한 값을 허용한다.defineEmits는 emits 옵션과 동일한 값을 허용한다. 특징1. 전달된 옵션을 기반으로 타입 추론을 제공한다.특징2. 전달된 옵션은 setup() 에서 모듈 영역으로 호이스팅된다. 따라서 옵션은 setup() 영역에 선언된 지역 변수를 참조할 수 없다. (컴파일 오류)특징3. 하지만 import 된 옵션은 사용할 수 있다. (import도 모듈 영역이라 호이스팅 되기 때문에) .. 아 졸라 복잡하네특징4. script setup 을 사용하는 컴포넌트는 기본적으로 Template refs나 $parent와 같은 컴포넌트간 통신이 닫힌다.   🍬  script setup 에서의 $slots와 $attrsscript setup ..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 6. 4.
• textsms

[독립일지] 서른 살, 독립 결심 😇

나름 개발 블로그지만 가끔은 일상 얘기도 하고 싶어서 새로운 카테고리 OPEN 제목 그대로 나는 독립을 하기로 했다. 스무 살부터 본가에서 나와 서울에서 자취를 하기는 했지만 부모님 지원하에 누나랑 산 거라 집세나 관리비 등 내본 적이 없었기에 .. 지금까지 거의 기생한 거나 다름없었다. 🐛 아직은 부동산 관련 용어에도 전무하고 어떻게 돌아가는 건지 당최 이해가 안가지만 이제부터는 달라져야지 👊 아니... 달라져야 한다; 😳 사실 누나의 결혼으로 내년 2월부터는 강제 독립이다; 나가야한다 물론 맘만 먹으면 다시 부모님한테 기생할 수 있겠지만... 이제는 정말 경제적 완전 독립을 하고 싶다. 막연하게 지금 사는 동네 근처에 구해야지뭐 하고 네이버 부동산을 켰다가 깜놀; ... 나는 진짜 세상 물정 1도 몰..

• format_list_bulleted 📃 기록/일상
• · 2024. 6. 1.
• textsms

무료 모션그래픽 툴 Phase 사용후기

Phase 후기🔥 Phase란 무엇인가Phase는 5월 2일날 한국에 런칭한 따끈 따끈한 애니메이션 툴입니다. 직접 사용해보니 어도비의 에펙, 일러스트레이터, 피그마를 합친 느낌이었습니다 😳 🔥 Phase 인상 깊었던 기능페이즈는 계속해서 새로운 기능들이 추가되고 있는 중! 현재는 기능이 부족하지만 웬만한 건 거의 다 있긴 하다. 아무튼 개인적으로 인상 깊었던 건 animate 기능 1. Animate 이게 진짜 편하다고 느꼈는데 Animate 버튼을 누르면 화면이 스윽 위로 올라가면서 타임라인 ui가 구성된다. 이게 디자인 작업과 영상 작업을 딱 분리해주는 느낌이라 After Effects만 해본 입장에서 정말 좋다고 느꼈다. 작업자마다 다르겠지만 나 같은 경우는 After Effects 안에서 디자인..

• format_list_bulleted 🧠 저장/etc.
• · 2024. 5. 29.
• textsms

Vue에서 직접 DOM 요소에 접근하기 위한 Template refs

Template refs☁ refs를 사용하는 이유vue의 선언적 렌더링 모델 대부분은 직접적인 DOM의 작업을 대신 수행한다. 하지만 때론 기본 DOM 요소에 직접 접근해야 하는 경우, ref 속성을 사용해서 쉽게 접근할 수 있다. 특수 속성 ref에 의해 마운트된 DOM 요소 또는 자식 컴포넌트에 대한 참조를 얻을 수 있다.  ☁ refs 접근하기composition API로 참조를 얻으려면 동일한 이름의 참조를 선언해야 한다. 또한 컴포넌트가 마운트된 후에 접근이 가능하다.template 안에서 input으로 refs 참조에 접근하려는 경우 렌더링 되기 전에는 참조가 null이다.template의 내장 객체 $refs로 refs 참조에 접근할 수 있다.  {{ item }}..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 5. 26.
• textsms