묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
q-input과 :rules 속성을 함께 쓸때, items-center 속성이 이상한 현상
안녕하세요q-span과 q-input을 나란히 배치하는 UI를 만들고 있습니다. 세로 중앙정렬을 위해서 Container에 item-center 옵션을 사용하고 있는데, q-input에 :rules 속성만 주면 중앙 정렬이 깨지네요. 어떻게 해야 세로 중앙정렬이 가능할까요? 아래는 제가 시도해본 4가지 상황입니다. ps. 글쓰는거 코드랑 함께 넣는거 어렵네요. ㅠㅠ<template> <q-page> <!-- 유효성 검사 없이 items-center --> <div class="row q-mt-md bg-primary"> <div class="row full-width items-center"> <q-span class="text-h6 col-3" align="right">신청자</q-span> <q-span class="col-1"></q-span> <q-input class="" dense outlined v-model="userName" /> </div> </div> <!-- 유효성 검사와 items-center 모두 없음 --> <div class="row q-mt-md bg-primary"> <div class="row full-width"> <q-span class="text-h6 col-3" align="right">신청자</q-span> <q-span class="col-1"></q-span> <q-input class="" dense outlined v-model="userName" /> </div> </div> <!-- 유효성 검사와 items-center 모두 존재--> <div class="row q-mt-md bg-primary"> <div class="row full-width items-center"> <q-span class="text-h6 col-3" align="right">신청자</q-span> <q-span class="col-1"></q-span> <q-input class="" dense outlined v-model="userName" :rules="['text']" /> </div> </div> <!-- 유효성 검사 존재하고 items-center 없을 경우 --> <div class="row q-mt-md bg-primary"> <div class="row full-width"> <q-span class="text-h6 col-3" align="right">신청자</q-span> <q-span class="col-1"></q-span> <q-input class="" dense outlined v-model="userName" :rules="['text']" /> </div> </div> </q-page> </template>
-
미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
Key값으로 Object 사용가능할까요?
안녕하세요. 질문이 있습니다.부모 컴포넌트에서 자식 컴포넌트를 리로드하기위해서 key값을 이용하고 있습니다.key값으로 object를 사용하고 있고 값 변경을 감지하고 리로드되고 있습니다.그런데 vue 문서에 보니 key값으로 Number, String, Symbol만 적혀있고 Object는 적혀있지 않아서요.key 값으로 Object를 사용하면 안되는걸까요?안된다면 id, enable 두개 값 중 하나라도 변경 되었을경우 자식 컴포넌트를 리로드하는 방법이 있을까요? <vn-list-in-vng :grp_info="grp_info" :key="grp_info" /> grp_info: ref({ id: Number(0), enable: Number(0), lv1_id: Number(0), }),
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
tiptap 스타일 파일은 따로 안 올려주시나요?
Tiptap Editor 강의를 듣다가 스타일 파일은 말씀으로는 자료에 올려주신다고 하셨지만, 자막을 보니 직접 타이핑을 하라고 말씀하시는 것 같아서요.따로 스타일 파일은 안 올려주시나요?
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
LocalStorage 값 변경 자동 체크
안녕하세요스토어에서 LocalStorage 를 사용 하여 로그인 진행 중 막혀 문의 드립니다.const accessToken = ref(localStorage.getItem('auth/access_token'))또는const accessToken = useLocalStorage('auth/access_token', null);이렇게 선언하여jwt토큰 값을 저장하고토큰이 만료 되면 service 에서리플래쉬 토큰으로 재발급하여 auth/access_token 에 다시 저장 하는데isTokenValid 값이 변경이 되지 않습니다. const isTokenValid = computed(() => { if (!accessToken.value) { console.log('No access token found.'); // Optionally log when no token is found. accessToken.value = null; return false; } const rtn_valuue = isTokenExpired(accessToken.value); if (!rtn_valuue) { // 토큰 만료 accessToken.value = null; } return rtn_valuue; }); useEventListener(window, 'local-storage', event => { if (event.key === 'auth/access_token') { console.log( 'Detected changes in access token from another tab or window.:: local', ); // 다른 탭에서 변경된 값으로 accessToken 업데이트 accessToken.value = event.newValue; } });이렇게 해도 체크가 안되네요isTokenValid 값은 화면을 리로드 하면 바뀌는데로컬 스토리지가 변경 되었을때는 변화가 없네요해결 방안좀 부탁 드립니다.감사합니다.
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
Volar Deprecated
안녕하세요. 오랜만에 들어서 다시 처음부터 듣고있는데요 Volar 관련된 플러그인이 다 Deprecated되었다고 합니다. 대체할 게 있을까요?
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
호스팅 문제 관련 질문 있습니다.
안녕하세요!! 강의를 보며 호스팅까지 진행하였습니다. 이후 설정된 url로 이동하니 이화면으로 계속 이동이 되는데 무슨 오류가 있는건지 어려워서요.. 혹시 해결방법이 있을까요?
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
안녕하세요!
안녕하세요~좋아요 수, 북마크 수, 댓글 수 카운팅 강의들으면서firebase emulator 실행하려고 하는데이 오류가 발생하며 계속 시작이 안되는데 어떻게 해결해야할지 모르겠습니다 ~~!이미지가 잘보이지 않는거 같아 코드 복사해서 첨부 합니다! --오류 코드 i emulators: Starting emulators: auth, functions, firestore, hosting, storage! functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: database, pubsubi firestore: Firestore Emulator logging to firestore-debug.log+ firestore: Firestore Emulator UI websocket is running on 9150.! firestore: Fatal error occurred: Firestore Emulator has exited with code: 3221225786, stopping all running emulatorsi functions: Stopping Functions Emulatori firestore: Stopping Firestore Emulatori auth: Stopping Authentication Emulatori eventarc: Stopping Eventarc Emulatori hub: Stopping emulator hub
-
미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
npm run build 시 오류 발생합니다
[vite:load-fallback] Could not load D:\quasar\quasar-project\src\pages/IndexPage.vue (imported by src/router/routes.js): ENOENT: no such file or directory, open 'D:\quasar\quasar-project\src\pages\IndexPage.vue' 오류에 보면 경로 pages/youtube/Indexpage.vue에 youtube가 빠져있습니다. 실제 파일 경로는 정상인 상태인데 왜 youtube가 빠져서 읽히는 건가요?
-
해결됨Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
emit, prop 대신 defineModel()을 사용하여 구현 하는 것에 대한 질문 입니다.
최근 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() 방식을 사용하면 강의 코드 상당 수가 간단해 질 것 같네요 좋은 강의 곱씹으면서 보고 또 보고 있습니다. 정말 감사합니다.
-
해결됨Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
안녕하세요! tiptap 강의 듣는중인데
tiptap scss 올려주신다고 했는데아무리 찾아도 없어서요! 제가 못찾는 거 같긴한데 알려주실 수 있을까요!
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
레이아웃 설정에서 진행이 안됩니다.
강의보면서 공식문서 코드를 복붙했는데 저쪽에서 에러가 뜨고나서 해결이 안되서 진행이 안됩니다. 아무리 해도 진행이 안되네요 ㅠㅠ..
-
미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
fontawsome 사용법
아이콘을 사용하려는데 어려움이 있어서 질문드립니다.<quasar.config.js> extras: [ 'fontawesome-v6', 'material-icons', ], 위와같이 설정하면 2가지 아이콘을 사용할 수 있다고 말씀하셨는데 material-icons 는 잘 설정이 되는데 fontawesom-v6 아이콘을 사용이 되지 않더라고요개발자 도구로 들어가서 elements 를 확인해보니class로 material-icons 가들어가있더라고요ㅠㅠ<q-btn round dense flat color="white" icon="fa-github" type="a" href="https://github.com/onetaek/quasar-project" target="_blank" >vue코드를 위와습니다.
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
목록 갱신
안녕하세요~글을 작성하고 리스트에 갱신할 때, onSnapshot < 이걸 사용하지 않고 useAsyncState를 이용하는 이유가 있을까요?또, onSnapshot을 사용한다면 어떤 식으로 사용해야 하는지도 궁금합니다~
-
미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
Quasar 관련 익스텐션
텍스트 에디터에서 코드 작성하실 때Template에서 Quasar 관련 코드는 초록색으로 표시되시던데 어떤 extension 설치하신건지 알 수 있을까요?? 그리고 추가적으로 추천해주실만한 유용한 extension 있으면 알려주시면 감사하겠습니다
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
Tags를 옮긴 이후로 새 포스트 작성 버튼 클릭 시 에러가 뜹니다.
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)
bookmark 목록 불러오는 중 Error: No such document 발생하였습니다.
북마크 강의에서 실행 하였을때 잘 작동하였으나, 막바지 배포 전 페이지 기능 확인 중에 오류 발견하였습니다. 아래는 도큐먼트이름과, 에러코드, 작성한 코드입니다. 선생님의 코드와 비교를 하고 복붙도 해보았으나 에러가 잡히지않았습니다. 도큐먼트 이름도 틀린 점이 없어 난항을 겪고 있습니다.답변 주시면 감사하겠습니다.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>
-
해결됨Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
firebase 설정시 문제가 생겨요
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가 발생합니다!구글로그인 단계로 넘어가지 못하고 있는데, 방법을 모르겠어요 ㅠㅠ
-
미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
VUE를 이용해서 프로그램 파일을 실행할수 있을까요?
안녕하세요.^^수업을 듣다가 궁금한점이 있어서 문의 드립니다.vue를 이용해서 구현한 화면에서 PC의 프로그램(putty, fileziller 등)을 실행시키는 방법이 있을까요?각 장비를 관리하는 페이지에서 해당 장비를 클릭하면 접속하기위해 putty가 실행되는 기능을 구현하려고 합니다.답변 부탁드립니다.강의 감사합니다.^^
-
미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
q-input 태그 내용사라짐
로그인화면에서 q-input태그에 이메일을 입력 후탭이나 마우스 버튼을 다른게 누르면 내용이사라집니다.
-
미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
q-input 컴포넌트 질문
q-input태그에서 약간의 굴곡을 적용하고싶은데 style을 따로 정의하여도 적용되지 않던데 다른 방법이 있을까요? <template> <q-page> <q-input label="Your Label" outlined class="rounded-input" /> </q-page> </template> <style scoped> .rounded-input { border-radius: 10px; } </style>