개발이 좋아서/Vue가 좋아서

21장 [VueRouter] VueRouter학습

1) 동적 라우트 매칭 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 자주 있습니다. 예를 들어 **사용자 목록(User List)**은 /users와 같은 경로에 매핑되면 되지만 **사용자 상세(User Detail)**는 사용자 식별자 별로 같은 컴포넌트에 매핑 되어야 합니다. (예: /users/alice, /users/emma, ... → UserComponent.vue) 이럴때 Vue Router에서는 경로에서 동적 세그먼트를 사용하여 해결할 수 있습니다. 이를 param이라고 합니다. const User = { template: 'User', } const routes = [ { path: '/users/:id', component: User }, ] 이제 /users/al..

20장 [VueRouter] VueRouter란?

1) 시작하기 HomeView.vue와 AboutView.vue라는 페이지용 컴포넌트를 만든후 ‘/’ 경로로 들어왔을 경우 HomeView.vue 페이지(컴포넌트)를 렌더링 하고 ‘/about’ 경로로 들어왔을 경우 AboutView.vue 페이지(컴포넌트)를 렌더링 하는 실습을 진행해 보도록 하겠습니다. ‘/’ → HomeView.vue ‘/about’ → AboutView.vue 2) 라우터(router) 설정 // src/router/index.js import { createRouter, createWebHistory } from 'vue-router'; import HomeView from '@/views/HomeView.vue'; import AboutView from '@/views/Abou..

19장 script setup 속성

1) 내부 코드는 컴포넌트의 setup() 함수 안의 코드로 컴파일 됩니다. 컴포넌트를 처음 가져올 때 한 번만 실행되는 일반 {{ msg }} import 된 자원(Component, Utils 등)도 동일한 방식으로 에서 직접 사용할 수 있습니다. 4) Reactivity Reactivity APIs(ref, reactive, computed, watch 등) 를 5) defineProps() & defineEmits() defineProps()와 defineEmits() APIs를 defineProps와 defineEmits는 expose는 일반 slots과 attrs 는 일반 9) Top-level await

18장 Template Refs

1) Refs 접근하기 Composition API로 참조를 얻으려면 동일한 이름의 참조를 선언해야 합니다. 컴포넌트가 마운트된 후에 접근할 수 있습니다. 안에서 input으로 Refs참조에 접근하려는 경우 렌더링되기 전에는 참조가 null일 수 있습니다. 안에서 $refs 내장 객체로 Refs 참조에 접근할 수 있습니다. {{ input }} {{ $refs.input }} {{ input === $refs.input }} 2) v-for 내부 참조 v3.2.25 이상에서 동작합니다. v-for내부에서 ref가 사용될 때 ref는 마운트 후 요소 배열로 채워집니다. {{ item }} 3) Function Refs ref속성에 문자열 키 대신 함수를 바인딩할 수도 있습니다. 4) 컴포넌트 Refs re..

17장 Provide / Inject

1) Provide 하위 컴포넌트 항목에 데이터를 제공하려면 provider 역할을 하는 상위 컴포넌트 setup() 함수 내부에수 있습니다. import { provide } from 'vue'; export default { setup() { provide('message', 'hello!'); }, }; provide() 함수는 두 개의 파라미터를 받습니다. 첫 번째 파라미터는 주입 키 : ****문자열 또는 Symbol이 될 수 있습니다. 주입 키는 하위 컴포넌트에서 주입된 값을 조회하는 데 사용됩니다. 두 번째 파라미터는 제공된 값 : 값은 refs와 같은 반응성 데이터를 포함하여 모든 유형이 될 수 있습니다. import { provide, ref } from 'vue'; export defa..

16장 Slots

1) HTML 요소와 마찬가지로 우리가 만든 컴포넌트에 콘텐츠를 전달할 수 있으면 유용합니다. 컴포넌트를 만든 후 콘텐츠를 전달해 보도록 하겠습니다. 위에 정의한 컴포넌트를 부모 컴포넌트에서 사용해보겠습니다. Click!! 요소는 부모 컴포넌트에서 제공하는 콘텐츠를 나타내는 슬롯 콘텐츠 입니다. 그리고 슬롯은 텍스트 뿐만아니라 HTML요소, 컴포넌트 등 다양한 모든 콘텐츠가 될 수 있습니다. Click me ! 2) Fallback Content 상위 컴포넌트에서 슬롯 콘텐츠가 제공되지 않을때 슬롯에 대한 폴백(기본 콘텐츠)을 지정할 수 있습니다. Default Click!! 3) Named Slots 요소에 이름을 부여하여 여러개의 을 정의할 수 있습니다.

15장 Non-Prop 속성 (fallthrough 속성)

1) Non-Prop 속성은 props 또는 event 에 명시적으로 선언되지 않은 속성 또는 이벤트 입니다. 예를 들어 class, style, id와 같은 것들이 있습니다. 2) 속성 상속 비활성화 컴포넌트가 자동으로 Non-Prop 속성을 상속하지 않도록 하려면 컴포넌트의 inheritAttrs: false 옵션을 설정할 수 있습니다. click me 컴포넌트에 Non-Prop 속성을 비활성화 하는 일반적인 경우는 자식 컴포넌트의 루트요소에 이외의 다른 요소에 Non-Prop 속성을 적용하고 싶을 때 입니다. 그리고 적용해야 하는 요소에 에서 Non-Prop속성에 접근할 수 있는 내장 객체 $attrs로 직접 접근할 수 있습니다. Non-Prop 속성: {{ $attrs }} $attrs 객체에는 ..

14장 Events

1) 이벤트 발생 및 수신 컴포넌트의 블록 안에서 내장 함수 $emit()을 사용하여 직접 커스텀한 이벤트를 내보낼 수 있습니다. 버튼 그러면 부모 컴포넌트에서 v-on(또는 @)을 사용하여 이벤트를 수신할 수 있습니다. 2) 이벤트 파라미터 이벤트와 함께 특정 값을 내보낼 수 있습니다. $emit 함수 이벤트명에 추가로 파라미터를 넘길 수 있습니다. 버튼 그런다음 부모 컴포넌트에서 이벤트와 함께 파라미터를 받을 수 있습니다. 3) 이벤트 선언하기 문자열 배열 선언 export default { emits: ['someEvent'], setup(props, context) { context.emit('someEvent', 'Hello World!') } } 객체문법 선언 export default { e..

13장 Props

1) 문자열 배열 선언 // BlogPost.vue export default { props: ['title'], setup(props) { console.log(props.title) } } 2) 객체문법 선언 export default { props: { title: String, likes: Number }, setup(props) { console.log(props.title) console.log(props.likes) } } { // Basic type check // (`null` and `undefined` values will allow any type) propA: Number, // Multiple possible types propB: [String, Number], // Requi..

12장 Watch, WatchEffect

1) watch import { ref, watch } from 'vue'; export default { setup() { const message = ref(''); watch(message, (newValue, oldValue) => { // DOM~ // API~ // state 변경 console.log('newValue: ', newValue); console.log('oldValue: ', oldValue); }); return { message, }; }, }; 2) multiple_source_type import { reactive, ref, watch } from 'vue'; export default { setup() { const x = ref(0); const y = ref(0)..