Vue

목표Input, Date, Select의 placeholder 스타일을 통일하고자 했다. (박스 가운데, 회색 글씨)그러나 q-select의 경우 q-input과 달리 placeholder 속성이 존재하지 않는다. 대신 label이 placeholder의 역할을 대신하고 있지만, 조금 다르게 동작한다.placeholder는 사용자가 입력을 시작하면 숨겨짐label은 사용자가 선택을 시작하면 상단으로 이동함  q-select에서 placeholder를 사용하고 싶다면 use-input prop을 사용하면 되지만, selectBox에 사용자 입력을 받지 않을거라면 사용하지 않는 편이 좋다. 다만 use-input만 단일로 사용하게 되면 다음과 같이 input과 select가 따로 노는 상황이 발생하기 때문에..

목적현재 개발 중인 서비스에는 날짜 입력 Input이 굉장히 많다.그렇기 때문에 공통 컴포넌트를 생성하여 반복적인 코드를 줄이고 스타일 통일성을 가져가려 했다.    필요 기능우선 내가 만들려고 하는 CommonDate 컴포넌트에 필요한 기능은 다음과 같다.Date Picker사용자 직접 입력YYYY-MM-DD 형식의 날짜 포매팅날짜 유효성 검사선택 불가능한 날짜 disable 처리  개발구조quasar의 공식 문서를 참고하여 구조를 가져갔다.   Date Picker 한국어 적용quasar의 기본 Date Picker의 경우 요일이나 월 표시가 전부 영어로 되어있다.이 상태 그대로 우리 서비스에 적용하기에는 이질감이 크다고 생각해 한글로 바꾸었다.이때 사용할 것은 q-date의 loc..

props를 넘길 때 어떤 데이터를 받을지 선언하는 defineProps 를 사용하게 되는데, 해당 개념을 사용할 경우 default value 를 설정할 수가 없다. 이에 대한 대안으로 초기 값을 설정해줄 수 있는 것이 withDefaults 이다.  실제 적용 예시   위 코드의 placeholder의 경우 withDefaults 내용을 적용하지 않았다면 아래의 사진처럼 CommonDate 컴포넌트 각각의  placeholder 안에 값을 계속해서 넣어줘야 되는 번거로움이 존재했다. ➡ withDefaults 를 공통 컴포넌트에 적용하여 불필요한 코드를 제거했다.   [ 참고 자료 ] https://v3-docs.vuejs-korea.org/api/sfc-script-setup.html#typescr..

목표 ▪️ q-select의 options를 input 입력을 통해 API로 조회하기 ▪️ API 요청 횟수를 줄이기 위해 요청에 debounce 처리하기 ▪️ 한국어 입력 시 단어 파괴 또는 오류가 없도록 하기 구현 1. 사용자 입력 허용 use-input hide-selected fill-input 위의 세 가지 속성을 추가해줘야 한다. 각각의 역할은 ▪️ use-input : 사용자 입력 허용 ▪️ hide-selected : 옵션에서 값을 선택하면 input 값과 selected된 값이 모두 필드에 보여지게 된다. 그때 선택된 값을 숨겨 하나만 나타나게 한다. ▪️ fill-input : hide-selected 속성과 함께 쓰인다. 입력한 값을 필드에 보여지게 한다. ※ fill-input 속성..

mask를 사용할 때 QInput의 커서가 끝으로 이동하는 문제는 이미 quasar 버전 2.7에서 fix가 됐다. 근데 난 왜...? 내 코드에서는 QInput을 가지고 공통 컴포넌트를 만들었고, emits 이벤트를 통해 store의 값을 업데이트하다보니 계속해서 이런 오류가 반복되는 것 같다. 기존에는 vue 컴포넌트에 있는 데이터와의 연결을 위해 computed를 이용해 변수를 재정의해서 사용했다. const inputValue = computed({ get: () => { return props.value; }, set: (value) => { emits('update:inputBoxValue', value); }, }); 일단 computed를 더 이상 사용할 수 없다는 생각이 들어 get 부분..

Type 선언 방식 defineProps() 는 2가지 타입 선언 방식을 가지고 있다. 1. 런타임 선언 ◾ ( ) 안에 인수를 정의 2. 타입 기반 선언 ◾ Props의 타입을 미리 정의해두고 컴파일러는 이를 기반으로 동일한 런타임 옵션을 추론한다. (타입스크립트와 함께 사용한다면 이 방법을 권장!) 안에 인수를 정의 위의 두 가지 선언은 모두 사용가능하지만, 동시에 사용할 수는 없다. 또한 Props 타입을 별도의 인터페이스로 분리할 수도 있다. 또한 인터페이스를 외부 소스에서 가져올 수도 있다 (import) ※ 외부 인터페이스 참조는 3.3버전 이상에서만 가능함 (하위 버전에서는 로컬 인터페이스 참조만 가능) → 내가 Vue 버전 업데이트를 진행한 이유 기본 값 설정 2번째 방법인 타입 기..

의존성 주입이란? 기존 컴포넌트 기반 아키텍처는 상위에서 하위로 데이터를 전달할 때(props), props를 사용하지 않는 컴포넌트에도 props를 선언하고 전달해야 하는 Props Drilling의 문제가 있었다. 이를 해소하기 위해 redux, recoil, vuex, pinia 등 다양한 상태 관리 라이브러리를 사용하여 props를 전역 변수로 관리하는 방법을 이용하기도 했다. vue3부터는 vue 자체적으로 중간 컴포넌트를 지나지 않고도 상위에서 하위로 props를 전달할 수 있는 기능을 제공한다. 그것이 바로 의존성 주입(Provide Injection)이다. 즉, props drilling 없이 상위에서 하위로 의존성을 제공하는 것이다. 사용법 사용법 또한 굉장히 간단하다. 상위 컴포넌트에서..

q-input의 mask를 잘만 이용하면 정규표현식 등을 사용하지 않고도 입력 데이터 값의 포매팅을 진행할 수 있다. Input | Quasar Framework The QInput Vue component is used to capture text input from the user. quasar.dev 내가 하고 싶었던 숫자 포매팅은 2가지 숫자 세자리마다 콤마 입력되는 숫자의 길이가 정해지지 않고 가변적임 소수점 2자리 표기 최초에 0으로 자리 채워주기 → 0.00 그래서 부가적으로 mask와 관련된 옵션들을 추가해주었다. unmasked-value : 포매팅한 값과는 상관없이 raw value를 보존(사용) reverse-fill-mask : input 값의 길이가 고정적이지 않을 때 fill-m..

Props 단방향 데이터 흐름 부모 → 자식 방향으로 데이터 전달 부모 컴포넌트가 업데이트될 때마다 자식 컴포넌트의 모든 props가 최신 값으로 업데이트된다. 따라서 자식 컴포넌트 내부에서 props를 변경하려 하면 안된다. defineProps 자식 컴포넌트에서 props를 변경해야 하는 경우 1. props는 초기 값을 전달하는 데만 사용하고, 이를 자식 컴포넌트에서 로컬 데이터 속성으로 할당하여 사용 const props = defineProps(['initialCounter']) // props.initialCounter는 counter의 초기 값으로 사용됩니다. // 추후 props가 갱신되어도 counter 값이 업데이트 되지 않습니다. const counter = ref(props.init..

v-slot이란? 기존 Vue2에서는 slot과 slot-scope 라는 각각의 디렉티브를 사용했는데, 2.6.0버전부터는 이 두가지 슬롯을 합친 v-slot 디렉티브를 도입했다. 슬롯은 특정 컴포넌트에서 자신에게 등록된 자식 컴포넌트의 내용을 재정의 할 수 있는 디렉티브이다. props 사용하기 귀찮을 때 사용할 수도 있지만, 완전히 대체하지는 못한다. (쓰임이 조금 다르다) slot 문법은 HTML 태그처럼만 사용할 수 있다. slot 태그가 있는 곳은 실질적으로 렌더링될 위치이다. 그때 부모 컴포넌트에서 그 위치에 제공할 대체 컨텐츠에 대한 내용을 작성한다. 즉, 코드는 상위에 작성되지만, 실질적인 렌더링 위치는 slot 태그가 있는 하위의 컴포넌트인 것이다. v-slot 사용법 이름이 없는 슬롯은..