66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
app-level의 provide한 값을 새로고침시 정상적으로 inject하지 못함.
안녕하세요. Provide/Inject 강의의 마지막 부분 app레벨 provide에 대해 질문드립니다. 우선 코드는 아래와 같습니다.main.jsimport { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.mount('#app'); app.provide('msg', 'msg입니다');App.vue<template> <div></div> </template> <script> import { inject } from 'vue'; export default { setup() { const msg = inject('msg'); console.log('app.vue', msg); return {}; }, }; </script> 강의 16분 10초에서 위 코드와 유사한 것을 시연해주셨습니다.강의에서는 코드 작성 후 저장해 자동 새로고침 되었고, 정상적으로 inject한 값이 콘솔에 출력됐습니다. 저도 개발서버 기능이 제공하는 저장-자동새로고침 시에는 provide-inject한 값이 콘솔에 정상 출력됩니다.그러나 브라우저의 새로고침 버튼을 눌러 페이지를 새로 불러오면 inject된 값이 undefined로 찍힙니다. (출력내용은 "app.vue undefined"입니다.)분명 컴포넌트 인스턴스가 생성되기 전에도 provide한 값을 inject로 접근할 수 있다고 설명해주셨는데 그렇지 못해서 왜 그런지 궁금했습니다. 제 개발환경을 확인해봐야 할지, 아니면 제가 겪고있는 상황이 정상적인지 궁금합니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
this.$refs에 값이 들어가는 시점이 언제인가요?
vue 버전은 3.0.0입니다<template>** orderStatusCategory는 객체를 담은 배열 형태로[{code_value: CANCEL, code_text: 주문취소}, {code_value: REQUEST, code_text: 주문요청}...]형태입니다. 그리고 orderStatusCategory는 api를 통해 비동기적으로 받아오고요그래서 저는 orderStatusCategory에 값이 할당되면 this.$refs에도 값이 들어 있을 거라고 생각했는데 아무 값도 안 들어있습니다mounted랑 메서드위 코드에서 this.orderStatusCategory에 값이 들어왔는데도 불구하고 this.$refs에는 여전히 아무 값도 안 들어있습니다근데 버튼을 클릭하면 그 때는 this.$refs에 정상적으로 DOM 요소들이 들어있습니다.질문 1) 왜 이런 건가요? 정확히 언제 this.$refs에 값이 들어가는 거죠?질문 2) v-for로 버튼을 만들었는데 이렇게 만든 버튼들마다 다른 CSS를 주고 싶을 때는 ref로 접근하는 게 최선이죠?(v-for 하는 배열은 고정된 게 아니고 api로 받아올 때마다 바뀝니다)
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
npm run dev 설치중
선생님 제가 수업중 따라했던 npm init vuenpm installnpm run dev 를 했다가 그대로 다시 시행했더니 아래와 같은 에러가 나왔는데요어찌해야 하는지 모르겠어요 어떻게 하면 될까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
reactive vs ref... 굳이 reactive를 사용하는 이유가 뭔가요?
//template <tr v-for="(product,index) in productList" :key="product.id"> // setup let productList = reactive([]) const getProductList = function() { productService.getProductList(null, null, null, null) .then((response) => { console.log('response.data.data :', response.data.data); // array console.log(productList) productList = response.data.data console.log(productList) }) }이 코드에서 productList = response.data.data를 할당하니까 반응성이 사라지더라구요 ( 변수에 새로운 값을 할당해버린 게 그 원인이었구요)그래서1) productList = ref([]) 로 하고 productList.value = response.data.data 하니까 정상 작동2) productList = reactive({ a : []}) 로 하고productList.a = response.data.datatemplate에서<tr v-for="(product,index) in productList.a" :key="product.id">로 사용하니까 정상 작동3) 이것만 보면 ref로 선언하면 데이터를 받아올 때 .value 하나만 추가해주면 끝이지만 reactive를 사용하면 .a를 이곳저곳에 다 붙여줘야 되는데 객체, 배열은 reactive 안에 넣어서 사용하는 이유는 뭔가요? 4) 그냥 reactive는 버리고 ref로만 모든 반응형을 선언해도 기능상에 문제는 없나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
dummy api axios 호출시 cors 에러
안녕하세요. 항상 좋은 수업 감사합니다.script setup 수업 중api 호출을 위해 axios package를 설치했고api 호출시 CORS 에러가 발생하는데어떻게 설정해주어야 할까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
19:17 emit 관련 질문
강의에서는 export를 쓰셨지만 현재 script setup을 이용해 코딩중인 학생입니다.※ 부모 컴포넌트에 선언한 이 함수를const toggleLike = () => { /* Emit 자식 컴포넌트에서 다시 상위인 부모 컴포넌트로 값을 보내줄 때 사용 */ posts.value.isLike = !posts.value.isLike }아래 이벤트 핸들러에 넣어 동작시키고 싶었지만인식하지 못해 아래와 같은 방법으로 동작시켰습니다.@toggle-like="post.isLike = !post.isLike"혹시 @toogle-like에 함수명을 넣어 동작 시키려면 어떻게 수정해야할까요?부모 컴포넌트<template> <div> <main> <div class="container py-4"> <div class="row g-3"> <div v-for="post in posts" :key="post.id" class="col col-4"> <AppCard :title="post.title" :contents="post.contents" :type="post.type" :is-like="post.isLike" @toggle-like="post.isLike = !post.isLike" ></AppCard> </div> </div> </div> </main> </div> </template> <script setup> import AppCard from '@/components/AppCard.vue' import { ref } from 'vue' const posts = ref([ { id: 1, title: '제목1', contents: '내용1', isLike: true, type: 'news' }, { id: 2, title: '제목2', contents: '내용2', isLike: true, type: 'news' }, { id: 3, title: '제목3', contents: '내용3', isLike: true, type: 'news' }, { id: 4, title: '제목4', contents: '내용4', isLike: false, type: 'notice' }, { id: 5, title: '제목5', contents: '내용5', isLike: false, type: 'notice' }, ]) const toggleLike = () => { /* Emit 자식 컴포넌트에서 다시 상위인 부모 컴포넌트로 값을 보내줄 때 사용 */ posts.value.isLike = !posts.value.isLike } </script> <style lang="scss" scoped></style> 자식 컴포넌트<template> <div> <div class="card"> <div class="card-body"> <!-- type : news, notice --> <span class="badge bg-secondary">{{ typeName }}</span> <h5 class="card-title mt-2">{{ title }}</h5> <p class="card-text">{{ contents }}</p> <a href="#" class="btn" :class="isLikeClass" @click="$emit('toggleLike')">좋아요</a> </div> </div> </div> </template> <script setup> import { computed, defineEmits } from 'vue' const props = defineProps({ type: { type: String, default: 'news', validator: value => { return ['news', 'notice'].includes(value) }, }, title: { type: String, required: true, }, contents: { type: String, required: true, }, isLike: { type: Boolean, default: false, }, obj: { type: Object, default: () => {}, }, }) console.log('props.title : ', props.title) const isLikeClass = computed(() => (props.isLike ? 'btn-danger' : 'btn-outline-danger')) const typeName = computed(() => (props.type === 'news' ? '뉴스' : '공지사항')) const emit = defineEmits(['toggleLike']) </script> <style></style>
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
reactive로 선언한 반응형 객체 자체를 바꿨는데 watch 콜백함수가 실행이 안되요
<template> <button @click="objChange">obj 바꾸기</button> </template> <script> import { reactive, ref, watch } from 'vue'; export default { setup() { const x = ref(0); let obj = reactive({ count: 0, message: 'hi', object: { num: 0 }, array: [1, 2, 3], ref: x, }); const objChange = () => { console.log(obj); obj = { a: 1 }; console.log(obj); }; watch(obj, (newValue, oldValue) => { console.log('newValue: ', newValue); console.log('oldValue: ', oldValue); }); return { x, obj, objChange }; }, }; </script> 버튼을 눌러서 obj 값을 {a : 1} 로 바꾸면 왜 watch 콜백함수가 실행이 안되나요? {a : 1}이 반응형 객체가 아니어도 처음에 바뀔때는 실행 될 거라고 생각했습니다혹시나 해서 obj를 반응형 객체로 바꿔도 watch 콜백함수가 실행이 안되는데 왜 변화를 인지 못 하나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
자식 컴포넌트에 input 태그, checkbox 같은 form 태그가 없으면 v-model 안 쓰는건가요?
<!-- 부모.vue --> <template> <custom-counter v-model="counterValue" /> <template> <script> import CustomCounter from './CustomCounter.vue'; export default { components: { CustomCounter, }, data() { return { counterValue: 0, }; }, }; </script> <!-- CustomCounter.vue --> <template> <div> <p>{{ message }}</p> <p>{{ value }}</p> <button @click="increment">+</button> <button @click="decrement">-</button> </div> </template> <script> export default { props: { value: { type: Number, default: 0, }, }, data() { return { localValue: this.value, }; }, computed: { message() { return `The current value is ${this.localValue}`; }, }, methods: { increment() { this.localValue++; }, decrement() { this.localValue--; }, }, watch: { localValue(newValue) { this.$emit('input', newValue); }, }, }; </script> 이렇게 커스텀 컴포넌트에서 v-model을 사용할 때 만약에 자식 컴포넌트의 template에 input 태그 같은 게 없으면 사용 못 하는 건가요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
template내 자바스크립트 표현식 평가 시점은 언제인가요?
<template> <input ref="input" type="text" /> <div>{{ input }}</div> <div>{{ input.value }}</div> // 오류난다. <div>{{ $refs.input }}</div> <div>{{ input === $refs.input }}</div> // true </template> <script> import { onMounted, ref } from 'vue'; export default { components: {}, setup() { const input = ref(null); console.log('setup 내 input.value :', input.value) onMounted(() => { input.value.value = 'Hello World!'; input.value.focus(); }); return { input, }; }, }; </script>1) 여기서 template 내 JS 표현식은 created 훅 이후 mounted 훅 이전 그 사이에 평가되는 건가요? 혹시 정확한 평가 시점을 알 수 있을까요?2) 만약에 template 내 JS 표현식이 created 이후에 평가된다면 created 시점, 즉 생성 시점에는 컴포넌트를 생성한다고 했는데 이 컴포넌트를 생성한다라는 게 정확히 뭘 의미하는 건가요?template 내 JS 표현식 역시 컴포넌트의 일부 아닌가요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
App.vue 물결 표시 제거 방법
lecture 6 강의 들으면서 위와 같은 현상이 발생하는데 해결법이 궁금해서 문의 남겨요.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
v-if 질문입니다!
<td v-if="stock"> {{ stock !== -1 ? stock : stock = false}} </td> <td v-else><v-icon>mdi-infinity</v-icon></td>제 생각 : stock이 -1이라는 값으로 넘어오면 {{ stock !== -1 ? stock : stock = false}} 로 인해 stock이 false가 되고 v-else의 아이콘이 보여짐 현실 : stock가 -1이라는 값으로 넘어오면 v-if 태그가 false 값이 출력됨 뭐가 문제인가요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
ref vs reactive vs shallowRef
ref 안에 객체를 넣을 수 있다면 reactive를 굳이 사용하는 이유가 뭔가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
script 태그는 컴포넌트를 처음 가져올때 한번만 실행된다는 게 잘 이해가 안됩니다
컴포넌트를 처음 가져올 때 한 번만 실행되는 일반 <script>와 달리, <script setup>는 컴포넌트의 인스턴스가 생성될 때마다 <script setup>내부 코드가 실행됩니다.라는 말이 정확하게 이해가 안돼요<!-- <Component.vue> --> <template><div>hi</div></template> <script> console.log('hi') export default{ setup(){ console.log(1) } }하고<Component /><Component /><Component />세번 쓰면 hi는 한번만 출력되고 1은 왜 3번 출력되는건가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
이벤트 핸들러로 왜 일반 함수로는 작동이 안 되나요? + console.log도 인식이 안되요
정상 작동 <input @input=" e => { e.target.value += '!'; console.log('hi'); } " /> 에러 뜸 <input @input=" function(e) { e.target.value += '!'; " /> 질문1) 화살표 함수를 일반함수로 바꿨더니 에러가 뜨면서 화면이 안떠져요질문2) 이벤트 핸들러를 화살표 함수로 작성하면e.target.value += '!' 는 정상 작동되는데console.log()에서 Uncaught TypeError: Cannot read properties of undefined (reading 'log')가 뜹니다이유가 뭔가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
Vue3 Composition API - computed
안녕하세요 Vue3 Composition API - computed 파트에서 후반 9:35 ~ const fullName = computed({ get(){ return firstName.value + ' ' + lastName.value }, set(value){ [firstName.value, lastName.value] = value.split(' '); } })이런식으로 fullName에 대한 선언을 하고 fullName.value = '짐 코딩'이런식으로 fullName의 .value로 값을 넣으셨는데 set함수의 매개변수가 value로 지정되어있어서 그런것인가요 아니면 fullName이 ref메서드처럼 적용되어서 value로 접근한 것인가요? 아니면 예약어처럼 적용이 되는건가요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
setup 함수내 문자열 관련 질문입니다.
아래 코드를 실행하고 Add Message1 버튼을 4번 클릭하고 Add Message 버튼을 클릭하면 {{ normalMessage }} 값은 !가 4개 붙은 값이 나옵니다. 그리고 Add Message2 버튼을 클릭하면 콘솔창에는 !가 한개 붙은 값이 나옵니다.normalMessage 가 addNormalMesssage 함수 안에서 선언한 지역 변수도 아닌데 왜 값의 공유가 안 되는 건가요?<template> <h2>setup 함수내 반응형 메시지</h2> <p>{{ reactiveMessage }}</p> <button v-on:click="reactiveMessage += '!'">Add Message</button> <h2>setup 함수내 일반 메시지</h2> <p>{{ normalMessage }}</p> <button v-on:click="normalMessage += '!'">Add Message1</button> <button v-on:click="addNormalMesssage">Add Message2</button> </template> <script> import { ref } from 'vue'; export default { setup() { const reactiveMessage = ref('Hello Reactive Message'); let normalMessage = 'Hello Normal Message'; const addNormalMesssage = () => { normalMessage = normalMessage + '!'; console.log(normalMessage); }; return { reactiveMessage, normalMessage, addNormalMesssage, }; }, }; </script>
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
v-on:click ="" 질문입니다
lectures/4/App_CompositionAPI.vue 파일에 아래와 같이 data 옵션을 추가하고export default { data() { return { dataMessage: 'dataMessage' }; }, setup() { }, };템플릿에 <p>{{ this.dataMessage }}</p> <button v-on:click="this.dataMessage += '!'">Add Message</button>를 추가하고 버튼을 누르면 정상적으로 뒤에 '!'가 출력된 dataMessage가 나옵니다 근데 이전 VUE2에서 공부할 때는 <button v-on:click="this.dataMessage += '!'">Add Message</button>로 작성하면 Error in v-on handler: "TypeError: Cannot read properties of null (reading 'dataMessage')" 라는 에러가 떴었습니다.그래서 그냥 this 없이 v-on:click="dataMessage += '!'" 로 작성하면 동작했는데 지금은 되고 vue2 사용할 때는 에러가 뜨던 이유가 뭔가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
v-on:click="" 질문입니다
강의는 Vue3 Composition API 장의 첫번째 수업 Composition API입니다 data 옵션 함수로 message를 만들면<button @click="message+='!'">{{ this.message }}</button>--> 정상적으로 '!'가 뒤에 추가되고 렌더링이 됨setup 함수 내에서 반응형을 안 만들어주면<h2>일반 메시지</h2><p>{{ normalMessage }}</p>button v-on:click="normalMessage +='!'">Add Message</button>normalMessage의 뒤에 !가 붙긴 하는데 재랜더링이 안되서 업데이트된 값으로 안 보임... reactiveMessage변경 버튼 눌러주면 !가 추가된 값으로 보여짐질문) data Options API로 만든 message는 정상적으로 뒤에 !가 찍히고 변환된 값이 화면에 나오는데 왜 setup() 으로 만든 normalMessage는 변환된 값으로 안 뜨나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
v-for에서 style을 사용하려 할 때
선생님께서 올려주신 양질의 강의를 통해서 Vue 실력을 키워나가고 있는 Vue린이입니다.강의에서 배운 내용을 바탕으로 스스로 실습을 진행하던 중 어려움에 부딪혀 질문드립니다.. 현재 제 상황은 하나의 컴포넌트 안에서 li 엘리먼트를 v-for로 반복하려 합니다.각 li 요소마다 다른 색상과 다른 위치를 지정해주기 위하여 style 내부에 변수를 선언해주었고, 다음과 같이 반응형 배열을 만들었습니다.... <li v-for="value in valueArr" :key="value.id" style="{--i: value.id, --clr: value.color}"> <a href="#"> <ion-icon :icon="value.logo"></ion-icon> </a> </li> ...const valueArr = reactive([ { id: 0, color: '#f70000', logo: logoYoutube, }, { id: 1, color: '#e71a21', logo: logoPinterest, }, { id: 2, color: '#3bd580', logo: logoAndroid, }, 그런데 style 내부에 선언해준 변수에 값을 대입하기 위해 valueArr을 순회하는 value를 참고해서 id와 color값을 할당하고있는 상황이지만 자꾸 인식을 못하는 상황입니다.. 어떤 방법을 사용하면 해결할 수 있을지 여쭤볼 수 있을까요?.. 감사합니다..!!
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
reactive와 computed 차이 질문
안녕하세요 ! style에 v-bind 예제 실습시 궁금한 점이 생겨 질문드려요. 선생님이 만드신 예제는style에 바인딩하는 styleObject를 computed 함수를 작성하여 바인딩하여 예제처럼 fontSize를 조절했습니다.styleObject를 computed가 아닌 reactive로 작성하면 어떻게될지 궁금해서const styleObject = reactive({ color : 'red', fontSize: fontSize.value + 'px';}); 와 같이 작성후 ref함수로 바인딩된 fontSize 크기를 조절하면 computed와 같이 조절이 될 줄 알았으나조절이 안되는 것을 확인했습니다. 두개 차이점이 무엇이길래 조절이 안되나요?reactive 매서드를 이용해서 조절할 수는 없나요?