월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결퀘이사(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), }),
- 미해결퀘이사(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가 빠져서 읽히는 건가요?
- 미해결퀘이사(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코드를 위와습니다.
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
Quasar 관련 익스텐션
텍스트 에디터에서 코드 작성하실 때Template에서 Quasar 관련 코드는 초록색으로 표시되시던데 어떤 extension 설치하신건지 알 수 있을까요?? 그리고 추가적으로 추천해주실만한 유용한 extension 있으면 알려주시면 감사하겠습니다
- 미해결퀘이사(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>
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
버튼이 마음대로 크기가 바뀌어요
강의를 듣고 말씀해주신대로 헤더를 만들고 있는데 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>
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
다크 모드 처리 관련하여 질문드립니다.
안녕하세요, 퀘이사 다크 모드 사용과 관련하여 질문이 있어 글을 남기게 되었습니다.퀘이사 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파일을 감지하는 방식이 있는지 궁금합니다. 감사합니다!!
- 해결됨퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
script setup 태그 유무에 따라서 페이지 출력이 안됩니다.
<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 태그 유무에 따라 빈 화면이 출력하는 걸까요 ..?
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
vue3 composition api (script setup) 사용 시 전역변수 접근
안녕하세요, 항상 좋은 내용 감사한 마음으로 보고 있습니다. 오늘 수업에서는 boot 디렉토리에 constants.ts를 생성하고, 이 안에서 globalProperties를 선언 후 .vue 파일에서 이를 확인했습니다. <script setup> 방식에서는 this로의 접근이 불가한가요?생각지도 못했었는데, this를 통해 globalProperties에 접근하려 하니 안되더라고요..그렇다면 <script setup>에서 globalProperties를 포함하여, boot 파일로 작성한 것들에 접근하려면 어떻게 해야할까요? 미리 감사드립니다.
- 해결됨퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
한글 실시간 바인딩
vue에서는 한글 실시간 바인딩을 다음 코드로 합니다. <template> <h1>{{ msg }}</h1><input type="text" :value="msg" @input="msg = $event.target.value" /></template> 하지만 퀘이사의 q-input에서는 @input 이벤트가 디프리케이트 되어서 동작하지 않습니다.한글 실시간 처리를 하려면 어떻게 해야할지요?감사합니다.
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
vue3 composition Api 사용시 setup 내부에서도 /src/boot에 설정한 constatns.js 값을 가져올수 있나요?
vue3 composition Api 사용시 setup 내부에서도 /src/boot에 설정한 constatns.js 값을 가져올수 있나요?
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
router.push로 이동 시, 유튜브 페이지의 컨텐츠 영역 안보이는 현상
안녕하세요.좋은 강의 감사드립니다. form-handling 페이지에서 <script setup> 내에서 router.push( {name: 'youtube'} ) 만 기입하여바로 이동할 수 있도록 해보았습니다.(라우터설정에는 name에 youtube' 미리 수정해두었습니다.) 그런데 이동은 정상적으로 되는데, 컨텐츠영역이 나오지를 않네요. (IndexPage.vue 부분) 왜 안나오는지, 어떻게해야 나오게 되는지 좀 알 수 있을까요? 감사합니다.
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
validation
q-form에서 validation을 사용하기에 적합한 방법이나 라이브러리가 있을까요?
- 해결됨퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
CORS 설정
백엔드와 분리해서 프로젝트 수행중인데 CORS 설정을 백엔드에서 해줬는데도 오류가 납니다프론트에서 따로 설정해줘야할 부분이 있을까요?
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
질문 있습니다
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 이런식으로 뜨네요
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
Helper Classes
강의 마지막 부분에서 갑자기 로딩중으로 뜨는데 제 컴에서만 그러는 거나요?
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
Quasar 내장 컴포넌트 색 질문입니다.
양질의 강의들.. 너무나도 잘듣고있습니다.백엔드하다가 프론트의 필요함을 절실히 느껴 선생님의 vue 1,2 그리고 Quasar 까지 풀코스로 즐기고 있습니다.다름이 아니라, 선생님의 vscode 처럼 Quasar 내장 컴포넌트의 색이 녹색으로 변하지 않는 이슈가 있는데 해결 방법 아시면 답변 부탁드리겠습니다.그리고 오른쪽 상단 vue 아이콘은 어떤 플러그인인지도 궁금합니다.(vscode 은 night-owl 같은것은 쓰지않고 순정으로 사용중입니다. 또한 프로젝트 한두개 더 생성해도 동일합니다 ㅠ)
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
quasar의 역할에 관한 질문
좋은 강의 감사드립니다. 퀘이사를 처음 접해보면서 궁금증이 생겨 질문 하나 남깁니다.Quasar가 기본적으로 Design Framework인 걸로 저는 이해를 하고 있는데, Doc에서는 SSR 모드를 통해 ssr을 지원한다고도 하고, hydration도 지원한다는 식으로 설명이 되어 있는것 같더라고요.얼핏 보기에는 SPA 방식에다가 Meta 태그 통해 SEO를 제어하는 방식으로 SSR 모드를 운용하는거 같은 느낌이긴 한데, 이게 되게 헷갈립니다.비공식적으로 Nuxt에서 Quasar를 끌어다 쓰는 플러그인도 있는걸 보면 그냥 단순한 Design Framework로만 보면 되는거 같기도 한데, 또 Nuxt처럼 라우팅 방식이 바뀌는게 아니라 SPA에서 Router 사용하듯이 하니... Quasar를 Nuxt 대체품으로 생각해도 괜찮은건가요? 아니면 그냥 Bootstrap 같은 Design Framework로만 보는게 맞을까요?