가수면

vuetify를 이용해 작업하다보면 v-select와 v-autocomplete 등을 사용할 때 input이나  placeholder, 드롭다운 등의 스타일을 커스텀하고 싶은 때가 온다.이 경우 스타일을 수정하는 데에는 크게 2가지 방법이 있다.1. 선택자를 사용해 스타일을 수정하는 법먼저 두 가지 방법이 있다.전역적으로 적용하는 방법, 컴포넌트 내에서 scoped를 사용해 컴포넌트 단위로 적용하는  방법 1. 전역적으로 적용하는 방법별 거 없이 import된 scss나 css 파일에 클래스를 설정해주면 된다.클래스는 개발자 도구로 열어서 타게팅할 요소의 클래스를 직접 확인해서 지정해주면 된다..v-list-item-title { font-size: 14px;}or.custom-selector .v-l..

computed vs watchcomputed종속된 데이터가 변경될 때 자동으로 다시 계산되는 속성을 정의할 때 사용watch와 다르게 데이터 값의 변경이 일어나지 않더라도 최초에 정의된 함수가 실행됨. Full Name: {{ fullName }} watch 정의된 데이터 값 하나만을 감시computed와 다르게 실제 변경이 일어나기 전까지 실행되지 않음.(값이 할당되지 않음) props로 객체 전달props: { // 기본 타입 체크 ('null'과 'undefined'는 모든 타입 유효성 검사를 통과합니다.) propA: Number, // Number 타입 체크 propB: [String, Number], // 여러 타입 허용 propC: { // 문자열이고 부모..

Vuex타입스크립트 적용1. vuex 타입 에러 문제공식 문서에 따르면 특별한 TypeScript 구성이 필요하지 않다고 하는데 모듈 선언에 대한 오류가 발생할 수 있다.import { createStore } from "vuex";모듈 'vuex'에 대한 선언 파일을 찾을 수 없습니다. 'c:/Users/yhhnn/Desktop/dev/frontend/Private/Vue/weather/node_modules/vuex/dist/vuex.mjs'에는 암시적으로 'any' 형식이 포함됩니다.There are types at 'c:/Users/yhhnn/Desktop/dev/frontend/Private/Vue/weather/node_modules/vuex/types/index.d.ts', but this ..

라우팅내부 페이지 라우팅href 속성에 #id(섹션 id) 설정// Navbar Home Portfolio About // Title 섹션 .. // Portfolio 섹션 .. // About 섹션 페이지 라우팅npm i vue-router// router.tsimport { createWebHistory, createRouter } from "vue-router";import TitlePage from "../components/Title.vue";im..

바뀐 부분 상태값  = data() {}   →   ref(초기 상태값)  // 상태값 가져오려면 .value로 가져와야함함수 = methods   →   그냥 선언마운트 시 = mounted() {}    →  onMounted(() => {}); 컴포넌트 import그냥 스크립트에 importPropsconst props = defineProps({});로 props 정의// Child Component {{ color }} const emits = defineEmits(["onSearchCity"]);@click="emits('onSearchCity', inputText)"상위 컴포넌트로 onSearchCity라는 이벤트 전달, inputText는 전달된 값  ..

기본 방식리렌더링 조건큰 조건은 리액트와 동일하다.1. 상태값 변경2. 부모 컴포넌트 리렌더링3. props 변경4. 강제 리렌더링 그러나 1번의 경우 리액트와 다른 점이 있다.리액트의 경우 상태값이 변경되는 컴포넌트가 리렌더링이 발생하여 리렌더링을 방지하기 위해 memo, useMemo, useCallback 등을 이용해야하지만, Vue의 반응형 시스템은 상태 변경을 추적하여 필요한 부분만 리렌더링하므로 React처럼 명시적으로 리렌더링을 방지하는 메커니즘이 크게 필요하지 않다.기본 형식data에 상태 및 변수 정리 영화정보 {{ title }} // :속성명="데이터" 개봉: {{ year }} 장르: {{ category }} 반복문 및 조건문 형식으로 컴포넌트 반복문 사..