[quaser.dev][2014-09-14] 윈도우즈(10, 64bit)에 개발환경 설정하기

안녕하세요 클스 입니다. 팀에 하나의 제품을 개발할 때 인력이 약 15명 이상 있을 경우 react, vue, flutter등  선택의 폭이 넓어집니다. 그런데 애매하게 5~8명이 back-end, front-end, db, infra  전부 하면서 web, android, ios 앱을 개발하기엔 쉽지 않습니다. 우리는 무엇을 선택하면 좋을까요?  현재 우리팀은 FastAPI, vuejs 를 기본으로 사용하고 있는데.. vuejs가 아직 react의 방대함 그리고 커뮤니티를 따라가지는 못하는  듯합니다. 확실히 react 보다는 사용하기는 제 경우는 쉬웠습니다. 사설이 길었네요~ 여하튼 이번에는 웹에서 실시간으로 사용자에게 알림(시스템 변경, 작업 완료...)을  실시간으로 전달하기위해 많이 사용하는 websocket과 socketio가 있는데 둘의 확실한 선택 기준은 서비스 환경에서 통신에 문제가 있는가 없는가에 따라 다릅니다. socketio는 통신이 막히면 가능한 방식을 찾아서 연결해서 사용자에게 메시지를 전달합니다. HTTP long polling 방식으로 전달을 합니다. 문제는 주기적으로  long polling를 합니다. 그리고 socketio client를 사용하면 서버가 재시작되면 자동으로 다시 연결해줍니다.  개발자 입장에서는 확실히 좋은 기능입니다.  그외 방기능, 브로드캐스팅, 속삭임등등 일반 채팅방을 쉽게 구현할 수 있습니다. 또한 일반적으로 kafka, redis 와 다양한 mq 서버들과 연동이 가능합니다. 1. 목표 간단한 채팅방이 가능한 채팅 기능을 만들어 본다 fastapi에서 socketio를 많이 사용을 안 하는지? 업데이트가 잘 안되고 있어서 github등의 예제로는 404 Not Found, 403 등의 오류가 나서 접속이 안되었다 => 이것 때문에 쓴 글이기도 하다 2. 사용 socket.io 기반으로 python-socketio를 fast...

 안녕하세요. 클스 입니다. 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...

 안녕하세요. 클스 입니다. Quasar QSelect 옵션에 대한 설명을 하고자 합니다. 회사를 선택하거나, 여러 코드값을 선택할때 아래와 같은 화면이 필요합니다. 그리고 company_id 값으로 미리 선택되도록 해야 합니다. q-select 의 option 은 label, value 2개 속성이 기본 입니다.  물론 option-value = 'yyy' , option-label = "xxx" 이렇게 해서 커스텀 가능합니다. company_options: [ { label: 'Google' , value: 'Google-value' , description: 'Search engine' , category: '1' , },   소스를 보면 아래와 같이 사용하면 됩니다. 그런데  map-options , emit-value 2개 옵션을 잘 사용해야 원하는 값을 얻게 됩니다. < q-select filled v-model ="company_model" : options ="company_options" label = "Standard" map-options emit-value /> map-options 은 value 값으로 선택을 할 수 있게 하는 옵션입니다. emit-value 은 선택된 option의 value 값만 넘겨 줍니다. 앞에서 option을 object로 선언했기 때문에 map-option이 없으면 value 값이 화면에 표시됩니다. 아래 화면에서 보면 Apple-Value를 표시됩니다. 원하는건 Apple이 표시되길 원합니다. 이때 map-options 을 사용하면 value 값으로 매칭해서 Label을 출력해줍니다. 그리고 Object...

  quasar + vite + vue + typescript <Mac> 1. 사전 작업 pyenv + virtualenv + poetry 설치 python 3.11.1 설치 virtualenv로 가상환경 생성 py3.11.1 2. 환경 $ pyenv activate py3.11.1 $ yarn global add @quasar/cli $ npm install -g @vue/cli $ mkdir -p ~/myprj/quasar && cd $_ * vue3js + vite + quasar + typescript 로 프로젝트가 만들어짐 $ yarn create vite my-vue-app --template vue * 실행 $ vite dev VITE v4.0.2 ready in 377 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help 결과 <브라우저에서 확인> 삭제