Vue 동적 세그먼트 활용 동적 라우트 매칭 (+404 Not Found Route)

Vue Router의 동적 세그먼트를 활용한 동적 라우트 매칭🍀 동적 세그먼트란?- 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야할 때 사용한다.  예를 들면 ...사용자 목록/users사용자 상세/users/tay사용자 목록인 /users 에 매핑된다면, 사용자 상세는 /users/tay 처럼 사용자별로 같은 컴포넌트에 매핑되어야 한다.이럴 때 vue router 경로에서 '동적 세그먼트'를 사용하여 해결한다.  🍀 route의 param으로 동적 세그먼트 /users/:id - 동적 세그먼트는 콜론(:)으로 표시한다. - 컴포넌트에서 동적 세그먼트의 값은 $route.params로 접근할 수 있다. route의 param 동적 세그먼트 접근 방법(1) vue router 설정한다. → ..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 8. 13.
• textsms

Vue Router 간단 정리 (router-link와 router-view)

Vue Router의 router-link와 router-view 간단 정리🌩️Vue Router란?- 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 공식 라우터 라이브러리- url에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리  🌩️RouterLink 페이지 이동 컴포넌트- RouterLink는 Vue Router 에서 페이지를 이동할 때 a 태그 대신 사용하는 컴포넌트다.- 목표 위치를 to prop으로 지정한다.- 실제로 a태그를 사용하면 등으로 하드코드되서 를 더 선호된다.- 는 href를 갖는 태그로 렌더링된다. RouterLink의 기본 props이동- to: 링크의 대상을 전달한다.- replace: 클릭시 router.push() 대신 router.replace()를 ..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 8. 12.
• textsms

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

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

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

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