173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
강의 내용대로 진행을 하였는데 아래와 같은 에러가 발생합니다. 순서는 아래와 같이 진행을 했습니다. vitePlugins에서 조금 틀리게 나오지만 없는 부분은 주석 처리해서 해보았지만 같은 현상입니다.
미해결
퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
<q-tabs v-model="tab" class="bg-grey-9" dense align="justify"> <q-tab class="text-orange" name="C" icon="mail" label="콘텐츠 등록" /> <q-tab class="text-cyan" name="M" icon="alarm" label="메뉴 등록" /> </q-tabs> <div class="col-8"> <q-form @submit.prevent="handleSubmit"> <q-card-section class="q-gutter-y-sm"> <div class="flex justify-between"> <q-select v-model="newCategory.majorCategory" outlined :options="majorCategoryOptions" emit-value map-options option-value="value" option-label="label" placeholder="::대분류선택::" style="width: 300px" > <template v-if="!newCategory.majorCategory" #selected> <span class="text-grey-7">::대분류선택::</span> </template> </q-select> <q-select v-model="newCategory.middleCategory" outlined :options="middleCategoryOptions" emit-value map-options option-value="value" option-label="label" placeholder="::중분류선택::" style="width: 300px" > <template v-if="!newCategory.middleCategory" #selected> <span class="text-grey-7">::중분류선택::</span> </template> </q-select> </div> 분류 선택 없이 탭메뉴 이동 시에는 해당 영역의 카테고리를 잘 불러 옵니다. 하지만 분류 카테고리를 선택후 탭메뉴를 이동시에 오류가 발생 합니다. 변수 초기화 (탭메뉴 이동시) const getInitialForm = async (cinfo = 'C') => { newCategory.value = { parent: null, majorCategory: null, middleCategory: null, subCategory: null, detailCategory: null, ctitle: '', ccode: '', clevel: 0, cinfo: cinfo, order: null, open_flag: 'Y', clink: '', }; tab.value = cinfo; // Ensure the tab reflects the initial cinfo value // Initialize category options majorCategoryOptions.value = []; middleCategoryOptions.value = []; subCategoryOptions.value = []; detailCategoryOptions.value = []; }; // 대분류 const fetchCategories = async () => { try { const result = await get_category_child(null, newCategory.value.cinfo); majorCategoryOptions.value = result.map(cat => ({ label: cat.ctitle, value: cat.ccode, })); middleCategoryOptions.value = []; subCategoryOptions.value = []; detailCategoryOptions.value = []; } catch (error) { console.error(error); } }; // 카테고리 선택에 따른 하위 카테고리 갱신 watch( () => newCategory.value.majorCategory, (newValue, oldValue) => { if (newValue !== oldValue && newValue !== null) { fetchMiddleCategories(newValue); } }, ); 탭메뉴 이동시에 초기화도 진행 하였습니다만 계속 오류가 발생하는데 조언 부탁 드립니다. 감사합니다.
미해결
퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
안녕하세요 quasar 강좌를 듣고 파일 업로드 관련하여 q-upload 를 사용 하여 파일 업로드를 진행 하였습니다. 백엔드는 fastapi 를 사용 하였으며 소스는 아래와 같습니다. <q-uploader class="full-width" label="첨부파일 (for <78k size)" no-thumbnails v-model="files" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx, .mp4" multiple hide-upload-btn auto-upload :factory="handleFileAdded" :upload_progress-label="uploadProgress" @rejected="onRejected" @removed="handleFileRemoved" /> <script setup> 부분 const files = ref([]); // 업로드된 파일 목록을 담을 배열 const uploadFile2 = async (file, uploadId, fileKey) => { const formData = new FormData(); formData.append('file', file); formData.append('uploadId', uploadId); formData.append('fileKey', fileKey); try { const response = await axios.post( `http://127.0.0.1:8000/api/v1/attachFile/Create`, formData, { headers: { 'Content-Type': 'multipart/form-data', Authorization: `Bearer ${localStorage.getItem('auth/access_token')}`, }, onUploadProgress: function (progressEvent) { const { loaded, total } = progressEvent; const progress = Math.round((loaded * 100) / total); uploadProgress.value = progress; console.log('uploadProgress.value', uploadProgress.value); console.log(`Upload Progress: ${progress}%`); }, }, ); return response.data; } catch (error) { console.error('Error uploading file:', error); throw error; } }; const handleFileAdded = async newFiles => { for (const file of newFiles) { try { const attachFile = await uploadFile2(file, uploadId, file.__key); console.log(attachFile.attach_id); console.log(`File uploaded successfully:`, attachFile); files.value.push(file); } catch (error) { console.error(`Error uploading file ${file.name}:`, error); } } }; 실행 하면 파일은 정상적으로 백엔드 서버에 등록되고 등록된 파일 정보도 리턴되어 잘 받아 집니다. 하지만 주의 표시아이콘과 파일 업로드 상태가 0% 로 표시 됩니다. 선배님들의 조언 부탁 드립니다. 감사합니다.
미해결
퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
안녕하세요 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값을 이용하고 있습니다. 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 Editor 강의를 듣다가 스타일 파일은 말씀으로는 자료에 올려주신다고 하셨지만, 자막을 보니 직접 타이핑을 하라고 말씀하시는 것 같아서요. 따로 스타일 파일은 안 올려주시나요?
미해결
Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
안녕하세요 스토어에서 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되었다고 합니다. 대체할 게 있을까요?
미해결
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, pubsub i 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 emulators i functions: Stopping Functions Emulator i firestore: Stopping Firestore Emulator i auth: Stopping Authentication Emulator i eventarc: Stopping Eventarc Emulator i hub: Stopping emulator hub
미해결
퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
[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)
최근 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 scss 올려주신다고 했는데 아무리 찾아도 없어서요! 제가 못찾는 거 같긴한데 알려주실 수 있을까요!
미해결
Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
강의보면서 공식문서 코드를 복붙했는데 저쪽에서 에러가 뜨고나서 해결이 안되서 진행이 안됩니다. 아무리 해도 진행이 안되네요 ㅠㅠ..
미해결
퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
아이콘을 사용하려는데 어려움이 있어서 질문드립니다. <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)
텍스트 에디터에서 코드 작성하실 때Template에서 Quasar 관련 코드는 초록색으로 표시되시던데 어떤 extension 설치하신건지 알 수 있을까요?? 그리고 추가적으로 추천해주실만한 유용한 extension 있으면 알려주시면 감사하겠습니다
미해결
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)
북마크 강의에서 실행 하였을때 잘 작동하였으나, 막바지 배포 전 페이지 기능 확인 중에 오류 발견하였습니다. 아래는 도큐먼트이름과, 에러코드, 작성한 코드입니다. 선생님의 코드와 비교를 하고 복붙도 해보았으나 에러가 잡히지않았습니다. 도큐먼트 이름도 틀린 점이 없어 난항을 겪고 있습니다.답변 주시면 감사하겠습니다. 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)
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가 발생합니다! 구글로그인 단계로 넘어가지 못하고 있는데, 방법을 모르겠어요 ㅠㅠ
