안녕하세요~ default.vue에서 헤더의 메뉴 부분 컴포넌트를 분리해봤는데그럼 authDialog 가 활성화가 안 되더라구요..방법이 없을까요?

안녕하세요, 파이어베이스 인증 부분'비밀번호 변경하기' 강의에서 궁금한 것이 있어 질문드립니다. 비밀번호 재설정을 위해 이메일로 재설정 링크를 발송하고재설정할 비밀번호를 입력하면이 창이 뜨는데, 여기서 저는 비밀번호 재설정 후 바로 제가 원하는 로그인화면으로 나왔으면 좋겠습니다. 상기의 화면은 제가 생성한 파일이 아니라firebase에서 보여주는 화면인데,그 부분은 어떻게 해야할까요, 그럼 확인부탁드리겠습니다감사합니다! 

안녕하세요~당연히 강의 내용을 따라가는게 맞긴 합니다만, 제가 백엔드 개발자라 인텔리제이 IDE를 쓰는게 편해서 강의를 인텔리제이로 진행중입니다vite로 프로젝트를 만들면 인텔리제이에서 뷰로 인식해서 여러 vscode에서 따로 설치해야하는 플러그인 기능을 기본으로 제공해주더군요근데 퀘이사로 프로젝트를 생성하면 이같은 기능이 동작하지 않네요 정리하자면 vite로 프로젝트를 만들어서 퀘이사를 설치해도 후반부 강의에 문제 없을까요?

해당 강의에서 처음으로 서버를 틀었을 때우선 터미널 창에 App • ⚠ quasar.config.js > invalid Vite plugin specified (cannot find it): unplugin-vue-router/vite 이런 코드가 떴고,페이지에 접속했을 때에는[plugin:vite:import-analysis] Missing "./auto" export in "vue-router" packageC:/Users/soyou/vue3-quasar-app/src/router/index.js이런 오류 코드가 떴습니다.강의 코드 그대로 따라했는데, 어디서 오류가 난 것인지 모르겠어 문의드립니다.

엘리먼트 자동으로 닫을 수 있는 eslint 룰설정입니다. vscode 자동 저장 기능이랑 같이 설정하면 <q-space></q-space>가 <q-space /> 로 수정됩니다. rules: { 'prefer-promise-reject-errors': 'off', 'vue/multi-word-component-names': 'off', // allow debugger during development only 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'vue/html-self-closing': [ 'warn', { html: { void: 'always', normal: 'never', component: 'always' }, svg: 'always', math: 'always' } ]

강의를 듣고 말씀해주신대로 헤더를 만들고 있는데 q-button컴포넌트가 헤더를 줄이면 혼자서 사이즈가 커져버리는데 원인이 뭔지 모르겠습니다.css로 버튼 높이를 고정해도 계속 커집니다 또한 toolbar의 경우 일정 크기 이하일경우 토글메뉴바로 변경하게는 불가능한걸까요? <template> <q-layout view="lHh Lpr lFf"> <q-header class="bg-white text-black"> <q-toolbar class="row items-center justify-between"> <q-toolbar-title> <q-avatar size="md"> <img src="src/assets/logo.png" /> </q-avatar> <RouterLink to="/">부동부동</RouterLink> </q-toolbar-title> <q-tabs v-model="tab" shrink> <q-tab name="tab1" label="Tab 1" /> <q-tab name="tab2" label="Tab 2" /> <q-tab name="tab3" label="Tab 3" /> </q-tabs> <div class="row no-wrap q-gutter-sm"> <q-btn class="header btn-fixed-height" text-color="accent" color="white" outline style="accent" label="회원가입" /> <q-btn class="header btn-p" color="primary" label="로그인" /> </div> </q-toolbar> </q-header> <q-drawer v-model="leftDrawerOpen" show-if-above bordered> <q-list> <q-item-label header>Essential Links</q-item-label> <EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" /> </q-list> </q-drawer> <q-page-container> <router-view /> </q-page-container> </q-layout> </template> <script setup> import { ref } from 'vue'; import EssentialLink from 'components/EssentialLink.vue'; </script> <style lang="scss" scoped> .custom-tolbar { height: 60px; padding: 0 20px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.26); } .header { border-radius: 8px; font-weight: 600; font-size: 0.9rem; border: 1px solid; } a { font-weight: 600; font-size: 24px; line-height: 48px; padding: 3px; color: #092d37; text-decoration: none; } </style>

안녕하세요 email인증 진행 중 오류가 발생하여 문의드립니다.코드는 확인하였고, 구글 콘솔에서 템플릿도 확인하였습니다.(템플릿에서 따로 수정한것은 없음)이메일도 정상적으로 발송되었으나, 해당 링크로 들어가면 이런 에러페이지가 발생하여 이메일 인증이 되지 않고있습니다..무엇이 문제인지 검색해보았지만 답을 찾지 못해 문의남깁니다.// sendEmail for verification export async function sendVerificationEmail() { await sendEmailVerification(auth.currentUser); console.log(auth.currentUser.emailVerified) }

<template v-for="(_, name) in $slots" :key="name">  여기 부분에서 _ 이 부분에 배열 요소 구조 파괴 패턴이 필요합니다.ts(1181), 문제 보기 (<Alt>+F8) 빠른 수정을 사용할 수 없음 이 에러가 나거든요??근데 또 실행은 잘 되는데, 빨간색 줄이 여간 신경이 쓰여서...ㅎㅎㅎ; 문의드립니다. 

안녕하세요.해당 강의 수강하면서 프로젝트 진행 중에 궁금한 점이 있어 질문드립니다.실무 환경에서 axios를 이용해 API 호출을 한다고 가정하였을 때, [local, stage, prod] 와 같은 다양한 환경에 대하여 API 호출 도메인이 달라지게 됩니다.vite를 사용하였을 때에는 .env.local, .env.stage, .env.prod와 같이 환경에 따른 변수를 지정하고, vite --mode local 과 같은 형태로 실행하는 환경을 설정할 수 있었는데요.이러한 다양한 환경에 다른 값을 지정해야할 떄에 어떻게 사용하시는지 궁금합니다.

인텔리제이에서 작업해야하는 환경이라 최대한 환경설정을 맞추면서 하고 있습니다 router들은 잘 반영이 되어있고 화면에서도 Default Layout 은 적용되어 있는 상태인데, route 태그를 통해 meta 및 layout을 변경하려고 할 때 적용이 되지 않습니다.혹시 이유를 알 수 있을까요?    

안녕하세요, 퀘이사 다크 모드 사용과 관련하여 질문이 있어 글을 남기게 되었습니다.퀘이사 Documentation을 보게 되면, 다크 모드를 토글했을 때 body에 .body--light / .body--dark가 변경되어 나타나기 때문에 이를 활용하여 모드 별 스타일링을 진행하는 것을 확인했습니다. 그런데 이 부분이 다소 불편하여 (혹은 제가 제대로 사용하지 못하고 있는 상황이라) 질문드립니다.프로젝트를 진행하면서 css파일을 세분화시킬 필요성을 느끼고 있고, 이를 진행하고 있습니다.특정 Vue 파일에서만 필요한 클래스에 대한 스타일링은 해당 Vue 파일의 <style scoped lang="sass">로 처리하고 있고, 범용적으로 쓰는 것들은 app.scss에서 관리하고 있습니다.그런데 다크모드와 라이트모드일 때 scss 변수의 값이 달라지는데 이를 다른 scss파일에서 사용하는 데 문제가 있습니다.다크모드와 라이트모드의 scss 파일의 내용 예시는 아래와 같습니다. 변수명은 같고 값만 다른 상황입니다. // dark.scss $color-text-primary: #ecf3f0; $color-text-secondary: #c6cdc9; ... // light.scss $color-text-primary: #161816; $color-text-secondary: #747676; ...모드에 따라 달라지는 변수들을 적용하기 위해서 현재 제가 생각한 방식은 결국 색상 별 파일을 따로 분리하여 색상과 관련된 코드는 해당 부분에서 .body--dark, .body--light로 모든 클래스의 색상을 변경해야 되는 상황으로 이어져서 질문드립니다.// dark-mode.scss .body--dark { .border-bottom { ... } } // dark-mode.scss .body--dark { .border-bottom { ... } }  Quasar.variables에 $변수를 일괄적으로 등록하는 방법을 사용한다면, 모드 별 변수 명을 다 다르게 설정하고, .body--dark / .body--light에 각 클래스 별로 변수를 사용하는 방식을 진행해야 합니다. 모드 별로 변수명을 다르게 하는게 나을지, 아니면 같게 한 다음에 편하게 처리하는 방식이 있는지 궁금합니다.2. 1번과 관련된 내용인 것 같습니다. 가능한 상황인지는 모르겠지만, quasar.variables.scss 등에서 isDark(다크모드여부)를 감지하여 $변수명: dark ? '#aaa' : '#000' 등으로 일괄 처리를 할 수 있는 방식은 없는지 알고 싶습니다.3. css파일이 세분화됨에 따라서 만약 모드에 따른 $변수를 두 파일에서 나누어서 관리한다면, app.scss 등과 같이 해당 변수가 정의되어 있지 않는 곳에서 특정 변수 명을 사용한다면 모드에 따른 scss파일을 감지하는 방식이 있는지 궁금합니다. 감사합니다!!

안녕하세요.해당 강의 수강 중 이메일 변경 과정에서 에러가 발생하였고, 많은 분들이 해당 에러를 겪을 것 같아 해결방법 공유드립니다.에러firebase의 정책 변경에 따른 문제인지 이메일 변경시 변경하려는 이메일에 대한 인증이 필요하다는 에러가 나타납니다.해당 에러는 이메일 열거 보호 (무차별 이메일 입력에 대한 대처)로 인해 나타나는 에러이며, 이메일 열거 보호를 해제하여 해결하였습니다.참조: https://github.com/firebase/firebase-ios-sdk/issues/11886 해결방법Firebase 프로젝트 ID 확인https://console.firebase.google.com/Firebase 콘솔 접속 -> 해당 프로젝트 접속 -> 좌측 상단 프로젝트 개요 우측 톱니바퀴 -> 프로젝트 설정화면에 노출되는 Firebase 프로젝트 생성시 작성한 프로젝트 ID를 확인합니다.gCloud shell 접속https://console.cloud.google.com/welcome?cloudshell=true위 링크 접속시 하단에 CloudShell이 노출됩니다.gcloud access token 취득CloudShell 에 아래의 명령어를 입력해 accessToken을 취득합니다.gcloud auth print-access-token --project=PROJECT_ID위 명령어의 PROJECT_ID는 1. Firebase 프로젝트 ID 확인 에서 얻은 프로젝트 ID를 입력합니다.이메일 열거 보호 비활성화CloudShell 에 아래의 명령어를 입력해 이메일 열거 보호를 비활성화 합니다.curl -X PATCH -d "{'email_privacy_config':{'enable_improved_email_privacy':"false"}}" \     -H 'Authorization: Bearer ACCESS_TOKEN' \     -H 'Content-Type: application/json' -H 'X-Goog-User-Project: PROJECT_ID' \     "https://identitytoolkit.googleapis.com/admin/v2/projects/PROJECT_ID/config?updateMask=email_privacy_config"여기서 PROJECT_ID는 3번과 동일한 프로젝트 ID를, ACCESS_TOKEN은 3번을 통해 취득한 ACCESS_TOKEN을 입력합니다.이제 이메일 변경이 잘됩니다 :)참조: https://cloud.google.com/identity-platform/docs/admin/email-enumeration-protection?hl=ko이메일 열거 보호가 서비스중인 프로젝트라면 중요하겠지만 학습을 위한 개발단계인 현재는 비활성화해도 괜찮을 것 같습니다.감사합니다.

 <template> <q-page class="q-pa-xl"> <section class="q-mb-xl"> <div class="text-h4">Breakpoints</div> <q-separator class="q-my-md" /> <div class="target"></div> </section> <section class="q-mb-xl"> <div class="text-h4">$q.screen</div> <q-separator class="q-my-md" /> <div> {{ $q.screen }} </div> </section> </q-page> </template> <script> export default { mounted() { console.log('this.$q.screen: ', this.$q.screen); }, }; </script> <script setup> import { userQuasar } from 'quasar'; const $q = userQuasar(); console.log('setup -> $q.screen: ', $q.screen); </script> <style lang="scss" scoped> .target { height: 200px; background-color: $dark; } @media (max-width: $breakpoint-xs-max) { .target { background-color: $red; } } .target { body.screen--sm & { background-color: $orange; } } </style> 08:41 초에서 진행하는 userQuasar 를 script setup 태그 안에 임포트하고 실행하면 어떠한 오류도 없이 빈 화면만 출력되고 있습니다. script setup 을 주석 처리하면 정상적으로 breakpoints 페이지로 이동하고 정상 출력이 됩니다. 영상 따라서 하고 있는데 저는 왜 setup 태그 유무에 따라 빈 화면이 출력하는 걸까요 ..?

 안녕하세요, 항상 좋은 내용 감사한 마음으로 보고 있습니다. 오늘 수업에서는 boot 디렉토리에 constants.ts를 생성하고, 이 안에서 globalProperties를 선언 후 .vue 파일에서 이를 확인했습니다. <script setup> 방식에서는 this로의 접근이 불가한가요?생각지도 못했었는데, this를 통해 globalProperties에 접근하려 하니 안되더라고요..그렇다면 <script setup>에서 globalProperties를 포함하여, boot 파일로 작성한 것들에 접근하려면 어떻게 해야할까요? 미리 감사드립니다.

vue에서는 한글 실시간 바인딩을 다음 코드로 합니다. <template> <h1>{{ msg }}</h1><input type="text" :value="msg" @input="msg = $event.target.value" /></template> 하지만 퀘이사의 q-input에서는 @input 이벤트가 디프리케이트 되어서 동작하지 않습니다.한글 실시간 처리를 하려면 어떻게 해야할지요?감사합니다.  

 vue3 composition Api 사용시 setup 내부에서도 /src/boot에 설정한 constatns.js 값을 가져올수 있나요?

 안녕하세요.좋은 강의 감사드립니다. form-handling 페이지에서 <script setup> 내에서 router.push( {name: 'youtube'} ) 만 기입하여바로 이동할 수 있도록 해보았습니다.(라우터설정에는 name에 youtube' 미리 수정해두었습니다.) 그런데 이동은 정상적으로 되는데, 컨텐츠영역이 나오지를 않네요. (IndexPage.vue 부분) 왜 안나오는지, 어떻게해야 나오게 되는지 좀 알 수 있을까요?  감사합니다. 

q-form에서 validation을 사용하기에 적합한 방법이나 라이브러리가 있을까요?

백엔드와 분리해서 프로젝트 수행중인데 CORS 설정을 백엔드에서 해줬는데도 오류가 납니다프론트에서 따로 설정해줘야할 부분이 있을까요?

boot쪽 강의 들으면서 터미널에 quasar new boot initalization 라고 썻는데 보안오류라고 뜨면서 안되네요quasar : 이 시스템에서 스크립트를 실행할 수 없으므로 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1+ quasar new boot initalization+ ~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess 이런식으로 뜨네요