안녕하세요. 클스 입니다. 기존 프로젝트에서 vue3 + quasar 를 사용했는데, quasar가 기본적으로 yarn 기반 입니다. 그런데 친철하게도 pnpm도 지원합니다. 처음부터 quasar 프로젝트 생성시 pnpm 으로 하면됩니다. 아직 경험적 지원이라고 하네요~ $ pnpm create quasar # experimental support install pnpm $ brew install pnpm $ pnpm --version vi ~/.npmrc 수정 strict-ssl=false save=true save-exact=true shamefully-hoist=true 소스에서 패키지 설치 $ pnpm install $ pnpm outdated ==> 설치 버전과 최신버전 비교 그냥 업데이트 $ pnpm update 최신 업데이트 $ pnpm update -L 패키지 확인 pnpm-lock.yaml 소스 실행 $ pnpm dev ==> 에러 발생 [vite] Internal server error: No ESLint configuration found in /Users/demo/front-end/user_web/.quasar * 해결 방법 프로젝트 root에 .eslintrc.cjs 파일이 있음 rules: { ... } 에 아래와 같이 추가 '@typescript-eslint/no-unused-vars': 'warn', rules: { ... 'no-unused-vars': 'off', '@typescript-eslint/no-unused-vars': 'warn', }, * 환경변수 dotENV을 적용하여 실행하기 $ ENVIRONMENT=local pnpm dev 패키지 오래된것도 한번에 확인하고, 최신 버전도 한번에 설치해주고... 여러가지 장점도 있겠지만, 아직은 잘 모르겠습니다.  장점은 댓글로 달아주시면...

안녕하세요. 클스 입니다. vue에서 변수에 component 객체를 넣었더니, Vue.warn 이 떴다.  component 객체는 많은 정보를 담고 있어서, watch를 하게되면 엄청난 부하가 발생한다. 그래서 친절하게 markRaw를 사용하라고 알려준다. import { markRaw } from 'vue' ; export default { data() { return { layout: null , }; }, watch: { $route: { immediate: true , handler() { this .layout = markRaw( this .$route.meta.layout || DefaultLayout); }, }, }, }; Vue.js에서  markRaw  함수는 객체를 "원시"로 표시하는 데 사용되며, 이는 Vue 반응성 시스템에서 관찰되지 않음을 의미합니다. 특정 성능 문제가 있거나 특정 객체에 대해 Vue의 반응성 시스템을 선택 해제해야 하는 경우에만 사용하십시오. markRaw  함수는 다음과 같이 사용됩니다. const obj = { a: 1, b: 2, }; const rawObj = markRaw(obj); 이제  rawObj 는 반응성이 없습니다. 즉,  rawObj 의 속성이 변경되면 Vue는 렌더링을 다시 트리거하지 않습니다. markRaw  함수는 특정 성능 문제를 해결하는 데 유용합니다. 예를 들어, 매우 큰 객체를 반응성 객체로 선언하면 Vue는 객체의 모든 속성을 추적해야 합니다. 이는 성능 저하의 원인이 될 수 있습니다. 이 경우  markRaw  함수를 사용하여 객체를 반응성으로 선언하지 않고 렌더링을 다시 트리거하지 않도...

 안녕하세요. 클스 입니다. Quasar는 정말 vue3로 구현된 좋은 프레임워크 입니다.  아직 사용자가 많지 않아서 레퍼런스가 별로 없다는 것이 문제긴 합니다. 파일 업로더가 있는데 파일을 Drag & Drop 하면 서버에 올려줍니다. 물론 서버 rest api 가 있어야 합니다. https://quasar.dev/vue-components/uploader 그런데 메뉴얼 대로 했는데, 계속 오류가 납니다. 422 (Unprocessable Entity) performUpload @ quasar.esm.js:36051 runFactory 서버로 multi-part로 파일들을 보내는데, 서버쪽에서 files를 못받아서 문제 입니다. RESTAPI 서버는 아래 오류를 계속 발생 시킵니다. swagger로 하면 문제없이 동작 합니다. INFO:     127.0.0.1:59040 - "POST /api/upload/files HTTP/1.1" 422 Unprocessable Entity fiileupload.py @router.post( "/upload/files" ) async def create_upload_files( files : list[UploadFile]): for file in files: contents = await file.read() with open(os.path.join(UPLOAD_DIR, file.filename), "wb" ) as fp: fp.write(contents) print(file.filename) return { "filenames" : [file.filename for file in files]} fileupload.vue < template > < q-page class = "bg-light-green window-...

 안녕하세요. 클스 입니다. 프로젝트를 하다보면 local, dev, test, staging, production 등 다양한 환경으로 API 주소등 환경을 다르게 가져가야 할 때가 있습니다. 이때 필요한 것이 env 파일을 이용해야 합니다. Quasar  는 process.env 를 기본으로 제공합니다. quasar.config.js에 환경 변수를 넣어주면 process.env.변수 이렇게 사용하면 됩니다. https://quasar.dev/quasar-cli-webpack/handling-process-env/ 그러나 별도 파일로 구성하면 유지관리가 직관적이고 편리하기 때문에 dotenv 패키지를 많이 사용합니다. 1) dotenv 설치하기 $ yarn add dotenv $ .env 폴더 생성 ==> project root에 생성합니다. 2) .env.local 파일 생성 후 아래 추가 APP_TITLE= ':Admin' APP_MODE= 'local-로컬' APP_VERSION= '0.6.5' API_URL= http://localhost:8001 3) quasar.config.js 에 아래 추가 /* eslint-env node */ /* * This file runs in a Node context (it's NOT transpiled by Babel), so use only * the ES6 features that are supported by your Node version. https://node.green/ */ // Configuration for your app // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js const { configure } = require( 'quasar/wrappers' ); const path = require( 'path' ); const DotEnv = req...

안녕하세요. 클스 입니다. 오늘은 5월의 마지막 날이네요 Quasar는 vue3 + vite를 기반으로 합니다. 그런데 초반에 text 파일을 읽어서 처리하는데 raw-loader 를 사용했습니다. 이것은 webpack 기반이라 vite와는 맞지 않습니다. 그래서 yarn install 을 하면 아래와 같이 경고가 발생합니다. yarn install v1.22.19 [1/5] 🔍  Validating package.json... [2/5] 🔍  Resolving packages... [3/5] 🚚  Fetching packages... [4/5] 🔗  Linking dependencies... warning " > raw-loader@4.0.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [5/5] 🔨  Building fresh packages... ✨  Done in 4.53s. 오늘은 똑 같은 기능을 하면서 vite 기반의 라이브러리로 대체해보고자 합니다. 먼저 raw-loader 삭제 합니다. $ yarn remove raw-loader 그리고 vite-raw-plugin 을 설치합니다. $ yarn add vite-raw-plugin 소스는 하나도 수정할 필요가 없습니다. package.json 에 정상적으로 삭제되고 설치된 것을 확인 할 수 있습니다. "vite-raw-plugin" : "^1.0.1" , < script lang = "ts" > import { useQuasar } from 'quasar' ; import { defineComponent, defineAsyncComponent, ref } from 'vue' ; import getVueTemplate from 'src/ztemplate/vue_gen_template.t...

안녕하세요. 클스 입니다. Child.vue --> Parent.vue 와  데이터를 주고받을 때, emit을 사용합니다. 그런데 아래와 같은 오류가 발생합니다. Warning "Extraneous non-emits event listeners" shows up even when emits is set declare it using the "emits" option. 해결 방법1) Parent.vue 에서 root 로 div를 감싸주는 된다. 그런데 UI 가 깨지는 문제가 발생한다. <template>      <div>  : 추가       .... 여러가지 컴포넌트 들....     <MenuComponent msg="string input" @testChange="testChange" />    </div>    : 추가 </template> Child.vue 에서 아래와 같이 보내준다. <script lang="ts"> ... methods: { emit TestChange ( val ) { this .$emit( ' testChange ' , val ); }, </script> 해결 방법2)  Child.vue에 emits 를 추가해준다. Parent.vue 에서 root 로 div를 감싸주는 된다. 그런데 UI 가 깨지는 문제가 발생한다. <template>        .... 여러가지 컴포넌트 들....     <MenuComponent msg="string input"  @testChange="testChange" /> </template> Child.vue 에서 아래와 같이 보내준다. <script lang...

안녕하세요. 클스 입니다. 오늘은 mariadb 의 mydb를 생성하고 테스트 테이블 만들었습니다. dump 로 백업하고, 복원하는 방법을 알아보겠습니다. 주기적인 백업은 무척 중요합니다. 우선 mariadb > test db 에 tbz_user 테이블 하나 만들어 줍니다. CREATE TABLE `tbz_user` ( `user_id` varchar ( 100 ) DEFAULT NULL , `user_nm` varchar ( 100 ) DEFAULT NULL ) ENGINE =InnoDB DEFAULT CHARSET=utf8mb3 COLLATE =utf8mb3_general_ci ; 데이터를 넣어 봅시다. INSERT INTO mydb.tbz_user (user_id, user_nm) VALUES('111', '김길동1'); INSERT INTO mydb.tbz_user (user_id, user_nm) VALUES('222', '박순식1'); 그리고 백업을 해봅시다. mariadb service 가 실행되어 있어야 합니다. $ cd ~/mariadb ==> 디렉토리 하나 만들고 들어 갑니다. [~/mariadb]$ mysqldump -u root -p mydb > mydb.sql Enter password: [~/mariadb]$ ll total 8 -rw-r--r--  1 keulstar  staff   1.9K  5 25 00:26 mydb.sql [~/mariadb]$ INSERT INTO mydb.tbz_user (user_id, user_nm) VALUES('333', '정한다1'); 잘들어 있는지 보시죠~ select * from mydb.tbz_user ; 111 김길동1 222 박순식1 333 정한다1 자 이상태에서 이전에 2개의 데이터가 들어있는 것을 복구하면 어떻게 될까요? 예상은 111, 222만 남...