v-model 타입 any (인자 있이) | Object (인자 없이) 설명 🔖 사용자 입력을 받는 폼(form) 엘리먼트 또는 컴포넌트에 양방향 바인딩 제한 사용 - 사용 가능한 목록 컴포넌트 수식어 수식어 설명 .lazy input 대신 change 이벤트를 수신함. .number 유효한 입력 문자열을 숫자로 변환하여 전달. 인풋에 type="number"가 있으면 .number 수식어가 자동으로 적용 .trim 사용자가 입력한 값의 공백(” ”) 제거 세부사항 class 또는 style 속성을 바인딩하는 데 사용되는 경우 v-bind는 배열 또는 객체와 같이 값을 추가할 수 있는 타입을 지원 컴포넌트 prop 바인딩에 사용될 때 prop은 자식 컴포넌트에서 적절하게 선언 인자 없이 사용하는 경우, ..
router/index.ts 서버에서 바로 불러오는 애들 → App.js에서 바로 가져온다. { path: '/', name: 'home', component: HomeView }, 메뉴로 바로 불러와야한다, 사이즈가 커서 미리 불러와야 할것 같다. → webpackPrefetch:true로 설정 { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import( /* webpackChunkName: "ab..
vue Dockerfile 설정 + nginx Docker File 설정 # 공식 Node.js 런타임 이미지를 부모 이미지로 사용 FROM node:lts-alpine As builder # 작업 디렉토리를 /app으로 설정 WORKDIR /app # package.json 및 package-lock.json을 작업 디렉토리로 복사 COPY package*.json ./ # 앱 종속성 설치 # --production, --only 등 명령어 안 먹힘 RUN npm install # 현재 디렉토리의 모든 내용을 /app으로 복사 COPY . . # Vue.js 앱 빌드 RUN npm run build # Nginx를 최종 베이스 이미지로 지정 FROM nginx:stable-alpine As produc..
ref() Type ref 는 초기값에서 타입을 추론함. 타입 지정, 기본 추론 덮어쓰기 가능 초기값 생략시, 결과타입은 undefined 포함하는 유니온 타입. 모든 타입에서 사용 가능 import { ref } from 'vue' import type { Ref } from 'vue' //타입 사용 const year = ref(2020) //타입 추론 const year: Ref = ref('2020') //타입 명시 const year = ref('2020') //추론 덮어쓰기 const n = ref() // Ref // 타입 인터페이스 interface Ref { value: T } 사용법 🔖 인수를 가져와서 .value 속성이 있는 ref 객체에 래핑하여 반환 접근방법 : mounted() ..
개요 prop드릴링을 해결하기 위한 수단 상위 컴포넌트에서 의존성을 주입하여 하위 트리 모든 컴포넌트는 깊이에 상관없이 값을 전달받는다. provide() 설명 🔖 컴포넌트 하위 항목에 데이터를 제공하는 함수 Type function provide(key: InjectionKey | string, value: T): void 세부사항 🔖 인자 : "키가 될 문자열 또는 심볼(symbol)"과 "제공될 값(객체, 함수 등등)” provide를 통해 전달된 데이터가 주입된 컴포넌트에 의해 변경될 수 없도록 하려면, 제공된 값을 readonly로 래핑 가능 예제 inject() 설명 🔖 부모 컴포넌트에서 제공하는 데이터를 주입하는 함수 Type // 기본 값 없음 function inject(key: Inje..
v-if ~ v-else-if ~ v-else 설명 🔖 조건부로 블록을 렌더링하는 데 사용 - true일 때만 렌더링 Type A B C A/B/C 아님 v-show 설명 🔖 항상 렌더링되고 DOM에 남아 있다, CSS 속성만 전환 Type 안녕! v-for 설명 🔖 배열을 리스트로 렌더링 item in items Type {{ value }} 사용법 객체에 v-for 사용하기 {{ value }} 숫자 범위에 v-for 사용하기 1...n 범위를 기준으로 템플릿을 여러 번 반복 {{ n }} 에서 v-for 사용하기 여러 엘리먼트 블록을 렌더링 {{ item.msg }} 우선순위 v-if > v-for 따라서 서로 같이 쓰는걸 권장하지 않음 v-if & v-show 일반적으로 v-if는 전환 비용이 더..
설명 🔖 동적 컴포넌트 또는 엘리먼트를 렌더링하기 위한 "메타 컴포넌트" 렌더링 할 실제 컴포넌트는 is 속성(prop)에 의해 결정 Type interface DynamicComponentProps { is: string | Component // 조건에 해당하는 문자열이나 컴포넌트(필수) } 사용법 // 등록된 이름으로 렌더링(option api) // 정의에 따른 컴포넌트 렌더링( 다음은 페이지 제목일 수 있습니다. 주요 내용에 대한 단락입니다. 그리고 또 하나. 다음은 연락처 정보입니다. 다음은 페이지 제목일 수 있습니다. 주요 내용에 대한 단락입니다. 그리고 또 하나. 다음은 연락처 정보입니다. 렌더링 시 다음은 페이지 제목일 수 있습니다. 주요 내용에 대한 단락입니다. 그리고 또 하나. 다음은..
