Vue (19) 썸네일형 리스트형 [Vue] useAttrs( ) : 하위 컴포넌트로의 속성 전달 (Composition API) 리액트에서 하위 컴포넌트에 속성 바인딩시아래와 같은 문법을 사용하다 보니 문득 궁금해졌다...// 부모 컴포넌트// 또는 특정 props만 전달 아.. vue 에서 같은 기능이 머더라... 기억이 나지 않는다;그래서 리마인딩 포스팅을 한다.. `useAttrs()` 또는 `setup` 컨텍스트를 통해 attrs에 접근할 수 있습니다.부모 컴포넌트에서 자식 컴포넌트로 여러 속성을 쉽게 전달할 때 유용합니다. `useAttrs()`를 사용하여 attrs에 접근`v-bind="attrs"`로 모든 속성을 한 번에 바인딩props로 선언된 속성은 attrs에 포함되지 않음 v-on 이벤트 리스너도 attrs에 포함됨컴포넌트 재사용성 향상에 매우 유용inheritAttrs 옵션으로 속성 상속 제어 가능 .. [Vue] Pinia 의 활용법 1. 스토어 정의import { defineStore } from 'pinia'export const useUserStore = defineStore('user', { state: () => ({ name: '홍길동', age: 30 }), getters: { isAdult: (state) => state.age >= 18 }, actions: { incrementAge() { this.age++ } }}) 2. 컴포넌트에서 스토어 사용 이름: {{ userStore.name }} 나이: {{ userStore.age }} 성인 여부: {{ userStore.isAdult }} 나이 증가 3. 상태 변경직접 할당: userSto.. [Vue3] props drilling 중간 컴포넌트에서 props 선언 없이 하위로 전달하기 작업 진행 중에, props 정의나 provide inject 가 없는 상황인데하위 컴포넌트에서 props 를 받아 프로세스를 진행하는 코드를 보고 정리를 합니다.개인적으로는 협업이라면 상태관리 라이브러리(vuex, pinia ) 나 provide inject 를 사용하여코드 추적의 비용을 줄이는 게 더 낫다고 생각합니다. vue 에는 폴스루 속성이라는 게 있습니다.https://ko.vuejs.org/guide/components/attrs Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org예시에는 클래스이름, 스타일, id 의 속성이 하위 컴포넌트로 자동 상속되는 예시만 나와 있어서 미쳐 몰랐지만..A => B => C 로 A 가 최상단(부.. [Vue3] 스와이프 와 캐러셀의 차이점, 캐러셀 구현 방법 상호작용 방식 :스와이프: 사용자가 화면을 손가락으로 밀어서 콘텐츠를 넘기는 방식입니다. 캐러셀: 자동으로 회전하거나 버튼을 눌러 콘텐츠를 전환하는 방식입니다.동작 : 스와이프: 주로 터치 기반 디바이스에서 사용되며, 사용자의 직접적인 조작이 필요합니다. 캐러셀: 자동 회전 기능이 있어 사용자 개입 없이도 콘텐츠가 변경될 수 있습니다.사용 목적:스와이프: 모바일 앱이나 반응형 웹사이트에서 많이 사용됩니다. 캐러셀: 웹사이트의 메인 페이지나 제품 갤러리 등에서 자주 사용됩니다. 4. 구현 방식: 스와이프: 주로 터치 이벤트를 감지하여 구현합니다. 캐러셀: CSS 애니메이션이나 JavaScript를 사용하여 구현하며, 자동 회전 기능이 포함될 수 있습니다캐러셀의 구현 방법A의 u.. [Vue] vue 개발을 위한 플러그 인 (vscode ) 먼저 Vue.js devtools 뷰쟁이들의 필수템 (구글 스토어) https://chromewebstore.google.com/search/vue%20devKorean Language Pack : 비주얼 스튜디오 코드 툴을 한국어로 사용할 수 있다.Indent-Rainbow: Tab 영역을 컬러별로 다르게 표시하여 코드라인이 길어 졌을때 읽기 편하게 해 줌 Auto Rename Tag : HTML Tag에서 태그 이름을 바꾸면 쌍을 이루는 여는태그 또는 닫는태그 명도 실시간으로 함께 바꿔줍니다.CSS Peek : HTML 문서에서 정의된 CSS를 금방 찾을 수 있도록 도와줌 ctrl + 클릭 하면 선언된 곳으로 이동함.HTML to CSS autocompletion : HTML 문서에 선언된 cl.. [vue3] route 와 routes 의 차이 route는 현재 라우팅된 URL의 정보를 담고 있는 객체이다. 이 객체는 브라우저의 주소 표시줄에 표시되는 URL과 관련된 정보를 제공함. routes는 라우터에 등록된 모든 라우트를 나타내는 객체이다 . 각 라우트는 경로, 컴포넌트 및 기타 옵션을 포함하며, 이 배열은 일반적으로 라우터의 설정에서 사용된다. 즉, route는 현재 라우팅된 URL의 정보, routes는 라우터의 전체 구성을 나타낸다. route and router $route ::{{ $route }} $router:: {{ $router }} 1 : {{ $route.path }} 2 :{{ $route.name }} about 페이지 이동 route and router $route ::{{ $route }} $router:: {{.. npm run dev 명령어 더 짧게 쓰는 방법 그냥 귀찮다 3단어나 치는 게... 1. Shell 에서 $ alias dev="npm run dev" $ dev 쉘에서 사용하는 별칭(alias)을 등록하면 "npm run dev" 대신 "dev"라는 짧은 명령어로 실행할 수 있습니다. 다만, 이 방법은 쉘을 재시작할 때마다 별칭이 초기화되기 때문에, 터미널을 종료할 때마다 별칭을 다시 등록해주어야 합니다. 다행히 vscode 에서 ctrl C 로 취소한다고 초기화 되는 건 아닌다. 2. cmd 에서 > doskey dev=npm run dev alias 대신 doskey 그리고 등호 뒤에 " " 는 없다. 이거도 영구 설정은 아니라고 하니 참고하시길... [vue 3] router 를 이용한 팝업 띄우기 보호되어 있는 글입니다. 이전 1 2 3 다음
