Vue 프로젝트에서 동일 이미지 URL로 인한 캐싱 문제 해결 방법
Vue 프로젝트에서 API를 호출해 이미지를 변경할 때, 동일한 이미지 URL을 사용하는 경우가 있습니다 이러한 경우 이전 이미지가 캐시되어 남아있는 문제가 발생할 수 있습니다. 예를들어 과거 프로젝트에서는 /img/[userId] 형식의 URL을 사용하였습니다. 이
vue Router정리
Vue Router 개념vue의 router는 기본적으로 javascript의 window.history (history API)를 기반으로 하고 있다path는 필수항목이다 name은 선택항목이다아래와 같이 설정후 <route-link>혹은 route.push로 이동시
Provide(제공) / Inject(주입)
( 사진으로 보면 한눈에 알수있다. 데이터를 특정 컴포넌트까지 바로 전달가능하다 )- 부모템플릿에서 자식의 자식의 자식까지 전달할 props를 불필요하게 설정할 필요가 없음 (진작 알았다면..)- 반응성을 가진 변수를 전달시 전달 받은 후에도 그대로 반응성을 가짐부모
Computed값수정/스타일동적바인딩/v-for구조분해할당/watch의여러변수감시
( 5번의 예제. 렌더링된 결과 확인)1. computed값 수정하기computed의 값을 수정하기 위해선 setter를 사용함<script setup> import { ref, computed } from 'vue' const firstName = ref('Joh
속성과 이벤트의 동적바인딩 및 디렉티브 사용예제
1.속성을 동적바인딩하는 방법객체명 = { id : 'id명'}<요소명 v-bind="객체명" >2.이벤트 동적바인딩@[eventName]=이벤트핸들러3.속성 동적바인딩const attrName='속성명'<요소명 :[attrName]="'동적으로 속성을 등록합니다'"
조건부 slot / 동적 slot / 대체 컨텐츠를 사용한 slot
조건부 slotv-if="$slots.슬롯명"을 사용해서 slot을 조건부로 표시할수있다 (예제의 1번 참고)동적 slot변수에 슬롯명을 할당한후 동적으로 slot을 표시할수있다( 예제의 3번 참고 )#[변수명] v-slot:[변수명]등으로 사용가능하다대체 컨텐츠
slot 사용시 부모템플릿에서 자식컴포넌트의 매개변수 관리하기
아래와 같은 상황에 사용가능하다- (부모템플릿 ← 자식컴포넌트1 ← 자식컴포넌트2）와 같은 경우에 사용가능하다- 부모템플릿에서 자식컴포넌트1에서 자식컴포넌트2로 매개변수를 전달하는걸 관리가능하다예제1- 기본예제* 부모템플릿 <자식컴포넌트> <template
변수의 반응형에 대해서(Reactive)
반응형에 대해서선언된 변수가 반응형을 가지는지 아닌지를 명확하게 몰라서 정리함반응형이란 해당 변수를 변경할때, 해당 변수를 참조하는 부분(화면/로직)에서 변경되는지를 말함1. 변수의 반응형 패턴 다섯가지<template> <div> /* 패턴1 */
ref, reactive, toRef, toRefs, 자바스크립트 프록시
RefImpl객체와 프록시객체자바스크립트의 프록시?JavaScript의 Proxy 객체는 객체에 대한 작업을 가로채고, 필요에 따라 이러한 작업을 조작하는 기능을 제공합니다.이는 Vue.js의 반응성 시스템의 핵심입니다.예를 들어, 객체에 새로운 속성을 추가하거나 기존
부모컴포넌트에서 자식컴포넌트로 데이터를 전달하는 예제
(실제 입력 화면)예제1.아래의 예제는 v-model을 사용한 양방향 예제를 사용하지 않았다2.자식요소에서 ref가 아닌 toRefs를 사용하였다3.데이터 흐름은 아래의 예제의 1~ 6이다ParentComponent.vue (부모 요소)<template> <div
폼 입력바인딩 (v-model)
폼 입력바인딩 (v-model)v-model값 바인딩: Vue에서는 v-model 디렉티브를 사용하여 폼 입력 요소(input, textarea, select 등)의 값과 데이터를 쉽게 양방향 바인딩할 수 있습니다.일반적인사용 예제 (value , input함수 사용)
v-model과 emit에 대해서
v-model을 사용가능한 컴포넌트<input><select><textarea>v-model의 수식어.lazy - input 대신 change 이벤트를 수신함..number - 유효한 입력 문자열을 숫자로 변환하여 전달..trim - 사용자 입력의 공백을 트리밍. (