강사님꺼에선 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>
Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
최근 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, 와 같이 하면 되는건가요? 위와 같이 하니 적용 되지 않는 것 같아서 문의 드립니다.
부모와 자식 컴포넌트간의 데이터 교환에 있어 부모 -> 자식 : props 자식 -> 부모 : emit 이라는건 어느정도 개념이 잡힌 것 같습니다. 근데, 좀 더 찾아보니 부모자식 컴포넌트 사이에도 model을 지정해서 양방향 바인딩이 가능하다는 예제를 본 것 같습니다. model을 사용하여 props & emit을 대체한다면 복잡한 코드가 좀 더 나아질것 같은데 defineModel을 사용하지 않는 이유가 따로 있는것일까요?
Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
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>
Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT client-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가 발생합니다! 구글로그인 단계로 넘어가지 못하고 있는데, 방법을 모르겠어요 ㅠㅠ
Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
죄송합니다. $route 는 자동완성이 안되는게 정상인거네요. 제가 되는걸로 착각해서 질문을 했는데.. 짐코딩님 포기 않고 답변해주시고 도와 주신 점 정말 감사합니다. [ 질문원문 ] 안녕하세요. 개발환경 volra 와 Snippets 모두 설치 했는데. 자동완성이 안되는 게 있습니다. [Auto Page 설정 : unplugin-vue-router]과정 수강중인데요. $route 등이 안나오는데.. 왜 그러는지 조언을 구할 수 있을까요?
