pydantic migration v1.x to v2.x 오류 해결 안녕하세요. 클스 입니다. FastAPI를 이용해서 kakao 로그인을 구현하고자 했습니다. poetry add 'pydantic[ 'email' ]' 설치를 했습니다. 그랬더니 v1.x --> v2.2로 업그레이드 되면서 기존에 동작하던 configs.py 에서 아래와 같은 오류가 발생했습니다. pydantic.errors.PydanticImportError: `BaseSettings` has been moved to the `pydantic-settings` 해결[SOLVED] [원인] from pydantic import BaseSettings 이 v2.x가 되면서 pydantic-settings로 이동되었다는겁니다. [해결] $ poetry self update  [선택사항] $ poetry add 'pydantic[email]'    $ poetry add 'pydantic-settings' 설치 합니다. $ poetry update  [선택사항] configs.py 소스에서 아래와 같이 수정하면 됩니다. from asyncio import streams # from pydantic import BaseSettings, Field # DELETE from pydantic_settings import BaseSettings # NEW from pydantic import Field class DefaultSettings ( BaseSettings ): APP_ENV: str APP_NAME: str APP_DESCRIPTION: str APP_VERSION: str APP_BUILD_NO: int 그리고 pydantic에서 local.env 파일을 설정할때 문자, 숫자에 대한 강력한 validation을 합니다. [local.env 기존]에는 문자든 숫자든 상관없이 알아서 해줬...

안녕하세요. 클스 입니다. 오늘은 FastAPI에 여러개 worker를 실행하는 것을 해보려고 합니다. 많은 요청을 처리하기 위해서 worker를 해주면 좋습니다. worker의 계산은   2 x number_of_cores +1 이 적절하다고 합니다. 좀더 정확하게 산출해보려면 아래와 같이 계산하면 됩니다. number_of_workers = number_of_cores x num_of_threads_per_core + 1 MacOS의 터미널에서 $ sysctl -n hw.packages ==> MacOS에 장착된 cpu socket 수 $ sysctl hw.physicalcpu hw.logicalcpu ==> cpu의 core 수, 총 thread 수    num_of_threads_per_core(core당 thread 수) = hw.logicalcpu / hw.physicalcpu $ sysctl -n hw.ncpu 혹은 ==> core 수 $ sysctl -n machdep.cpu.thread_count ==> core 수 uvicorn과 hypercorn으로 실행하는데 --reload 옵션이 있으면 --workers는 무시되고 1개만 뜹니다. 그리고 reload process가 1개 실행 됩니다. 참고로 FastAPI 공식 문서 에서는 worker를 띄울때는 uvicorn 보다는 gunicorn을 사용하는게 좋다고 합니다. 그래서 저는 hypercorn을 많이 사용합니다. # uvicorn ```sh $ APP_ENV=dev uvicorn app:app --host "0.0.0.0" --port "8001" --reload $ APP_ENV=dev uvicorn app:app --host "0.0.0.0" --port "8001" --workers 4 ``` # hypercorn ```sh $ APP_ENV=dev hypercorn app:app --...

안녕하세요. 클스 입니다. 기존 프로젝트에서 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...