월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
q-upload 문의 드립니다.
안녕하세요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-input과 :rules 속성을 함께 쓸때, items-center 속성이 이상한 현상
안녕하세요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값으로 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
강의 마지막 부분에서 갑자기 로딩중으로 뜨는데 제 컴에서만 그러는 거나요?