<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 이런식으로 뜨네요

 강의 마지막 부분에서 갑자기 로딩중으로 뜨는데 제 컴에서만 그러는 거나요?

양질의 강의들.. 너무나도 잘듣고있습니다.백엔드하다가 프론트의 필요함을 절실히 느껴 선생님의 vue 1,2 그리고 Quasar 까지 풀코스로 즐기고 있습니다.다름이 아니라, 선생님의 vscode 처럼 Quasar 내장 컴포넌트의 색이 녹색으로 변하지 않는 이슈가 있는데 해결 방법 아시면 답변 부탁드리겠습니다.그리고 오른쪽 상단 vue 아이콘은 어떤 플러그인인지도 궁금합니다.(vscode 은 night-owl 같은것은 쓰지않고 순정으로 사용중입니다. 또한 프로젝트 한두개 더 생성해도 동일합니다 ㅠ)

좋은 강의 감사드립니다. 퀘이사를 처음 접해보면서 궁금증이 생겨 질문 하나 남깁니다.Quasar가 기본적으로 Design Framework인 걸로 저는 이해를 하고 있는데, Doc에서는 SSR 모드를 통해 ssr을 지원한다고도 하고, hydration도 지원한다는 식으로 설명이 되어 있는것 같더라고요.얼핏 보기에는 SPA 방식에다가 Meta 태그 통해 SEO를 제어하는 방식으로 SSR 모드를 운용하는거 같은 느낌이긴 한데, 이게 되게 헷갈립니다.비공식적으로 Nuxt에서 Quasar를 끌어다 쓰는 플러그인도 있는걸 보면 그냥 단순한 Design Framework로만 보면 되는거 같기도 한데, 또 Nuxt처럼 라우팅 방식이 바뀌는게 아니라 SPA에서 Router 사용하듯이 하니... Quasar를 Nuxt 대체품으로 생각해도 괜찮은건가요? 아니면 그냥 Bootstrap 같은 Design Framework로만 보는게 맞을까요?

링크이동을 하는데 a href에 "#/to/typography"가 걸려있는데 여기서 to를 빼거나 혹은 #을 빼는 방법이 뭘까요?

 npm run dev를 해도 브라우저 화면에서 안나옵니다.그러다가 constants.js파일에서 썼던 아래의 소스를 지워보았더니 그럼 또 잘나옵니다. 제가 뭔가 잘못 넣은걸까요???export default boot(({ app }) => { app.config.globalProperties = 'Hello Quasar!!'; });그리고 두번째 질문은 터미널에 npm run dev를 할때마다 http://localhost:9001/#/, http://localhost:9002/#/,http://localhost:9003/#/ 이렇게 로컬호스트 번호가 증가하는데 제가 run을 계속해서 그런건가요??

안녕하세요. 강사님 강의 잘 보고 있습니다.quasar scss 파일 추가하고 스타일 커스터마이징 하고 싶은데quasar.variables.scss에기존방식처럼 app.scss에 @import url(custom.scss) 해서 넣으니...에러가 떠서... 작업이 안되는데 혹시.. 따로 스타일 파일 추가하는 방식이 있을까요? 부탁드립니다.

 선생님 터미널에서 npm i -g vercel으로설치중아래의 경고 문구가 있었고 CLI Login Failed창이 바로 나와요~ 경고와 관련이 있는건가요?아니면 다른 문제로 봐야할까요? (github로 login 했습니다)

 선생님 SUB-LAYOUT 버튼 누를때 아래의 창이 떠요~경로코드를 잘못했나 몇번씩 보았는데 잘못된 부분은 없구요~ 오류 코드를 검색창에 검색 해보았는데 잘모르겠어요~

안녕하세요, vue3 기본, 실전 강좌에 이어 quasar 강좌도 알차게 구성해주신 덕에생소한 세계에 잘 진입할 수 있었습니다. 감사합니다.quasar 강좌수강 중 의문이 생겨 아래와 같이 질문드립니다. 질문 1.<q-list :style="{'min-width': 100}"><q-list style="min-width: 100px">위의 두 가지는 같은 결과를 보여주는 것을 확인했습니다.:(v-bind) 의 유무가 { }(중괄호) 사용 여부에 영향을 준 것일까요? 어떤 영향을 준 것일까요?질문 2.const leftColStyle = computed(() => ({ hidden: $q.screen.lt.md }));위 코드에서 { }(중괄호)을 ( )(소괄호)로 한번 더 감싼 이유는 뭘까?  질문 3.const totalCount = computed(() => response.value.headers['x-total-count']);위 코드에서 response.value.headers['x-total-count’]에는 string값이 담겨 있는데,이를 다시 반응형 데이터로 바꾸기 위해 computed를 사용했다는 설명을 해주셨습니다. computed는 연산을 위해 사용한다고 이해했는데, 일반 데이터를 반응형으로 바꿀 때 사용한다고 하니 어리둥절합니다.아래와 같은 방식으로 반응형으로 변환하는 것에는 어떤 문제가 있을까요?const totalCount = ref(response.value.headers['x-total-count'])질문 4.flex와 row, column은 동급의 개념일까요? container 안에서, container에 포함된 items들을helper classes들을 통해 배치하는 것은 flex와 row/column이 동일하다고 생각했습니다. 차이..점을 모르겠습니다.column은 flex-direction이 column인 flex일 뿐이라는 생각이 듭니다. flex flex-centerrow를 사용하면 items-center, justify center를 사용해야했던 것을 flex를 사용하면 flex-center로 한 번에 정렬 가능하다는 정도의 차이도 확인했고요.

 안녕하세요 좋은 강의 만들어주셔서 감사드립니다.인스타그램 만들기를 따라해보고, 화면을 줄였을 때 (닉네임 - 프로필 편집과 설정)을 row에서 column으로 바꿔보고 싶었습니다쉬울 것 같았는데 도저히 방법을 모르겠어서 질문드립니다class에서 row에서 column으로 너비에 따라 바꾸는 방법이 있나요?

 혹시 파일 업로드 처리 관련해서는 추가 강의나 예제 자료를 제공해주실 수는 없을까요~?

const routes = [ path:'abcd', component: import('path/abcd.vue') ];다이렉트로 위처럼 사용하거나, import abcd from 'path/abcd.vue'; const routes = [ path:'abcd', component: abcd];이렇게 쓰면 어떤 문제가 발생하나요?