안녕하세요 강사님!현재 파이어베이스에서 storage 사용하려면 요금제를 써야만 하는 건가요??기간이 좀 지나서 그런지 강의 화면하고 좀 다르게 시작하기는 없고 프로젝트 업그레이드만 있어서 진행하니까 카드번호 입력하고 결제를 해야하는 거 같아서요ㅠㅠ  

<div v-intersectionObserver="handleIntersectionObserver" class="bg-primary"></div>여기 div에 height 100px 했을때는 스크롤해서 하단에 닿이면 6개씩 잘보였는데 style 부분을 지우니까 스크롤 해서 하단에 닿였을때 나머지 게시물이 6개씩 보이는게 아니라 loadMore() 이 연속적으로 실행되어 전체가 다 보이게 됩니다 height가 0이 되면서 계속 노출이 돼서 그렇게 되는건가요?

 강의에서는 emit-value 옵션을 사용하여 Text, Value로 넣은 값을 표시해주는 부분에서 Combo Box에서 선택했을떄 보여지는 값이 Value로 표시되던데 이때 선택한 값 보여주는건 Text로 보여주고 선택한 데이터를 뽑아올때 Value로 값을 가져오는 옵션이 따로 있나요?

unplugin-vue-router/vite를 다운받고 공식문서 참고해서 설정했는데 pages의 index.vue가 오토라우팅이 되지않습니다. router.index.jsimport { defineRouter } from '#q-app/wrappers' import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router/auto' import routes from './routes' /* * If not building with SSR mode, you can * directly export the Router instantiation; * * The function below can be async too; either use * async/await or return a Promise which resolves * with the Router instance. */ export default defineRouter(function (/* { store, ssrContext } */) { const createHistory = process.env.SERVER ? createMemoryHistory : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory) const Router = createRouter({ scrollBehavior: () => ({ left: 0, top: 0 }), routes, // Leave this as is and make changes in quasar.conf.js instead! // quasar.conf.js -> build -> vueRouterMode // quasar.conf.js -> build -> publicPath history: createHistory(process.env.VUE_ROUTER_BASE) }) return Router }) quasar.config.js// Configuration for your app // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file import VueRouter from 'unplugin-vue-router/vite' import { defineConfig } from '#q-app/wrappers' export default defineConfig((/* ctx */) => { return { // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature // preFetch: true, // app boot file (/src/boot) // --> boot files are part of "main.js" // https://v2.quasar.dev/quasar-cli-vite/boot-files boot: [ ], // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css css: [ 'app.scss' ], // https://github.com/quasarframework/quasar/tree/dev/extras extras: [ // 'ionicons-v4', // 'mdi-v7', // 'fontawesome-v6', // 'eva-icons', // 'themify', // 'line-awesome', // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both! 'roboto-font', // optional, you are not bound to it 'material-icons', // optional, you are not bound to it ], // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#build build: { target: { browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ], node: 'node20' }, vueRouterMode: 'hash', // available values: 'hash', 'history' // vueRouterBase, // vueDevtools, // vueOptionsAPI: false, // rebuildCache: true, // rebuilds Vite/linter/etc cache on startup // publicPath: '/', // analyze: true, // env: {}, // rawDefine: {} // ignorePublicFolder: true, // minify: false, // polyfillModulePreload: true, // distDir // extendViteConf (viteConf) {}, // viteVuePluginOptions: {}, vitePlugins: [ ['vite-plugin-checker', { eslint: { lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{js,mjs,cjs,vue}"', useFlatConfig: true } }, { server: false }, ], // 자동 라우터 플러그인 사용하기 VueRouter({ }), ] }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#devserver devServer: { // https: true, open: true // opens browser window automatically }, // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#framework framework: { config: {}, // iconSet: 'material-icons', // Quasar icon set // lang: 'en-US', // Quasar language pack // For special cases outside of where the auto-import strategy can have an impact // (like functional components as one of the examples), // you can manually specify Quasar components/directives to be available everywhere: // // components: [], // directives: [], // Quasar plugins plugins: [] }, // animations: 'all', // --- includes all animations // https://v2.quasar.dev/options/animations animations: [], // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#sourcefiles // sourceFiles: { // rootComponent: 'src/App.vue', // router: 'src/router/index', // store: 'src/store/index', // pwaRegisterServiceWorker: 'src-pwa/register-service-worker', // pwaServiceWorker: 'src-pwa/custom-service-worker', // pwaManifestFile: 'src-pwa/manifest.json', // electronMain: 'src-electron/electron-main', // electronPreload: 'src-electron/electron-preload' // bexManifestFile: 'src-bex/manifest.json // }, // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr ssr: { prodPort: 3000, // The default port that the production server should use // (gets superseded if process.env.PORT is specified at runtime) middlewares: [ 'render' // keep this as last one ], // extendPackageJson (json) {}, // extendSSRWebserverConf (esbuildConf) {}, // manualStoreSerialization: true, // manualStoreSsrContextInjection: true, // manualStoreHydration: true, // manualPostHydrationTrigger: true, pwa: false // pwaOfflineHtmlFilename: 'offline.html', // do NOT use index.html as name! // pwaExtendGenerateSWOptions (cfg) {}, // pwaExtendInjectManifestOptions (cfg) {} }, // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa pwa: { workboxMode: 'GenerateSW' // 'GenerateSW' or 'InjectManifest' // swFilename: 'sw.js', // manifestFilename: 'manifest.json', // extendManifestJson (json) {}, // useCredentialsForManifestTag: true, // injectPwaMetaTags: false, // extendPWACustomSWConf (esbuildConf) {}, // extendGenerateSWOptions (cfg) {}, // extendInjectManifestOptions (cfg) {} }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova cordova: { // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor capacitor: { hideSplashscreen: true }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron electron: { // extendElectronMainConf (esbuildConf) {}, // extendElectronPreloadConf (esbuildConf) {}, // extendPackageJson (json) {}, // Electron preload scripts (if any) from /src-electron, WITHOUT file extension preloadScripts: [ 'electron-preload' ], // specify the debugging port to use for the Electron app when running in development mode inspectPort: 5858, bundler: 'packager', // 'packager' or 'builder' packager: { // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options // OS X / Mac App Store // appBundleId: '', // appCategoryType: '', // osxSign: '', // protocol: 'myapp://path', // Windows only // win32metadata: { ... } }, builder: { // https://www.electron.build/configuration/configuration appId: 'vue3-quasar-firebase-app' } }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex bex: { // extendBexScriptsConf (esbuildConf) {}, // extendBexManifestJson (json) {}, /** * The list of extra scripts (js/ts) not in your bex manifest that you want to * compile and use in your browser extension. Maybe dynamic use them? * * Each entry in the list should be a relative filename to /src-bex/ * * @example [ 'my-script.ts', 'sub-folder/my-other-script.js' ] */ extraScripts: [] } } }) 기존의 라우터를 냅두면 MainLayout 으로 가고 주석처리해버리면 빈화면입니다. const routes = [ { path: '/', component: () => import('layouts/MainLayout.vue'), children: [ { path: '', component: () => import('pages/IndexPage.vue') } ] }, // Always leave this as last one, // but you can also remove it { path: '/:catchAll(.*)*', component: () => import('pages/ErrorNotFound.vue') } ] export default routes  

현재 Quasar는 강의에서 안내한 버전 그대로 맞추면 실행 시 에러가 발생해서, 핵심 버전만 맞추니 정상적으로 실행됩니다.혹시 에러 생기시는 분 참고하세요~

 여백이 선생님 만큼 안떨어지는데 왜 그럴까요? <template> <g-page class="q-pa-xl"> <section class="q-mb-xl"> <div class="text-h4">Headings</div> <q-separator class="q-my-md" /> <p class="text-h1">Headline 1</p> <p class="text-h2">Headline 2</p> <p class="text-h3">Headline 3</p> <p class="text-h4">Headline 4</p> <p class="text-h6">Headline 5</p> <p class="text-h6">Headline 6</p> <p class="text-subtitle1">Subtitle 1</p> <p class="text-subtitle2">Subtitle 2</p> <p class="text-body1"> Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. </p> <p class="text-body2"> Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae. </p> <p class="text-caption">Caption text</p> <p class="text-overline">Overline</p> </section> <section> <div class="text-h4">FontWeight</div> <q-separator class="q-my-md" /> <p class="text-weight-thin"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p class="text-weight-light"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p class="text-weight-bold"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </section> <section> <div class="text-h4">CSS Helper Classes</div> <q-separator class="q-my-md" /> <p class="text-weight-thin text-right"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p class="text-weight-light text-center"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p class="text-weight-bold text-strike"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </section> </g-page> </template> <script></script> <script setup></script> <style lang="scss" scoped></style>

현재 디폴트 레이아웃이 나오지 않아, 막히고 있습니다ㅠ quasar.config.js  실행시 localhost:9000/ 경로에서는 잘 나오고 있습니다 확인결과 아래 코드를 추가해주어야만 헤더가 잘 뜹니다..   <route lang="yaml"> meta: layout: default </route>   

Pinia setup stores user 사용자 관리8분 32초에 아래 에러가 나오는데, 별다른 언급이 없는데,뒤에 해결을 하는지요?답변 주시면 감사하겠습니다. Cross-Origin-Opener-Policy policy would block the window.closed call.

처음에 퀘이사 프로젝트를 생성하고, unplugin-vue-router가 동작하지 않아 적잖이 당황했습니다.   여러 테스트를 해본 결과... 다음과 같은 결과를 얻었습니다. 1/25일 기준, 최신 Vue/Vue Router 기준으로... "vue": "^3.5.0", "vue-router": "^4.5.0" unplugin-vue-router의 0.8.8까지만 호환되는 걸 확인했습니다. "unplugin-vue-router": "^0.8.8", 정확히, 0.9.0으로 하니까..chunk-NFXBJ25B.js?v=f99a8603:1268 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')위의 오류가 나더군요... 덧) 강사님 최신 unplug-vue-router 호환이슈좀 해결해 주세요.. ~~ ^^ 

안녕하세요~ 웹 레이아웃 구성 default.vue 파일의 코드 일부분 입니다.route.meta? 에서 ?물음표개념이 어떻게 될까요?지워도 작동해서 질문 드립니다.답변 주시면 감사하겠습니다. const pageContainerStyles = computed(() => ({ maxWidth: route.meta?.width || '1080px', margin: '0 auto', }));  

onCreateUser와 onDeleteUser 함수 작성 후 에뮬레이터를 실행하면functions.region is not a function이라고 로그에 나오고 있는데혹시 firebase-functions 버전 문제일까요??ㅠㅠ어떻게 해결 해야할 지 모르겠어요ㅠㅠ 도움 부탁드립니다~

 install도 잘 했습니다. npm i -D unplugin-vue-router router>index.js도 강의와 같이 설정했고요. 이유를 모르겠습니다.

짐 코딩님 강의 정말 잘 보고 있습니다.강의 내용과 별도로 좋았던게 문서보는법이였는데요. 해당 부분 추후 강의에서 좀 더 다뤄주셨으면 좋을것 같아서요.제가 아직 강의를 다 수강한건 아니지만 FireBase 문서 뿐만 아니라 다른 프레임워크 문서, 라이브러리 문서, 기타 서비스 문서 보는 법과스택오버플로우 문서활용하는 법 (에러 내용은 같지만, 에러 발생한 및 개발하는 상황이 다른경우가 많더라구요)다른 사람들이 GitHub 코드 참고 및 활용하는 방법도 영상으로 꼭 다뤄주셨으면 좋겠습니다..! 추가로 FireBase 강의의 경우 DB 관리및 설계를 FireBase 를 활용해서 하였는데순수하게 백엔드 및 DB 설계하는 강의도 꼭 다뤄주시면 진짜 반드시 수강신청해서 완강하겠습니다..! 좋은 강의 올려주셔서 감사합니다

 혹시나 저 같으신 분 있으실까봐 공유해요!firebase hosting 후 Deploy complete! 라고 잘 떴는데도 불구하고 본인이 만든 페이지는 안뜨고 저 화면이 나타날때, 1분정도 기다렸다가 새로고침하니까 제대로 뜨네요 ㅎㅎ이런 이유인지 모르고 이것저것 다시 해보다가(삽질 ㅠㅠ)새로 고침 하니까 바로 뜨네요 😅😅  

비동기상태(loading,error)관리 24:40제가 수업에서 놓친건진 모르겠는데요. 타입에 String, Number는 알겠지만 negative가 뭔지 모르겠네요. 검색해도 못찾겠구요.

여러군데 검색해도 나오지 않기에, 이곳에 올려봅니다.  항상 좋은 강의 감사드립니다!

안녕하세요volar 설치 확인 중 . volar 를 입력하면 강의에서 볼 수 있는 " Vue Langve Features(Volar)" 이 검색 되질 않습니다. TypeScriptg vue Plugn(volar) 은 취소선으로 처리되어 김색 데고요...Visaul Code 문제?..글쎄요.. 잘 모르겠습니다. 지원 부탁 드립니다.

안녕하세요. 강의 잘 듣고 있습니다.강의중에 퀘이사 컴포넌트 속성 작성하실때 (ex <q-input outline /> )영상에서는 o 만 타이밍해도 자동완성이 작동하던데, 저는 안되더라구요.퀘이사 다른 익스텐션을 테스트해봐도 작동이 안되거나 버전업이 안되는것들 뿐이네요.volar 에서 Vue - Official 로 바뀐거같긴합니다만 이거때문일까요? 다른방법이 없을까요? 아니면 따로 사용하시는게 있을까요?

Firebase 요금에 관한 문의 사항이 있습니다.회사 내 프로젝트인데 Firebase가 오픈 소스인 줄 알았는데 요금제가 있더군요생각보다 요금제에 대한 함정이 있는 것 같아 사용하기가 선뜻 내키지 않습니다.또한 저희는 오픈 소스를 사용해야 하는 입장이고 클라우드 환경이라면 AWS를 이용해야 하는 상황입니다. 질문혹시 Firebase를 사용하지 않고 자체 DB를 이용한다고 할 때 강의 내용에 나온 프론트 화면이나 로직은 사용이 가능합니까?만약 Firebase Store를 이용하지 않는다면 이 강의는 건너 뛰고 Nuxt3로 가는 것이 좋습니까? 

프로젝트에서 Quasar를 이용하여 프론트를 개발할 때textarea, password 와 같은 입력 필드들을 base component로 만들어서 개발자에게 제공하는 것이 일반적인 방식인가요? 아니면 개발자가 하나하나 type이라던지 placeholder를 지정하면서 개발하는 것이 일반적인 방식인가요?