안녕하세요. 강사님 말씀대로 todo app 에서는 composition API의 재사용성 장점을 느끼기가 어려운데요.중대형 사이즈의 프로젝트에서 options API 방식과 비즈니스 로직만 별도 .js 파일로 분리해 사용하는 것이 가독성과 재사용성 측면에서 더 나은 선택이지 않을까 생각이 됩니다.강사님께서 Composition API를 적용한 경험과 Options API와 비즈니스 로직을 .js 파일로 구성하는 방식에 대한 견해를 알고 싶습니다.감사합니다.

강사님꺼에선 refresh라는 로그가 보이는데 제꺼에선 안보이네요ㅠㅠ 4layers라는 검정색 동그라미 버튼 누르니까 log가 찍히는건 다른 레이어에서 확인했으나 mouse에서만 보이지 componet events에서는 나오지 않습니다ㅠㅠ 새로고침 이라고 뜨는 것 보면 잘은 나오는 것 같은데...이 부분 어떻게 해야 해당 refresh log를 볼 수 있을 지 궁금합니다! 코드는 강사님과 똑같히 했다고 생각하는데, 우선 첨부합니다!<div id = "app"> <!-- <app-contents v-on:이벤트이름 = "상위 컴포넌트의 메서드 이름"></app-contents> --> <app-contents v-on:refresh = "showAlert"></app-contents> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> var appContents={ template:` <p> <button v-on:click = "sendEvent">갱신</button> </p> `, methods:{ sendEvent(){ this.$emit('refresh'); } } } //root 컴포넌트 Vue.createApp({ methods:{ showAlert(){ alert('새로고침'); } }, components:{ //'컴포넌트 이름' : 컴포넌트 내용 'app-contents':appContents } }).mount('#app'); </script> 

target[prop] = newValue; 를 하지 않고 render(newValue)를 해도 값이 바껴서 출력되는걸 확인할 수 있는데, target[prop]에 newValue 값을 넣어주는 이유가 있을까요?

최근 vue 문서를 보다가 "Vue 3.4부터는 defineModel() 매크로를 사용하는 것이 권장되는 접근 방식입니다:"라고 되어있었습니다. 그래서 vue 버전을 올리고 강의에 emit, prop 사용하는 곳을 defineModel()방식으로 변경하고 싶어서 강의 코드를 수정하면서 진행 하고 있습니다. 대표적으로 커리큘럼 email 회원가입&로그인 파트에 사용된 prop, emit 부분을 아래와 같이 수정 해 보았습니다. 기존 AuthDialog.vue변경 AuthDialog.vue기존 SignInForm.vue변경 SignInForm.vue테스트 하면서 동작을 되지만 구현 하면서 질문이 두 가지 셍걌습니다:defaule.vue - AuthDialog.vue - SignInForm.vue간에 viewMode와 closeDialog 값을 제가 구현한 방식 대로 하는 게 문제가 없는지 알고 싶습니다.AuthDialog.vue에서 아래서 변경된 closeDialog 값을 인식 하기 위해서 watch를 사용하였는데 제가 구현한 방식보다 괜찮은 방법이 있는지 알고 싶습니다.defineModel() 방식을 사용하면 강의 코드 상당 수가 간단해 질 것 같네요 좋은 강의 곱씹으면서 보고 또 보고 있습니다. 정말 감사합니다.  

안녕하세요. 강의 잘듣고 있습니다.cookie 의 expire 를 설정 하려면 별도 라이브러리를 설치해서 해야 하나요? 아니면 locale: useCookie('locale',{maxAge: 60*60}).value || useDefaultLocale().value, 와 같이 하면 되는건가요?위와 같이 하니 적용 되지 않는 것 같아서 문의 드립니다. 

tiptap scss 올려주신다고 했는데아무리 찾아도 없어서요! 제가 못찾는 거 같긴한데 알려주실 수 있을까요!

강의보면서 공식문서 코드를 복붙했는데 저쪽에서 에러가 뜨고나서 해결이 안되서 진행이 안됩니다. 아무리 해도 진행이 안되네요 ㅠㅠ..

vue3 event emit 부분에서 동일한 코드로 작성했는데갱신버튼을 눌러도 Vue 개발자도구에서 event가 발생됐다는 refresh log가 뜨질 않습니다. 실행자체는 되는 걸 확인했는데 log가 보이지 않는 이유가 뭔가요?아래는 전체 코드입니다. <!--HTML--> <div id="app"> <app-contents></app-contents> </div> <!--JavaScript--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> var appContents= { template: ` <p> <button v-on:click="sendEvent">갱신</button> </p> `, methods :{ sendEvent(){ this.$emit('refresh') } } } Vue.createApp({ components: { //'컴포넌트 이름' : 컴포넌트 내용 'app-contents': appContents } }).mount('#app'); </script>

안녕하세요~글을 작성하고 리스트에 갱신할 때, onSnapshot < 이걸 사용하지 않고 useAsyncState를 이용하는 이유가 있을까요?또, onSnapshot을 사용한다면 어떤 식으로 사용해야 하는지도 궁금합니다~ 

안녕하세요.라우팅 기본 : 파일 기반 라우팅 7:39분 쯤에 보니 단일 루트 요소에 div div 가 형제요소로 있는 경우도 안되는건가요?Vue3 부터는 바뀌어서 여러개 사용해도 되는걸로 알고있어서 문의드립니다!

이거 버전 문제로 안깔리는건지 모르겠습니다 ㅠㅠ;크롬문제인가요??

터미널에서 기본으로 powershell이 설정되어 있는데node -v 나 npm 명령어도 잘 실행됩니다.그런데 이를 사용말고 cmder을 사용하라는 이유가 뭔가요?

부모와 자식 컴포넌트간의 데이터 교환에 있어부모 -> 자식 : props자식 -> 부모 : emit이라는건 어느정도 개념이 잡힌 것 같습니다. 근데, 좀 더 찾아보니 부모자식 컴포넌트 사이에도 model을 지정해서 양방향 바인딩이 가능하다는 예제를 본 것 같습니다. model을 사용하여 props & emit을 대체한다면 복잡한 코드가 좀 더 나아질것 같은데 defineModel을 사용하지 않는 이유가 따로 있는것일까요? 

파일이름을 소문자로 시작해서 하는건 상관없는건가요?그리고 컴포넌트를 가져올때 상대경로로 보통 가져오신다고했는데 다른폴더에있는 컴포넌트를 가져올때 ../ 이런식으로도 찾는게 맞나요?

Tags를 옮긴 이후로 새 포스트 작성 버튼 클릭 시 에러가 뜹니다. 콘솔로그로 보면은 이렇게 뜨는데.. 제 지식으로는 찾기가 어려워요.. 알려주세요 ㅠㅠ PostForm.vue:25 [Vue warn]: Invalid vnode type when creating vnode: undefined.at <QCardSection class="q-gutter-y-sm" >at <QForm onSubmit=fn >at <PostForm title="" onUpdate:title=fn category="" ... >at <QCard style= {minWidth: '660px'} >at <BaseTransition appear=true persisted=false mode=undefined ... >at <Transition appear=true enterFromClass="q-transition--none-enter-from" enterActiveClass="q-transition--none-enter-active" ... >at <QDialog persistent="" modelValue=true onUpdate:modelValue=fn ... >at <PostWriteDialog modelValue=true onUpdate:modelValue=fn >at <QPage padding="" >at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > >at <RouterView>at <QPageContainer style= {maxWidth: '1080px', margin: '0 auto'} >at <QLayout view="hHh lpR fFf" class="bg-grey-2" >at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > >at <RouterView>at <App>

v-if의 경우 dom이 그려지거나 그려지지 않거나 하고,v-show의 경우 css display:none 차이가 있는데 사용자 입장에서는 동일한 결과인데..어떤 경우에 어떤 것을 사용하는 것이 좋을까요?

북마크 강의에서 실행 하였을때 잘 작동하였으나, 막바지 배포 전 페이지 기능 확인 중에 오류 발견하였습니다. 아래는 도큐먼트이름과, 에러코드, 작성한 코드입니다. 선생님의 코드와 비교를 하고 복붙도 해보았으나 에러가 잡히지않았습니다. 도큐먼트 이름도 틀린 점이 없어 난항을 겪고 있습니다.답변 주시면 감사하겠습니다.createAt 오타 아닙니다!ㅠㅠ//post.js export async function getUserBookmarks(uid) { const q = query( collection(db, 'users', uid, 'bookmarks'), orderBy('createAt', 'desc'), limit(5), ); const querySnapshot = await getDocs(q); // 게시글 상세페이지 함수를 이용해 정보가져오기 return Promise.all( querySnapshot.docs.map(bookmarkDoc => getPost(bookmarkDoc.id)), ) .then(result => console.log(result)) .catch(e => console.error(e)); }  //bookmark.vue<template> <PostList :items="items" /> {{ items }} </template> <script setup> import { useAsyncState } from '@vueuse/core'; import { getUserBookmarks } from 'src/services'; import { useAuthStore } from 'src/stores/auth'; import PostList from 'src/components/apps/post/PostList.vue'; const authStore = useAuthStore(); const { state: items } = useAsyncState(() => getUserBookmarks(authStore.uid)); </script> <style lang="scss" scoped></style>

Failed to load resource: net::ERR_BLOCKED_BY_CLIENTclient-entry.js:144 [Quasar] boot error: TypeError: Failed to fetch dynamically imported module: http://localhost:9000/src/boot/firebase.js(anonymous) @ client-entry.js:144 quasar.config.js 에서 boot: ['firebase'] 설정시 위와 같은 console.error가 발생합니다!구글로그인 단계로 넘어가지 못하고 있는데, 방법을 모르겠어요 ㅠㅠ  

vue3 강의를 듣고 맘에 들어서vuejs 중급강좌 학생할인을 신청했는데쿠폰번호 쿠폰오류가 뜹니다 ㅠㅠ어떻게 해야 학생할인을 받을 수 있을까요? 

안녕하세요. 클래스와 아이디 바인딩 관련 문의드립니다.기존에 html문법으로 사용하는 class, id가 있는데데이터 바인딩을 통해서 사용하는 이유가 있을까요?